单元格类型 #

切勿误会，这里并非指代表格单元格内数据本身的类型，而是强调单元格解析后按照什么类型去操作图层。

例如：文本类型，图片类型，颜色类型，字体类型等等。

约束方式 #

受到 typescript 和 rust 启发，我们在表格解析的过程中引入了 类型约束，这样可以帮助用户在插入数据之前就能发现一些错误。

在表格解析中，类型约束是以列为单位的，换句话说，同一列的单元格必须满足同一种类型约束，具体原因可参考 表单结构 。

你可以通过显式标注和 隐式推断 两种方式对单元格类型进行约束

显式标注 #

出于尊重，我认为设计师应当对自己的行为负责。因此，用户可以在单元格中显式声明类型约束。

用户只需要在表头内用中括号包裹类型声明，例如：

// 表头
[text] 名称 ---> [text] 为类型声明 ---> 此列数据将会被解析成文本类型
[image] cover ---> [image] 为类型声明 ---> ...图片类型
[color] 配色 ---> [color] 为类型声明 ---> ...颜色类型
[font_name] 字体 ---> [font_name] 为类型声明 ---> ...字体类型

隐式推断 #

如果用户没有在表头内声明类型约束，那么编译器将会根据表格 第二行 数据内容进行推断，例如

// 第二行数据
'rgba(38, 174, 96, 0.5)'  ---> 会被推断为颜色类型
'font-[宋体]-(常规体)'    ---> ...字体类型
'text-12px' ---> ...字号类型
'op-0.5' ---> ...不透明度类型

具体的隐形推断规则请看具体类型介绍。

约束结果 #

无论是显式声明还是隐式推断，最终都会得到一个类型约束结果，这个结果会影响到后续的解析过程。

用户可以在 重命名图层 页面找到当前表格的类型约束结果（每一种约束都对应一种图层操作，为方便观察其图标也与设计软件保持一致）。

如果表格内容有修改，请点击左下角的 同步表格字段 按钮，重新解析单元格类型。

约束类型 #

先一次性给出所有类型的名称与对应声明关键字，后面再依次讲解。

文本 #

拥有此约束类型的单元格解析后会用来填充文本图层的文字内容。

操作对象仅限于文本图层，如果强制操作其他图层，请求会自动忽略。

以下表头内容均为有效显示声明，标识此列单元格为文本类型

[text] bookname
[Text] price

如果在表头没有发现显式声明，也无法根据第二行内容隐性推导类型约束，解析器会默认此列单元格为文本类型。

图片 #

此约束类型的单元格解析后会用来填充图层的背景图片。

图片必须是以链接的形式存在，如果不是，请求会自动忽略。

尽管设计软件对图片类型有所约束，例如MG仅支持类型为 png | jpeg | gif | webp的图片填充图层。但我们并不对图片类型进行限制， 只要是合法的图片链接，都可以填充图层。

以下表头内容均为有效显示声明，标识此列单元格为图片类型

[image] avatar
[Image] banner

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为图片类型

https://i.postimg.cc/m216j2gV/girl-10.jpg
https://i.postimg.cc/pVJjNtGX/avatar-girl-10.png
https://img.alicdn.com/imgextra/i2/O1CN01FF1t1g1Q3PDWpSm4b_!!6000000001920-55-tps-508-135.svg

颜色 #

此约束类型的单元格解析后会用来填充图层的背景颜色或者文本颜色。

解析器同时支持 hex，rgba，hsl 多种格式颜色。

以下表头内容均为有效显示声明，标识此列单元格为颜色类型

[color] background
[Color] color

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为颜色类型

#f00 // hex short
#26ae60, //hex
#26ae6090,// hex with alpha
rgb(38, 174, 96), // rgb
rgba(38, 174, 96, 0.5), // rgb with alpha
hsl(150, 60%, 40%), // hsl
hsla(150, 60%, 40%, 0.5) // hsl with alpha

隐藏图层 #

此约束类型的单元格解析后会用来控制图层的显示或者隐藏。

以下表头内容均为有效显示声明，标识此列单元格为隐藏图层类型

[display] hide
[Display] show

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为隐藏图层类型

block
hidden

透明度 #

此约束类型的单元格解析后会用来控制图层的透明度。

以下表头内容均为有效显示声明，标识此列单元格为图层透明度类型

[opacity] 0.5
[Opacity] 0.8

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为图层透明度类型

op-20
op-0.2
op-50%
Op-22.22%

尺寸 #

此约束类型的单元格解析后会用来控制图层的长宽大小。

以下表头内容均为有效显示声明，标识此列单元格为尺寸类型

[size] 大小
[Size] 规格

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为尺寸类型

w-12
h-12px
wh-12

你可以单独声明宽度或者高度，比如w-12px h-10px，也可一起声明 wh-12px，解析器会自动识别。

