canvas-component-utils

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Import utilities from the

drupal-canvas

package:

jsx

import { FormattedText, Image } from 'drupal-canvas';

从

drupal-canvas

包中导入实用工具：

jsx

import { FormattedText, Image } from 'drupal-canvas';

FormattedText

Use

FormattedText

to render HTML content from props. This is required for any prop with

contentMediaType: text/html

in component.yml.

yaml

undefined

使用

FormattedText

来渲染来自props的HTML内容。对于component.yml中标记有

contentMediaType: text/html

的任何prop，都需要使用该组件。

yaml

undefined

component.yml

props: properties: text: title: Text type: string contentMediaType: text/html x-formatting-context: block examples: - This is formatted text.


```jsx
import { FormattedText } from 'drupal-canvas';

const Text = ({ text, className }) => (
  <FormattedText className={className}>{text}</FormattedText>
);

When to use FormattedText:

Props that accept rich text/HTML content
Any prop with
```
contentMediaType: text/html
```
Content that may contain
```

```
,
```

```
,
```

```
,
```
<a>
```
, or other HTML tags

Do NOT use FormattedText for:

Plain text props (type: string without contentMediaType)
Headings or titles (use regular elements)

props: properties: text: title: Text type: string contentMediaType: text/html x-formatting-context: block examples: - This is formatted text.


```jsx
import { FormattedText } from 'drupal-canvas';

const Text = ({ text, className }) => (
  <FormattedText className={className}>{text}</FormattedText>
);

何时使用FormattedText：

可接受富文本/HTML内容的props
任何带有
```
contentMediaType: text/html
```
的prop
可能包含
```

```
、
```

```
、
```

```
、
```
<a>
```
或其他HTML标签的内容

请勿将FormattedText用于：

纯文本props（类型为string且无contentMediaType标记）
标题或页头（使用常规元素）

Image

Use

Image

for responsive image rendering. It handles responsive behavior and optimization automatically.

yaml

undefined

使用

Image

进行响应式图片渲染。它会自动处理响应式行为和优化。

yaml

undefined

component.yml

props: properties: image: title: Image type: object $ref: json-schema-definitions://canvas.module/image examples: - src: https://example.com/photo.jpg alt: Description of image width: 800 height: 600


```jsx
import { Image } from 'drupal-canvas';

const Card = ({ image }) => {
  const { src, alt, width, height } = image;
  return (
    <Image
      src={src}
      alt={alt}
      width={width}
      height={height}
      className="w-full rounded-lg object-cover"
    />
  );
};

Image props:

```
src
```
- Image URL (required)
```
alt
```
- Alt text for accessibility (required)
```
width
```
- Original image width
```
height
```
- Original image height
```
className
```
- Tailwind classes for styling

props: properties: image: title: Image type: object $ref: json-schema-definitions://canvas.module/image examples: - src: https://example.com/photo.jpg alt: Description of image width: 800 height: 600


```jsx
import { Image } from 'drupal-canvas';

const Card = ({ image }) => {
  const { src, alt, width, height } = image;
  return (
    <Image
      src={src}
      alt={alt}
      width={width}
      height={height}
      className="w-full rounded-lg object-cover"
    />
  );
};

Image的props：

```
src
```
- 图片URL（必填）
```
alt
```
- 用于无障碍访问的替代文本（必填）
```
width
```
- 图片原始宽度
```
height
```
- 图片原始高度
```
className
```
- 用于样式的Tailwind类