使用 Table 组件

在插件中使用 Table 变体
本文档介绍设计师、项目经理如何使用 Semi Figma 插件快捷创建表格、更新表格。
遵循下面的使用方式可以让设计稿中的 Table 具有转代码能力。

插入表格到画布

  • 方式一:从 Assets 中拖拽 Table
  • 方式二:使用 cmd + / 命令唤起 Semi 插件,选中生成表格,回车后表格会快速插入到画布上。
温馨提示
社区版此功能受限,请使用你已发布的设计组件库,采用方式一拖拽表格组件到画布上。

切换表格变体

通过切换变体选择不同尺寸、带边框的表格。

新增列

Step1. 选中表格图层,右键解绑。
Step2. 选中任意 TableColumn,复制粘贴。

更新表格内容

小提示
Semi 提供了「拓展单元格」功能帮助快速更新表格内容。
Step1. 解绑 TableColumn 后,更新每一列的第一个 TD。
Step2. 其他列如果也需要更新,重复上述操作。TD 是否是解绑状态都可以,如果 swap TD,需要保留 TD 图层名。
Step3. 打开插件,运行「拓展单元格」,插件会自动将每列第一个单元格的内容拓展到其余行
实现原理
「拓展单元格」将第一个单元格作为基础,复制到其他行,减少手动复制成本。

自定义表格

如果你需要在不解绑 TableColumn 的情况下更新表格内容,可以自定义表格列 TableColumn 或自定义单元格 TD。
然后通过 swap 功能将默认的 TableColumn 或 TD 替换为自定义组件。

自定义 TableColumn

  • Step1. 复制 Semi Variants TableColumn,粘贴到自己的组件库或空白文件
  • Step2. 添加新的 TableColumn 变体,或根据 TableColumn 结构从 0 到 1 创建组件集
如果你是从 0 到 1 创建 TableColumn 组件集的,建议将 TableColumn 的一个变体作为模板开始拓展。
拓展时,将 TH 和 TD swap 为自己维护的 TD 和 TH。
  • Step3. 发布组件,将 TableColumn 发布以便使用
注意
TableColumn 应该保留原来的变体属性,如 Size、Align、fixedToLeft、fixedToRight、rowSelect。这些变体属性在 D2C 时会识别为 Table.Column 组件的 props。

使用 TableColumn 组件

在构建 Table 组件或使用默认 Table 组件时,选中 TableColumn,swap 为自己维护的 TableColumn 组件。

Table 使用规范

设计师请留意,使用默认 TableColumn 和自定义 TableColumn 需要遵循下图中的限制。
为什么有这些限制?
D2C 需要根据相关的信息找到需要识别的内容。例如识别单元格需要知道单元格在哪,因此 TableColumn、TH、TD 的名字不能修改。

© 2021 - 2024 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED

  • 开始
    • 介绍
    • 快速开始
    • 选型对比
    • 相关术语
    • 常见问题
    • 更新日志
  • 研发使用手册
    • 代码转译
    • 标记图层
    • 标记表格
    • 标记组件库
    • 标记图标库
    • 设计稿检查
    • 转码插件
    • 故障排除
    • 基础转换原理
    • 支持组件列表
    • 全局设置
  • 设计使用手册
    • 使用 Semi Variants
    • 自定义 Variants
    • 设计稿规范
    • 使用 Table 组件
    • 使用 Form 组件
    • 迁移旧设计稿
  • 更多
    • 联系我们
    • 路线图
    • JSON Schema
    • 已知问题