倘若你在表头显示标注了size，解析器会尽最大努力寻找单元格内的数值，并轮流将此映射为图层宽度和高度。 例如

100 --> 等同于 w-100
100px --> 等同于 w-100px

100 200 --> 等同于 w-100 h-200
100px 200px --> 等同于 w-100px h-200px

100 200 300 --> 等同于 w-300 h-200
100px 200px 300px 400px --> 等同于 w-300px h-400px

如果解析器在单元格内同时遇到标准格式字段与强制转换字段，解析器会优先使用标准字段，例如

w-20 200 --> 等同于 w-20
w-20px h-12px 30 40 --> 等同于 w-20px h-12px

圆角 #

此约束类型的单元格解析后会用来控制图层的圆角。

以下表头内容均为有效显示声明，标识此列单元格为圆角类型

[radius] 圆角
[Radius] 圆角

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为圆角类型

rd-12
rounded-12px

旋转 #

此约束类型的单元格解析后会用来控制图层的旋转角度。

以下表头内容均为有效显示声明，标识此列单元格为旋转类型

[rotate] 旋转
[Rotate] 旋转

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为旋转类型

rotate-12
rotate-20deg

位置 #

此约束类型的单元格解析后会用来控制图层相对位置。

以下表头内容均为有效显示声明，标识此列单元格为位置类型

[position] 位置
[Position] 位置

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为位置类型

top-12
top-12px
left-12
left-12px

字体 #

设计软件中，你必须同时指定字体的字体名称和字体样式，所以此约束类型的单元格解析后会用来控制图层的字体名称和字体样式。

操作对象仅限于文本图层，如果强制操作其他图层，请求会自动忽略。

以下表头内容均为有效显示声明，标识此列单元格为字体类型

[font_name] 主页样式
[Font_name] 书本内容样式

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为字体类型

font-[宋体]-(常规体)
font-[苹方-简]-(常规体)
font-[Noto Sans Duployan]-(Regular)

字号 #

此约束类型的单元格解析后会用来控制图层的字号。

操作对象仅限于文本图层，如果强制操作其他图层，请求会自动忽略。

以下表头内容均为有效显示声明，标识此列单元格为字号类型

[font_size] 字号
[Font_size] 字号

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为字号类型

font-12
font-12px

行高 #

此约束类型的单元格解析后会用来控制文本图层的行高。

操作对象仅限于文本图层，如果强制操作其他图层，请求会自动忽略。

以下表头内容均为有效显示声明，标识此列单元格为行高类型

[line_height] 行高
[Line_height] 行高

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为行高类型

leading-12
leading-12px

字间距 #

此约束类型的单元格解析后会用来控制文本图层的文字间距。

操作对象仅限于文本图层，如果强制操作其他图层，请求会自动忽略。

以下表头内容均为有效显示声明，标识此列单元格为字间距类型

[letter_spacing] 字间距
[Letter_spacing] 字间距

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为字间距类型

tracking-12
tracking-12px

文本对齐 #

此约束类型的单元格解析后会用来控制文本图层的水平对齐方向。

操作对象仅限于文本图层，如果强制操作其他图层，请求会自动忽略。

以下表头内容均为有效显示声明，标识此列单元格为文本对齐类型

[text_align] 文本对齐
[Text_align] 文本对齐

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为文本对齐类型

text-left
text-center
text-right
text-justify

文本垂直对齐 #

此约束类型的单元格解析后会用来控制文本图层的垂直对齐方向。

操作对象仅限于文本图层，如果强制操作其他图层，请求会自动忽略。

以下表头内容均为有效显示声明，标识此列单元格为文本垂直对齐类型

[text_vertical_align] 文本
[Text_vertical_align] 文本

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为文本垂直对齐类型

align-top
align-middle
align-bottom

段落间距 #

此约束类型的单元格解析后会用来控制文本图层的段落间距。

操作对象仅限于文本图层，如果强制操作其他图层，请求会自动忽略。

以下表头内容均为有效显示声明，标识此列单元格为段落间距类型

[paragraph_spacing] 段落间距
[Paragraph_spacing] 段落间距

以下单元格的内容均为有效隐式推断，解析器可以推断出此列单元格为段落间距类型

space-12
space-12px

组件 #

此约束类型的单元格解析后会用来修改实例图层对应的原始组件。

操作对象仅限于实例图层，如果强制操作其他图层，请求会自动忽略。

以下表头内容均为有效显示声明，标识此列单元格为组件类型

[component] 书本
[Component] 书本

组件变体 #

此约束类型的单元格解析后会用来修改实例图层对应的原始组件变体。

操作对象仅限于实例图层，如果强制操作其他图层，请求会自动忽略。

以下表头内容均为有效显示声明，标识此列单元格为组件变体类型

[variant] 卡片种类
[variant] 卡片种类