# Ant Design > 本文档包含了 Ant Design 组件库中所有组件的语义化描述信息。 --- # Source: https://ant.design/llms-semantic.md # Ant Design 组件语义化描述 本文档包含了 Ant Design 组件库中所有组件的语义化描述信息。 > 总计 65 个组件包含语义化描述 ## 组件列表 ### alert - `root`: 根元素,包含边框、背景色、内边距、圆角、位置布局等警告提示框的基础样式 - `section`: 内容元素,采用 flex 布局控制内容区域的排版和最小宽度 - `icon`: 图标元素,包含图标的颜色、行高、外边距等样式,支持不同类型的状态图标 - `title`: 标题元素,包含标题文字的颜色、字体等样式 - `description`: 描述元素,包含描述文字的字体大小、行高等排版样式 - `actions`: 操作组元素,包含操作按钮的布局和间距样式 - `close`: 关闭按钮元素,包含按钮的基础样式 ### anchor - `root`: 根元素,包含布局定位、内边距、边距、背景色等基础样式 - `item`: 链接项元素,包含内边距、文字颜色、悬停状态、过渡动画等样式 - `itemTitle`: 标题文字元素,包含字体样式、颜色变化、文本装饰、过渡效果等样式 - `indicator`: 指示器元素,包含宽度、高度、背景色、位置变化、过渡动画等样式 ### badge - `root`: 根元素,包含相对定位、行内块布局、适应内容宽度等基础布局样式 - `indicator`: 指示器元素,包含定位、层级、尺寸、颜色、字体、文本对齐、背景、圆角、阴影、过渡动画等完整的徽标样式 ### breadcrumb - `root`: 根元素,包含文字颜色、字体大小、图标尺寸等基础样式,内部使用 flex 布局的有序列表 - `item`: Item 元素,包含文字颜色、链接的颜色变化、悬浮效果、内边距、圆角、高度、外边距等样式 - `separator`: 分隔符元素,包含分隔符的外边距和颜色样式 ### button - `root`: 根元素,包含边框样式、背景色、内边距、圆角、阴影效果、过渡动画、光标样式、文字权重、对齐方式等完整的按钮外观样式 - `content`: 内容元素,包装按钮文本内容,控制文本的不换行显示、居中对齐、中文字符间距优化等文本排版样式 - `icon`: 图标元素,包含图标的字体大小、颜色继承、SVG 样式重置等图标显示相关样式 ### calendar - `root`: 根元素,包含日历组件的背景色、边框、圆角等基础样式和整体布局结构 - `header`: 头部元素,包含年份选择器、月份选择器、模式切换器的布局和样式控制 - `body`: 主体元素,包含日历表格的内边距、布局控制等样式,用于容纳日历网格 - `content`: 内容元素,包含日历表格的宽度、高度等尺寸控制和表格样式 - `item`: 条目元素,包含日历单元格的背景色、边框、悬停态、选中态等交互样式 ### card - `root`: 卡片根元素,包含位置定位、背景色、边框、圆角、阴影、内边距等卡片容器的基础样式 - `header`: 卡片头部区域,包含 flex 布局、最小高度、内边距、文字颜色、字体权重、字体大小、背景色、下边框、顶部圆角等样式 - `body`: 卡片内容区域,包含内边距、字体大小等内容展示的基础样式 - `extra`: 卡片右上角的操作区域,包含额外内容的文字颜色和布局样式 - `title`: 卡片标题,包含行内块布局、flex 占比、文本省略等标题显示样式 - `actions`: 卡片底部操作组,包含 flex 布局、列表样式重置、背景色、上边框、底部圆角等操作按钮容器样式 - `cover`: 标题封面,包含封面图片的显示和布局样式 ### card:meta - `root`: 设置元信息根元素 - `section`: 设置元信息内容元素 - `avatar`: 设置元信息图标 - `title`: 设置元信息标题 - `description`: 设置元信息描述 ### checkbox - `root`: 根元素,包含行内 flex 布局、基线对齐、光标样式、重置样式等复选框容器的基础样式 - `icon`: 选中框元素,包含尺寸、方向、背景色、边框、圆角、过渡动画,以及选中状态的勾选标记样式 - `label`: 文本元素,包含文本的内边距和与复选框的间距样式 ### collapse - `root`: 根元素,包含折叠面板的边框、圆角、背景色等容器样式,控制面板的整体布局和外观 - `header`: 头部元素,包含flex布局、内边距、颜色、行高、光标样式、过渡动画等面板头部的交互和样式 - `title`: 标题元素,包含flex自适应布局、右边距等标题文字的布局和排版样式 - `body`: 内容元素,包含内边距、颜色、背景色等面板内容区域的展示样式 - `icon`: 图标元素,包含字体大小、过渡动画、旋转变换等展开收起箭头的样式和动效 ### colorPicker - `root`: 触发器容器,包含边框样式、过渡动画、尺寸控制等样式,显示颜色块和文本内容 - `popup`: - `root`: 弹出面板根容器,包含背景色、阴影效果、色彩选择面板、滑块控制和预设颜色等样式 ### datePicker - `root`: 根元素,包含相对定位、行内flex布局、内边距、边框圆角、过渡动画等日期选择器容器的基础样式 - `prefix`: 前缀元素,包含flex布局、右外边距等前缀内容的布局样式 - `input`: 输入框元素,包含相对定位、宽度、颜色、字体、行高、过渡动画等输入框的核心交互样式 - `suffix`: 后缀元素,包含flex布局、颜色、行高、指针事件、过渡动画等后缀内容的样式 - `popup`: - `container`: 容器元素,设置背景色、内边距、圆角、阴影、边框和内容展示样式 - `header`: 弹出框头部元素,包含导航按钮、月份年份选择器等头部控制区域的布局和样式 - `body`: 弹出框主体元素,包含日期面板表格的容器布局和样式 - `content`: 弹出框内容元素,包含日期表格的宽度、边框、单元格等内容展示样式 - `item`: 弹出框单项元素,包含日期单元格的尺寸、背景色、边框圆角、悬停态、选中态等交互样式 - `footer`: 弹出框底部元素,包含确认取消按钮、快捷选择等底部操作区域的布局样式 ### descriptions - `root`: 根元素,包含描述列表容器的基础样式、重置样式、边框样式、布局方向等整体样式 - `header`: 头部元素,包含flex布局、对齐方式、下边距等头部区域的布局和样式控制 - `title`: 标题元素,包含文本省略、flex占比、颜色、字体权重、字体大小、行高等标题文字样式 - `extra`: 额外内容元素,包含左边距、颜色、字体大小等额外操作区域的样式 - `label`: 标签元素,包含颜色、字体权重、字体大小、行高、文本对齐、冒号样式等标签文字的样式 - `content`: 内容元素,包含表格单元格布局、颜色、字体大小、行高、文字换行等内容展示样式 ### divider - `root`: 根元素,包含边框顶部样式、分隔线样式等分割线容器的基础样式 - `content`: 内容元素,包含行内块显示、内边距等分割线文本内容的样式 - `rail`: 背景条元素,包含边框顶部样式等分割线连接条的样式 ### drawer - `root`: 根元素,包含固定定位、层级控制、指针事件、颜色等抽屉容器的基础样式和布局控制 - `mask`: 遮罩层元素,包含绝对定位、层级、背景色、指针事件等遮罩层的样式和交互控制 - `section`: Drawer 容器元素,包含flex布局、宽高、溢出控制、背景色、指针事件等抽屉主体的样式 - `header`: 头部元素,包含flex布局、对齐方式、内边距、字体大小、行高、下边框等头部区域的样式 - `body`: 内容元素,包含flex占比、最小尺寸、内边距、溢出滚动等内容区域的展示和布局样式 - `footer`: 底部元素,包含flex收缩、内边距、上边框等底部操作区域的样式 - `title`: 标题元素,包含flex占比、外边距、字体权重、字体大小、行高等标题文字的样式 - `extra`: 额外元素,包含flex固定布局等额外操作内容的样式控制 - `dragger`: 拖拽元素,用于调整抽屉大小的拖拽手柄,包含绝对定位、背景透明、指针事件控制、hover状态样式、拖拽状态样式等 - `close`: 关闭按钮元素,包含按钮的基础样式 ### dropdown - `root`: dropdown 的根元素,设置定位、层级和容器样式 - `itemTitle`: dropdown 选项的标题内容区域,设置布局和文字样式 - `item`: dropdown 的单个选项元素,设置选项的交互状态和背景样式 - `itemContent`: dropdown 选项的主要内容区域,设置内容布局和链接样式 - `itemIcon`: dropdown 选项的图标区域,设置图标的尺寸和间距样式 ### empty - `root`: 根元素,设置文本对齐、字体和行高样式 - `image`: 图标元素,设置高度、透明度、边距和图片样式 - `description`: 描述元素,设置文本颜色样式 - `footer`: 底部元素,设置顶部边距和操作按钮样式 ### floatButton - `root`: 根元素,设置悬浮按钮的基础样式、形状尺寸、类型主题、固定定位、层级、阴影、间距等容器样式 - `content`: 内容元素,设置按钮内文字内容的字体大小、颜色、对齐、换行等文本显示样式 - `icon`: 图标元素,设置按钮内图标的尺寸、颜色、行高、对齐等图标显示样式 ### floatButtonGroup - `root`: 根元素,设置悬浮按钮组的容器样式、固定定位、层级、内边距、间距、方向模式等组合布局样式 - `list`: 列表元素,设置按钮组列表的Flex布局、圆角、阴影、动画过渡、垂直对齐等列表容器样式 - `item`: 列表项元素,设置单个悬浮按钮的样式、尺寸、形状、类型、状态、图标内容等按钮基础样式 - `itemIcon`: 列表项图标元素,设置悬浮按钮内图标的尺寸、颜色、对齐等图标显示样式 - `itemContent`: 列表项内容元素,设置悬浮按钮内文字内容、徽标、描述等内容区域样式 - `trigger`: 触发元素,设置菜单模式下触发按钮的样式、形状、图标、悬停态、展开收起状态等交互样式 - `triggerIcon`: 触发图标元素,设置触发按钮内图标的样式、旋转动画、切换状态等图标交互样式 - `triggerContent`: 触发内容元素,设置触发按钮内容区域的文字、标识、状态指示等内容样式 ### form - `root`: 根元素,包含表单项的底边距、垂直对齐、过渡动画、隐藏状态、错误警告状态等表单项容器的基础样式 - `label`: 标签元素,包含 flex 布局、溢出隐藏、文本不换行、文本对齐、垂直对齐,以及标签的颜色、字体大小、高度、必填标记等标签显示样式 - `content`: 内容元素,包含表单内容区域的布局、样式和控件容器的相关样式 ### image - `root`: 根元素,设置相对定位和行内块布局样式 - `image`: 图片元素,设置宽度、高度和垂直对齐样式 - `cover`: 悬浮图片显示的提示元素,设置绝对定位、背景色、透明度和过渡动画样式 - `popup`: - `root`: 预览根元素,设置固定定位、层级和背景遮罩样式 - `mask`: 预览遮罩元素,设置绝对定位和半透明背景样式 - `body`: 预览内容元素,设置flex布局、居中对齐和指针事件样式 - `footer`: 预览页脚元素,设置绝对定位、居中布局和底部操作区域样式 - `actions`: 预览操作组元素,设置flex布局、背景色、圆角和操作按钮样式 ### input - `root`: 根元素,包含相对定位、行内块布局、宽度、最小宽度、内边距、颜色、字体、行高、圆角、过渡动画等输入框容器的基础样式 - `input`: 输入框元素,包含输入框的核心交互样式和文本输入相关的样式 - `prefix`: 前缀的包裹元素,包含前缀内容的布局和样式 - `suffix`: 后缀的包裹元素,包含后缀内容的布局和样式 - `count`: 文字计数元素,包含字符计数显示的字体和颜色样式 ### input:password - `root`: 根元素 - `input`: 输入框元素 - `prefix`: 前缀的包裹元素 - `suffix`: 后缀的包裹元素 - `count`: 文字计数元素 ### inputNumber - `root`: 根元素,设置行内块布局、宽度、边框圆角和重置样式 - `input`: 输入框元素,设置字体、行高、文本输入和交互样式 - `prefix`: 前缀的包裹元素,设置flex布局、对齐方式和右边距样式 - `suffix`: 后缀的包裹元素,设置flex布局、边距和过渡动画样式 - `action`: 单个操作按钮元素,设置按钮的样式、悬浮效果和点击交互 - `actions`: 操作元素,设置绝对定位、宽度、flex布局和数值调节按钮样式 ### inputSearch - `root`: 根元素 - `input`: 输入框元素 - `prefix`: 前缀的包裹元素 - `suffix`: 后缀的包裹元素 - `count`: 文字计数元素 - `button`: - `root`: 按钮根元素 - `icon`: 按钮图标元素 - `content`: 按钮内容元素 ### list - `extra`: 设置额外内容 - `actions`: 设置列表操作组 ### masonry - `root`: 根元素,设置相对定位、flex布局和瀑布流容器样式 - `item`: 条目元素,设置绝对定位、宽度计算、过渡动画和瀑布流项目样式 ### mentions - `root`: 根元素,设置行内flex布局、相对定位、内边距和边框样式 - `textarea`: 文本域元素,设置字体、行高、文本输入和背景样式 - `popup`: 弹出框元素,设置绝对定位、层级、背景色、圆角、阴影和下拉选项样式 - `suffix`: 后缀元素,包含后缀内容的布局和样式,如清除按钮等 ### menu - `root`: 根元素,包含菜单容器的基础样式和布局 - `item`: 条目元素,包含相对定位、块级显示、外边距、空白符处理、光标样式、过渡动画等菜单项的基础交互样式 - `itemContent`: 条目内容元素,包含菜单项内容的布局和排版样式 - `itemIcon`: 图标元素,包含最小宽度、字体大小、过渡动画、图标重置样式,以及与文本的间距控制 - `itemTitle`: 菜单标题元素(horizontal 模式不生效),包含标题文字的样式和布局 - `list`: 菜单列表元素(horizontal 模式不生效),包含菜单列表的布局和容器样式 - `popup`: 弹出菜单(inline 模式不生效),包含弹出层的定位、层级、背景等样式 - `subMenu`: - `itemTitle`: 子菜单标题元素,包含子菜单标题的样式和交互效果 - `list`: 子菜单列表元素,包含子菜单列表的布局和容器样式 - `item`: 子菜单单项元素,包含子菜单项的样式和交互效果 - `itemIcon`: 子菜单条目图标元素,包含子菜单图标的尺寸和样式 - `itemContent`: 子菜单条目内容元素,包含子菜单内容的布局和排版 ### message - `root`: 根元素,设置固定定位、层级、内边距、背景色、圆角、阴影和动画样式 - `icon`: 图标元素,设置字体大小、右边距和状态颜色样式 - `content`: 内容元素,设置行内块布局、文字颜色和内容展示样式 ### modal - `root`: 根元素,包含相对定位、顶部位置、宽度、最大宽度、外边距、底部内边距等模态框容器的基础布局样式 - `mask`: 遮罩层元素,包含固定定位、层级、背景色、动画过渡等遮罩层的样式 - `wrapper`: 包裹层元素,一般用于动画容器,包含动画和过渡效果的样式 - `container`: Modal 容器元素,包含相对定位、背景色、背景裁剪、边框、圆角、阴影、指针事件、内边距等模态框主体样式 - `header`: 头部元素,包含头部内边距、下边框等头部区域样式 - `title`: 标题元素,包含外边距、颜色、字体权重、字体大小、行高、文字换行等标题文字样式 - `body`: 内容元素,包含内容区域的背景色、内边距等内容展示样式 - `footer`: 底部元素,包含底部的背景色、内边距、上边框、圆角等底部区域样式 ### notification - `root`: 根元素,设置固定定位、层级、内边距、背景色、圆角、阴影和动画样式 - `icon`: 图标元素,设置绝对定位、字体大小、行高和状态颜色样式 - `title`: 标题元素,设置颜色、字体大小、行高和外边距样式 - `description`: 描述元素,设置字体大小、颜色和外边距样式 - `actions`: 操作组元素,设置右浮动、上边距和操作按钮布局样式 ### otp - `root`: 根元素,设置行内flex布局、对齐方式、列间距和包装样式 - `input`: 输入框元素,设置文本居中、内边距和数字输入样式 - `separator`: 分隔符元素,设置OTP输入框之间的分隔符显示样式 ### pagination - `root`: 根元素,设置flex布局、对齐方式、换行和列表样式 - `item`: 页码元素,设置尺寸、内边距、边框、背景色、悬停态和激活态样式 ### popconfirm - `root`: 根元素,设置绝对定位、层级、变换原点、箭头指向和弹层容器样式 - `container`: 容器元素,设置背景色、内边距、圆角、阴影、边框和内容展示样式 - `arrow`: 箭头元素,设置宽高、位置、颜色和边框样式 - `title`: 标题元素,设置标题文本样式和间距 - `content`: 描述元素,设置描述文本样式和布局 ### popover - `root`: 根元素,设置绝对定位、层级、变换原点、箭头指向和弹层容器样式 - `container`: 容器元素,设置背景色、内边距、圆角、阴影、边框和内容展示样式 - `arrow`: 箭头元素,设置宽高、位置、颜色和边框样式 - `title`: 标题元素,设置标题文本样式和间距 - `content`: 内容元素,设置内容文本样式和布局 ### progress - `root`: 根元素,设置相对定位和基础容器样式 - `body`: 主体元素,设置进度条的布局和尺寸样式 - `rail`: 导轨元素,设置背景轨道的颜色和圆角样式,steps 模式下没有该元素 - `track`: 轨迹元素,设置进度填充部分的颜色和过渡动画样式 - `indicator`: 指示器元素,设置百分比文本或图标的位置和字体样式 ### qrCode - `root`: 根元素,设置flex布局、内边距、背景色、边框、圆角和相对定位样式 - `cover`: 遮罩层元素,设置绝对定位、层级、背景色和加载状态覆盖样式 ### radio - `root`: 根元素,包含布局样式、鼠标样式、禁用状态文字颜色等基础容器样式 - `icon`: 选中框元素,包含圆角样式、过渡动画、边框样式、悬停状态、焦点状态等交互样式 - `label`: 文本元素,包含内边距、文字颜色、禁用状态、对齐方式等文本样式 ### result - `root`: 根元素,包含文本对齐、布局样式等基础容器样式 - `title`: 标题元素,包含字体大小、文字颜色、行高、对齐方式等文字样式 - `subTitle`: 副标题元素,包含字体大小、文字颜色、行高等文字样式 - `body`: 内容元素,包含外边距、内边距、背景色等内容区域样式 - `extra`: 操作区域元素,包含外边距、文本对齐、内部元素间距等布局样式 - `icon`: 图标元素,包含外边距、文本对齐、字体大小、状态颜色等图标样式 ### ribbon - `root`: 根元素,设置相对定位和包装容器样式 - `indicator`: 指示器元素,设置绝对定位、内边距、背景色、圆角和缎带样式 - `content`: 文本元素,设置文本颜色和缎带内容显示样式 ### segmented - `root`: 根元素,设置行内块布局、内边距、背景色、圆角、过渡动画和容器样式 - `item`: 选项元素,设置相对定位、文本对齐、光标样式、过渡动画、选中态背景色和悬停态样式 - `icon`: 图标元素,设置图标的尺寸、颜色和与文本的间距样式 - `label`: 标签内容元素,设置最小高度、行高、内边距、文本省略和内容布局样式 ### skeleton - `root`: 根元素,包含表格显示、宽度、动画效果、圆角等骨架屏容器的基础样式 - `header`: 头部元素,包含表格单元格、内边距、垂直对齐等头像占位区域的布局样式 - `section`: 区块元素,包含骨架屏内容区域的布局样式 - `avatar`: 头像元素,包含行内块显示、垂直对齐、背景色、尺寸、圆角等头像占位的样式 - `title`: 标题元素,包含宽度、高度、背景色、圆角等标题占位的样式 - `paragraph`: 段落元素,包含内边距、列表项样式、背景色、圆角等段落占位的样式 ### skeleton:element - `root`: 根元素 - `content`: 内容元素 ### slider - `root`: 根元素,设置相对定位、高度、边距、内边距、光标样式和触摸事件控制 - `track`: 轨道选取条元素,设置绝对定位、背景色、圆角和过渡动画样式 - `tracks`: 多段轨道容器元素,设置绝对定位和过渡动画样式 - `rail`: 背景轨道元素,设置绝对定位、背景色、圆角和过渡动画样式 - `handle`: 滑块控制点元素,设置绝对定位、尺寸、轮廓线、用户选择、背景色、边框阴影、圆角、光标样式和过渡动画 ### space - `root`: 根元素,包含 flex 布局、间隙设置、对齐方式、换行等间距容器的基础样式 - `item`: 包裹的子组件,包含间距项的布局和样式,为每个子元素提供包装用于内联对齐 - `separator`: 分隔符,包含分隔元素的样式 ### spin - `root`: 根元素,设置绝对定位、显示控制、颜色、字体大小、文本对齐、垂直对齐、透明度和过渡动画(fullscreen 为 false 时才有效) - `indicator`: 指示器元素,设置宽度、高度、字体大小、行内块显示、过渡动画、变换原点、行高和颜色 ### spin:fullscreen - `mask`: 遮罩层元素 - `indicator`: 指示器元素 ### splitter - `root`: 根元素,设置flex布局、宽度高度、对齐方式和拉伸样式 - `panel`: 面板元素,设置flex基础值、增长比例和面板容器样式 - `dragger`: 拖拽控制元素,设置绝对定位、用户选择、层级、居中对齐、背景色、悬停态和激活态样式 ### statistic - `root`: 根元素,包含统计数值组件的重置样式和整体容器样式 - `header`: 头部元素,包含下内边距和标题区域的布局样式 - `title`: 标题元素,包含文字颜色、字体大小等标题文字的显示样式 - `content`: 内容元素,包含文字颜色、字体大小、字体族等数值内容的展示样式 - `prefix`: 前缀元素,包含行内块显示、右外边距等前缀内容的布局样式 - `suffix`: 后缀元素,包含行内块显示、左外边距等后缀内容的布局样式 ### steps - `root`: 根元素,包含 flex 布局、禁止换行、对齐方式、CSS 变量等步骤条容器的基础样式 - `item`: 步骤项元素,包含 flex 布局、相对定位等单个步骤项的基础容器样式 - `itemWrapper`: 步骤项内裹元素,包含 flex 布局、禁止换行、顶部内边距等步骤项内容的包装样式 - `itemIcon`: 步骤项图标元素,包含图标的尺寸、定位、字体大小等图标显示相关样式 - `itemHeader`: 步骤项头部元素,包含 flex 布局、禁止换行、对齐方式等头部区域的布局样式 - `itemTitle`: 步骤项标题元素,包含颜色、字体大小、行高、文字换行、过渡动画等标题文字样式 - `itemSubtitle`: 步骤项副标题元素,包含颜色、字体权重、字体大小、行高、外边距、文字换行等副标题样式 - `itemSection`: 步骤项区域元素,包含步骤项内容区域的布局和样式 - `itemContent`: 步骤项内容元素,包含颜色、字体大小、行高、文字换行、过渡动画等内容文字样式 - `itemRail`: 步骤项连接线元素,包含边框样式、边框宽度、过渡动画等连接线的样式 ### steps:items - `root`: 根元素 - `wrapper`: 步骤项内裹元素 - `icon`: 步骤项图标元素 - `header`: 步骤项头部元素 - `title`: 步骤项标题元素 - `subtitle`: 步骤项副标题元素 - `section`: 步骤项区域元素 - `content`: 步骤项内容元素 - `rail`: 步骤项连接线元素 ### switch - `root`: 根元素,包含最小宽度、高度、行高、垂直对齐、背景色、边框、圆角、光标样式、过渡动画、用户选择等开关容器的基础样式 - `content`: 内容元素,包含块级显示、溢出隐藏、圆角、高度、内边距、过渡动画等开关内容区域的布局和样式 ### table - `root`: 根元素,包含字体大小、背景色、圆角、滚动条颜色等表格容器的基础样式 - `section`: 容器元素,包含清除浮动、最大宽度、滚动条背景等表格包装容器样式 - `header`: - `wrapper`: 头部容器元素,包含表头的布局和容器样式 - `row`: 头部行元素,包含表头行的布局和样式 - `cell`: 头部单元格元素,包含相对定位、内边距、文字换行、背景色、文字颜色、字体权重等表头单元格样式 - `title`: 标题元素,包含表格标题的样式和布局 - `body`: - `wrapper`: 主体容器元素,包含表格主体的布局和容器样式 - `row`: 主体行元素,包含数据行的悬浮效果、选中状态、展开状态等交互样式 - `cell`: 主体单元格元素,包含相对定位、内边距、文字换行等数据单元格的基础样式 - `footer`: 底部元素,包含表格底部的背景色、文字颜色等样式 - `content`: 内容元素,包含表格内容区域的样式和布局 - `pagination`: - `root`: 分页根元素,包含分页组件的基础样式和布局 - `item`: 分页单项元素,包含分页项的样式和交互效果 ### tabs - `root`: 根元素,包含标签页容器的基础样式、布局和方向控制 - `item`: Item 元素,包含相对定位、内边距、颜色、文本省略、圆角、过渡动画等标签项的样式和交互效果 - `header`: 头部元素,包含标签页头部导航的布局、背景、边框等样式 - `indicator`: 指示器元素,包含指示条的颜色、位置、尺寸、过渡动画等活跃状态指示样式 - `content`: 内容元素,包含标签页内容面板的布局、内边距等内容展示样式 - `popup`: - `root`: 弹出菜单元素,包含下拉菜单的绝对定位、层级、显示控制、最大高度、滚动等样式 ### tag - `root`: 根元素,包含行内块布局、自动高度、内边距、字体大小、行高、禁止换行、背景色、边框、圆角、透明度、过渡动画、文本对齐、相对定位等标签的基础样式 - `icon`: 图标元素,包含字体大小、颜色、光标样式、过渡动画等图标的显示样式 - `content`: 内容元素,包含文本内容的颜色、字体样式等内容区域的样式 ### tag:group - `root`: 根元素,设置标签组的容器样式和布局 - `item`: 标签项元素,设置行内块显示、高度、内边距、字体大小、行高、背景色、边框、圆角、透明度、过渡动画、可选中状态等样式 ### textArea - `root`: 根元素,设置文本域包装器的样式、边框、圆角、过渡动画和状态控制 - `textarea`: 文本域元素,设置字体、行高、内边距、颜色、背景、边框、文本输入和多行文本展示样式 - `count`: 文字计数元素,设置字符计数显示的位置、字体、颜色和数值统计样式 ### timeline - `root`: 根元素,设置时间轴容器的列表样式重置、垂直布局、点状图标、轮廓样式、交替布局等基础容器样式 - `item`: 节点元素,设置单个时间节点的相对定位、外边距、内边距、字体大小、完成状态、颜色主题、布局方向等节点基础样式 - `itemWrapper`: 节点包装元素,设置时间节点内容的包装容器样式 - `itemIcon`: 节点图标元素,设置节点头部图标的绝对定位、宽高尺寸、背景色、边框、圆角、波纹动画等图标样式 - `itemHeader`: 节点头部元素,设置包含标题和连接线的头部区域布局、对齐方式、文本方向等样式 - `itemTitle`: 节点标题元素,设置节点标题文字的字体大小、行高、颜色等文本样式 - `itemSection`: 节点区域元素,设置包含头部和内容的区域容器的Flex布局、换行、间距等布局样式 - `itemContent`: 节点内容元素,设置节点详细内容的相对定位、顶部偏移、左侧外边距、文字颜色、词汇换行等内容样式 - `itemRail`: 节点连接线元素,设置连接时间节点的轨道线条的绝对定位、顶部偏移、左侧偏移、高度、边框颜色、宽度、样式等连接线样式 ### timeline:items - `root`: 根元素 - `wrapper`: 节点内裹元素 - `icon`: 节点图标元素 - `header`: 节点头部元素 - `title`: 节点标题元素 - `section`: 节点区域元素 - `content`: 节点内容元素 - `rail`: 节点连接线元素 ### tooltip - `root`: 根元素 (包含箭头、内容元素),设置绝对定位、层级、块级显示、最大宽度、可见性、变换原点和箭头背景色 - `container`: 内容元素,设置最小宽度高度、内边距、颜色、文本对齐、背景色、圆角、阴影和边框样式 - `arrow`: 箭头元素,设置宽高、位置、颜色和边框样式 ### tour - `root`: 引导根容器,设置绝对定位、层级控制、最大宽度、可见性、箭头背景色变量、主题样式等容器样式 - `cover`: 卡片封面区域,设置文本居中对齐、内边距、图片宽度等图片展示样式 - `section`: 卡片主要内容区域,设置文本对齐、边框圆角、盒阴影、相对定位、背景色、边框、背景裁剪等卡片样式 - `footer`: 卡片底部操作区域,设置内边距、文本右对齐、边框圆角、Flex布局等底部容器样式 - `actions`: 操作按钮组容器,设置左侧自动外边距、按钮间距等按钮组布局样式 - `indicator`: 单个指示器元素,设置宽高尺寸、行内块显示、圆角、背景色、右外边距、激活状态等圆点样式 - `indicators`: 指示器组容器,设置行内块显示等指示器容器样式 - `header`: 卡片头部区域,设置内边距、宽度计算、词汇换行等头部容器样式 - `title`: 引导标题文字,设置字体粗细等标题文本样式 - `description`: 引导描述文字,设置内边距、词汇换行等描述文本样式 - `mask`: 遮罩层元素,设置固定定位、全屏覆盖、层级、指针事件、过渡动画等遮罩样式 ### transfer - `root`: 根元素,设置flex布局、穿梭框容器的基础样式和布局控制 - `section`: 区域元素,设置flex布局、宽度、高度、最小高度、边框、圆角等单侧穿梭框的容器样式 - `header`: 头部元素,设置flex布局、对齐方式、高度、内边距、颜色、背景色、下边框、圆角等头部区域的样式 - `title`: 标题元素,设置文本省略、flex占比、文本对齐、自动左边距等标题文字的布局和样式 - `body`: 内容元素,设置列表主体区域的容器样式和布局控制 - `list`: 列表元素,设置列表内容的样式、布局和滚动控制 - `item`: 列表项元素,设置相对定位、内边距、边框、悬停态、选中态、禁用态等列表项的交互样式 - `itemIcon`: 列表项图标元素,设置复选框等图标的样式和交互状态 - `itemContent`: 列表项内容元素,设置文本省略、内边距等列表项文本内容的展示样式 - `footer`: 页脚元素,设置底部操作区域的样式和布局 - `actions`: 操作元素,设置穿梭按钮组的样式、布局和交互状态 ### tree - `root`: 根元素,设置树形控件的基础样式、布局和容器控制 - `item`: 条目元素,设置树节点的基础样式、拖拽状态、角色属性、缩进、切换器、内容包装器等节点结构 - `itemTitle`: 标题元素,设置树节点标题文字的显示样式和文本内容 - `itemIcon`: 图标元素,设置树节点图标的样式、尺寸和状态显示 ### upload - `root`: 根元素容器,包含布局样式、禁用状态文字颜色、用户选择控制、鼠标样式等基础样式 - `list`: 文件列表容器,包含布局排列、过渡动画、间距控制等样式 - `item`: 文件项元素,包含内边距、背景色、边框样式、悬停效果、状态颜色、过渡动画等样式