Back to Details

canvas-component-definition

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Canonical definition

标准定义

A Canvas component is a package of:
  1. A React implementation (
    index.jsx
    )
  2. Canvas metadata/schema (
    component.yml
    )
  3. Naming and structure compatibility (
    machineName
    , folder path, story path)
  4. Canvas-compatible props/slots modeling
All four parts are required for the component to be usable in Drupal Canvas.
Canvas组件是一个包含以下部分的包：
  1. React实现文件（
    index.jsx
    ）
  2. Canvas元数据/模式文件（
    component.yml
    ）
  3. 命名与结构兼容性（
    machineName
    、文件夹路径、Story路径）
  4. 兼容Canvas的props/slots建模
这四个部分是组件能在Drupal Canvas中使用的必要条件。

Minimum contract (MUST)

最低要求（必须满足）

Every Canvas component MUST satisfy all checks below:
  • Component folder exists at 
    <components-root>/<machine-name>/
    (use the repository's configured components root, which may be defined in 
    .env
    )
  • React implementation exists at 
    <components-root>/<machine-name>/index.jsx
  • Metadata exists at 
    <components-root>/<machine-name>/component.yml
  • component.yml
    includes required top-level keys (
    name
    , 
    machineName
    , 
    status
    , 
    required
    , 
    props
    , 
    slots
    )
  • Folder name exactly matches 
    machineName
    in 
    component.yml
    (kebab-case)
  • A matching story exists at 
    <stories-root>/<machine-name>.stories.jsx
    (use the repository's configured stories root)
  • Props/slots follow Canvas rules (for example, avoid unsupported array-of-object prop shapes; use slots for repeatable complex content)
If any item is missing, the component is incomplete for Canvas usage.
每个Canvas组件都必须通过以下所有检查：
  • 组件文件夹存在于
    <components-root>/<machine-name>/
    （使用仓库中配置的组件根目录，该目录可能在
    .env
    中定义）
  • React实现文件存在于
    <components-root>/<machine-name>/index.jsx
  • 元数据文件存在于
    <components-root>/<machine-name>/component.yml
  • component.yml
    包含必填的顶级键（
    name
    、
    machineName
    、
    status
    、
    required
    、
    props
    、
    slots
    ）
  • 文件夹名称与
    component.yml
    中的
    machineName
    完全匹配（短横线分隔的小写格式）
  • 对应的Story文件存在于
    <stories-root>/<machine-name>.stories.jsx
    （使用仓库中配置的Story根目录）
  • Props/slots遵循Canvas规则（例如，避免不支持的对象数组类型props；使用slots处理可重复的复杂内容）
如果缺少任意一项，该组件就无法在Canvas中正常使用。