设计面板属性参考

本文是所有组件设计标签页下的通用属性字段参考，包含各分区属性的意义、常见字段和出现规则。组件专属配置见各组件参考手册；布局原理见布局系统。

设计标签结构

右侧属性面板概览

分区	说明
标题与 ID	显示组件名称和组件 ID。
对齐工具栏	图标按钮区，用于快速对齐和均匀分布。
个性化配置	当前组件的专属属性，标题通常显示为组件名，例如「文本」「视图」。
位置	定位类型、偏移、层级等。
尺寸	宽度、高度、外边距、内边距等。
布局	子组件排列、对齐、间距、溢出等。
样式	可见性、不透明度、背景、边框、阴影等。
文本	字体、字号、颜色、行高等。

💡

网页端的组件存在PC、平板、手机三种断点，位置、尺寸、布局、样式等配置可按断点复写，具体规则见断点规格参考。

标题与 ID

组件标题与 ID

字段	说明
标题	组件在结构树和右侧面板中的显示名称。悬停标题可重命名。
id	复制当前组件 id，常用于排查问题、定位组件。

快速对齐与分布

对齐操作

对齐工具栏是设计标签顶部的一排图标按钮，它用于快速调整当前选中组件的位置关系。

选中对象	能力	说明
单个组件	与父级容器边缘对齐	仅对绝对 / 固定定位组件生效。
多个组件	多组件对齐	让多个组件按左、右、上、下或中心线对齐。
≥ 3 个组件	均匀分布	让多个组件在水平或垂直方向上均匀分布。

定位原理见布局系统 · 定位。

个性化配置

各组件差异化的属性配置区域，例如文本组件的内容绑定，列表的行数配置等。相同组件在不同平台上可支持的能力也可能存在差异。

组件专属字段见展示类组件、输入类组件、布局类组件、其他类组件。

交互状态

配置某些组件常规和悬停是样式状态切换，仅「按钮」和「视图」组件支持。概念说明见 UI 组织方式。

位置

定位类型、偏移、层级等。

配置项	说明
定位类型	支持相对、绝对、固定。相对定位参与父容器布局；绝对定位相对父容器定位；固定定位相对视口固定。
偏移	绝对、固定定位时可设置 top / right / bottom / left。
层级 (Z-index)	控制组件堆叠顺序。数值越大，视觉上越靠前。

位置类型示意

层级设置示意

尺寸

宽度、高度、外边距、内边距等。

配置项	说明
宽度 / 高度	支持像素、百分比、份 (fr)、适应内容等模式；部分组件可设置最大/最小尺寸。
外边距	控制组件与外部相邻元素之间的距离。
内边距	控制组件边界与内部内容之间的距离。部分组件不支持内边距。

尺寸配置

内边距	外边距

算法含义见布局系统 · 盒子模型。

布局

布局分区主要出现在页面、弹窗、视图等容器类组件上，用于控制子组件如何排列。

配置项	说明
方向	控制子组件横向排列或纵向排列。
主轴 / 交叉轴对齐	控制子组件沿排列方向和垂直方向的对齐方式。
间距	控制子组件之间的距离。
换行	子组件超出容器宽度或高度时是否换行。
溢出	内容超出容器时，设置为滚动、可见或隐藏。

Flex 分布、换行、间隔等图示见布局系统 · Flexbox。

样式

配置项	平台	说明
可见性	仅 Web	控制组件是否显示。断点内隐藏组件也属于可见性配置。
不透明度	全平台	控制组件整体透明度。
光标	仅 Web	控制鼠标悬停在组件上时的光标样式。
背景	视组件而定	配置背景色、背景图等。
边框	视组件而定	配置边框颜色、粗细、圆角等。
阴影	视组件而定	配置组件的盒阴影效果。
背景模糊	视组件而定	配置背景模糊效果，常用于弹层、毛玻璃视觉。

文本

文本分区出现在含文字内容的组件上。个性化配置中的「内容」决定显示什么，文本分区决定如何显示。

配置项	说明
字体	设置文字字体。
字号	设置文字大小。
字重	设置文字粗细。
颜色	设置文字颜色。
行高 / 字距	控制文字排版密度。
对齐	控制文字在组件内部的对齐方式。