# Ant Design 组件语义化描述 本文档包含了 Ant Design 组件库中所有组件的语义化描述信息。 > 总计 73 个组件包含语义化描述 # alert-cn Semantic Source: https://ant.design/components/alert-cn/semantic.md ## Alert ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含边框、背景色、内边距、圆角、位置布局等警告提示框的基础样式 - section（`semantic-mark-section`）: 内容元素，采用 flex 布局控制内容区域的排版和最小宽度 - icon（`semantic-mark-icon`）: 图标元素，包含图标的颜色、行高、外边距等样式，支持不同类型的状态图标 - title（`semantic-mark-title`）: 标题元素，包含标题文字的颜色、字体等样式 - description（`semantic-mark-description`）: 描述元素，包含描述文字的字体大小、行高等排版样式 - actions（`semantic-mark-actions`）: 操作组元素，包含操作按钮的布局和间距样式 - close（`semantic-mark-close`）: 关闭按钮元素，包含按钮的基础样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html ``` --- # anchor-cn Semantic Source: https://ant.design/components/anchor-cn/semantic.md ## Anchor ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含布局定位、内边距、边距、背景色等基础样式 - item（`semantic-mark-item`）: 链接项元素，包含内边距、文字颜色、悬停状态、过渡动画等样式 - itemTitle（`semantic-mark-itemTitle`）: 标题文字元素，包含字体样式、颜色变化、文本装饰、过渡效果等样式 - indicator（`semantic-mark-indicator`）: 指示器元素，包含宽度、高度、背景色、位置变化、过渡动画等样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
API
Anchor Props
Link Props
Basic demo
Static demo
``` --- # auto-complete-cn Semantic Source: https://ant.design/components/auto-complete-cn/semantic.md ## AutoComplete ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含相对定位、行内 flex 布局、光标样式、过渡动画、边框等选择器容器的基础样式 - prefix（`semantic-mark-prefix`）: 前缀元素，包含前缀内容的布局和样式 - input（`semantic-mark-input`）: 输入框元素，包含搜索输入框的样式、光标控制、字体继承等搜索相关样式，去除了边框样式 - content（`semantic-mark-content`）: 多选容器，包含已选项的布局、间距、换行相关样式 - clear（`semantic-mark-clear`）: 清除按钮元素，包含清除按钮的布局、样式和交互效果 - placeholder（`semantic-mark-placeholder`）: 占位符元素，包含占位符文本的字体样式和颜色 - popup.root（`semantic-mark-popup-root`）: 弹出菜单元素，包含弹出层的定位、层级、背景、边框、阴影等弹出容器样式 - popup.list（`semantic-mark-popup-list`）: 弹出菜单列表元素，包含选项列表的布局、滚动、最大高度等列表容器样式 - popup.listItem（`semantic-mark-popup-listItem`）: 弹出菜单条目元素，包含选项项的内边距、悬浮效果、选中状态、禁用状态等选项交互样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
prefix
Please select
aojunhao123
aojunhao123
thinkasany
meet-student
``` --- # badge-cn Ribbon Semantic Source: https://ant.design/components/badge-cn/semantic_ribbon.md ## Badge.Ribbon ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置相对定位和包装容器样式 - indicator（`semantic-mark-indicator`）: 指示器元素，设置绝对定位、内边距、背景色、圆角和缎带样式 - content（`semantic-mark-content`）: 文本元素，设置文本颜色和缎带内容显示样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
Pushes open the window
and raises the spyglass.
Hippies
``` --- # badge-cn Semantic Source: https://ant.design/components/badge-cn/semantic.md ## Badge ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含相对定位、行内块布局、适应内容宽度等基础布局样式 - indicator（`semantic-mark-indicator`）: 指示器元素，包含定位、层级、尺寸、颜色、字体、文本对齐、背景、圆角、阴影、过渡动画等完整的徽标样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html 5 ``` --- # blog -beauty-cn Semantic Source: https://ant.design/docs/blog/semantic-beauty-cn.md --- title: 语义化发现组件精致的美 date: 2025-11-22 author: meet-student,thinkasany --- 在 Ant Design v6 之前，基于开放的 Design Token 进行样式定制已经带来了非常好的开发体验，但依然存在一些难以解决的痛点。Ant Design v6 为此做了诸多改变和优化。今天，我们来聊聊语义化是如何帮助你发现组件的精致之美。 --- ## v6 之前 在过去，我们通常是怎么调整组件样式的呢？ ### 方式一 (props) - 在 `className` 和 `style` 属性上编写大量的拼接组合和逻辑判断 - 在修改组件不同区域的样式时，需要使用大量类似 `wrapClassName` 这样的 props 代码可能是这样的： ```tsx Modal MenuItem ``` ### 方式二 (ConfigProvider) 采用 Ant Design v5 的主题 Design Token 设计： ```tsx {children} ``` ### 方式三 (CSS) 除了这两种方式，你可能还写过更不推荐的 CSS 样式覆盖： ```css .wrapper-class .ant-table { border-radius: 4px; overflow: hidden; } .wrapper-class .ant-table .ant-table-thead { background-color: #f9fafc; color: #8b97b6; } ``` 以上方式都存在诸多痛点： - 可用的 `props` 参数有限，导致部分区域的样式无法更改，逻辑也不够聚合 - `Design Token` 的配置能力有限，无法根据不同的类型/变体做差异化的样式修改 - 样式覆盖的方式存在较高的心智负担和维护成本，可维护性和语义化都很差 ## v6 现在 为了避免 `Design Token` 泛滥和添加大量的 `API props`（这会导致维护成本升高），我们将这些能力聚合成了语义化设计。 - DOM 结构得到了显著地简化和优化 - 可以根据不同的 `props` 更灵活、更易维护地定制样式和主题 - 可以为特定的语义区域定义样式和类名，更友好地实现局部样式和主题的定制 ```tsx const classNamesFn: ButtonProps['classNames'] = ( info, ): GetProp => { if (info.props.type === 'primary') { return { root: 'demo-btn-root--primary' }; } return { root: 'demo-btn-root--default' }; }; const styles: ButtonProps['styles'] = { root: { borderWidth: 2, borderStyle: 'dashed' }, content: { fontStyle: 'italic' }, icon: { opacity: 0.85 }, }; return ( ); ``` ### 与 Tailwind CSS 结合 更令人兴奋的是，`classNames` 属性可以与 [Tailwind CSS](https://tailwindcss.com/) 这类原子化 CSS 框架完美结合。这为开发者带来了前所未有的自由度：你可以在享受 antd 组件预设行为和语义化结构的同时，利用 Tailwind 的功能类快速构建出任何想要的视觉风格。语义化 + Tailwind CSS，让组件定制变得极其自由。 ```tsx return ( ); ``` ## 发现组件精致的美 用户可以根据自己喜爱的配色为组件的不同状态赋予精致的设计，发挥你的想象力，让页面更加丰富多彩吧！如果你在使用过程中遇到任何问题或有更好的想法，欢迎提交反馈，让我们一起让 Ant Design 变得更好。 --- ### demos.tsx ```tsx import React from 'react'; import { Button, Drawer, Flex, Modal, Switch } from 'antd'; import BreadcrumbPreview from '../../../components/breadcrumb/demo/style-class'; import InputPreview from '../../../components/input/demo/style-class'; const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal; const { _InternalPanelDoNotUseOrYouWillBeFired: InternalDrawer } = Drawer; const SwitchNode = ( ); const ModalNode = ( } title="Custom Function Modal" styles={{ container: { borderRadius: 14, border: '1px solid #ccc', padding: 0, overflow: 'hidden' }, header: { padding: 16, margin: 0 }, body: { padding: '0 16px' }, footer: { padding: 10, backgroundColor: 'rgba(250,250,250, 0.8)' }, }} >
🌈 Following the Ant Design specification.
 ); const DrawerNode = ( } >
🌈 Following the Ant Design specification, we developed a React UI library antd, interactive user interfaces.
); const h1Style: React.CSSProperties = { fontSize: 20, lineHeight: 2, fontWeight: 'bold', }; const Demo: React.FC = () => { return (

Input

Switch

{SwitchNode}

Breadcrumb

Modal

{ModalNode}
{DrawerNode}
 ); }; export default Demo; ``` ## Design Token 和语义化的关系 在 Ant Design 的设计体系中，Design Token 定位为设计变量（Design Tokens），可以理解为设计能力中的原子原料。而语义化样式定义了样式的使用方式，它通过组合 Design Token 和组件级的私有定制，实现更自由的定制场景。由于语义化是在组件维度上进行的，因此可以更好地控制样式的作用范围。如果你想设计一套覆盖场景全面的 Ant Design 主题，Design Token 和语义化能力将是你的利器，两者搭配使用，能够自由定制更精致的主题。 --- # breadcrumb-cn Semantic Source: https://ant.design/components/breadcrumb-cn/semantic.md ## Breadcrumb ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含文字颜色、字体大小、图标尺寸等基础样式，内部使用 flex 布局的有序列表 - item（`semantic-mark-item`）: Item 元素，包含文字颜色、链接的颜色变化、悬浮效果、内边距、圆角、高度、外边距等样式 - separator（`semantic-mark-separator`）: 分隔符元素，包含分隔符的外边距和颜色样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html ``` --- # button-cn Semantic Source: https://ant.design/components/button-cn/semantic.md ## Button ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含边框样式、背景色、内边距、圆角、阴影效果、过渡动画、光标样式、文字权重、对齐方式等完整的按钮外观样式 - content（`semantic-mark-content`）: 内容元素，包装按钮文本内容，控制文本的不换行显示、居中对齐、中文字符间距优化等文本排版样式 - icon（`semantic-mark-icon`）: 图标元素，包含图标的字体大小、颜色继承、SVG 样式重置等图标显示相关样式 ### 使用案例 ```tsx ``` --- # calendar-cn Semantic Source: https://ant.design/components/calendar-cn/semantic.md ## Calendar ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含日历组件的背景色、边框、圆角等基础样式和整体布局结构 - header（`semantic-mark-header`）: 头部元素，包含年份选择器、月份选择器、模式切换器的布局和样式控制 - body（`semantic-mark-body`）: 主体元素，包含日历表格的内边距、布局控制等样式，用于容纳日历网格 - content（`semantic-mark-content`）: 内容元素，包含日历表格的宽度、高度等尺寸控制和表格样式 - item（`semantic-mark-item`）: 条目元素，包含日历单元格的背景色、边框、悬停态、选中态等交互样式 - itemContent（`semantic-mark-itemContent`）: 条目内容元素，包含日历单元格内自定义内容区域的高度、溢出等样式控制 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
2016
Nov
Su Mo Tu We Th Fr Sa
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06
07
08
09
10
``` --- # card-cn Meta Semantic Source: https://ant.design/components/card-cn/semantic_meta.md ## Card.Meta ### Semantic Parts - root（`semantic-mark-root`）: 设置元信息根元素 - section（`semantic-mark-section`）: 设置元信息内容元素 - avatar（`semantic-mark-avatar`）: 设置元信息图标 - title（`semantic-mark-title`）: 设置元信息标题 - description（`semantic-mark-description`）: 设置元信息描述 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
Card Meta title
This is the description
``` --- # card-cn Semantic Source: https://ant.design/components/card-cn/semantic.md ## Card ### Semantic Parts - root（`semantic-mark-root`）: 卡片根元素，包含位置定位、背景色、边框、圆角、阴影、内边距等卡片容器的基础样式 - header（`semantic-mark-header`）: 卡片头部区域，包含 flex 布局、最小高度、内边距、文字颜色、字体权重、字体大小、背景色、下边框、顶部圆角等样式 - body（`semantic-mark-body`）: 卡片内容区域，包含内边距、字体大小等内容展示的基础样式 - extra（`semantic-mark-extra`）: 卡片右上角的操作区域，包含额外内容的文字颜色和布局样式 - title（`semantic-mark-title`）: 卡片标题，包含行内块布局、flex 占比、文本省略等标题显示样式 - actions（`semantic-mark-actions`）: 卡片底部操作组，包含 flex 布局、列表样式重置、背景色、上边框、底部圆角等操作按钮容器样式 - cover（`semantic-mark-cover`）: 标题封面，包含封面图片的显示和布局样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
Card title
More
example
Card Meta title
This is the description
``` --- # cascader-cn Semantic Source: https://ant.design/components/cascader-cn/semantic.md ## Cascader ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含相对定位、行内 flex 布局、光标样式、过渡动画、边框等选择器容器的基础样式 - prefix（`semantic-mark-prefix`）: 前缀元素，包含前缀内容的布局和样式 - suffix（`semantic-mark-suffix`）: 后缀元素，包含后缀内容的布局和样式，如清除按钮、箭头图标等 - input（`semantic-mark-input`）: 输入框元素，包含搜索输入框的样式、光标控制、字体继承等搜索相关样式，去除了边框样式 - content（`semantic-mark-content`）: 多选容器，包含已选项的布局、间距、换行相关样式 - clear（`semantic-mark-clear`）: 清除按钮元素，包含清除按钮的布局、样式和交互效果 - item（`semantic-mark-item`）: 多选项元素，包含边框、背景、内边距、外边距样式 - itemContent（`semantic-mark-itemContent`）: 多选项内容区域，包含文字的省略样式 - itemRemove（`semantic-mark-itemRemove`）: 多选项移除按钮，包含字体相关样式 - placeholder（`semantic-mark-placeholder`）: 占位符元素，包含占位符文本的字体样式和颜色 - popup.root（`semantic-mark-popup-root`）: 弹出菜单元素，包含弹出层的定位、层级、背景、边框、阴影等弹出容器样式 - popup.list（`semantic-mark-popup-list`）: 弹出菜单列表元素，包含选项列表的布局、滚动、最大高度等列表容器样式 - popup.listItem（`semantic-mark-popup-listItem`）: 弹出菜单条目元素，包含选项项的内边距、悬浮效果、选中状态、禁用状态等选项交互样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
prefix
thinkasany
``` --- # checkbox-cn Semantic Source: https://ant.design/components/checkbox-cn/semantic.md ## Checkbox ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含行内 flex 布局、基线对齐、光标样式、重置样式等复选框容器的基础样式 - icon（`semantic-mark-icon`）: 选中框元素，包含尺寸、方向、背景色、边框、圆角、过渡动画，以及选中状态的勾选标记样式 - label（`semantic-mark-label`）: 文本元素，包含文本的内边距和与复选框的间距样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html ``` --- # collapse-cn Semantic Source: https://ant.design/components/collapse-cn/semantic.md ## Collapse ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含折叠面板的边框、圆角、背景色等容器样式，控制面板的整体布局和外观 - header（`semantic-mark-header`）: 头部元素，包含flex布局、内边距、颜色、行高、光标样式、过渡动画等面板头部的交互和样式 - title（`semantic-mark-title`）: 标题元素，包含flex自适应布局、右边距等标题文字的布局和排版样式 - body（`semantic-mark-body`）: 内容元素，包含内边距、颜色、背景色等面板内容区域的展示样式 - icon（`semantic-mark-icon`）: 图标元素，包含字体大小、过渡动画、旋转变换等展开收起箭头的样式和动效 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
This is panel header

This is panel body

``` --- # color-picker-cn Semantic Source: https://ant.design/components/color-picker-cn/semantic.md ## ColorPicker ### Semantic Parts - root（`semantic-mark-root`）: 触发器容器，包含边框样式、过渡动画、尺寸控制等样式，显示颜色块和文本内容 - body（`semantic-mark-body`）: 色块容器，包含底色、边框等样式 - content（`semantic-mark-content`）: 色块颜色元素，包含实际选择的颜色样式 - description（`semantic-mark-description`）: 描述文本内容，包含字体样式、颜色等样式 - popup.root（`semantic-mark-popup-root`）: 弹出面板根容器，包含背景色、阴影效果、色彩选择面板、滑块控制和预设颜色等样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
#1677FF
``` --- # date-picker-cn Semantic Source: https://ant.design/components/date-picker-cn/semantic.md ## DatePicker ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含相对定位、行内flex布局、内边距、边框圆角、过渡动画等日期选择器容器的基础样式 - prefix（`semantic-mark-prefix`）: 前缀元素，包含flex布局、右外边距等前缀内容的布局样式 - input（`semantic-mark-input`）: 输入框元素，包含相对定位、宽度、颜色、字体、行高、过渡动画等输入框的核心交互样式 - suffix（`semantic-mark-suffix`）: 后缀元素，包含flex布局、颜色、行高、指针事件、过渡动画等后缀内容的样式 - popup（`semantic-mark-popup`）: 弹出框元素 - popup.container（`semantic-mark-popup-container`）: 容器元素，设置背景色、内边距、圆角、阴影、边框和内容展示样式 - popup.header（`semantic-mark-popup-header`）: 弹出框头部元素，包含导航按钮、月份年份选择器等头部控制区域的布局和样式 - popup.body（`semantic-mark-popup-body`）: 弹出框主体元素，包含日期面板表格的容器布局和样式 - popup.content（`semantic-mark-popup-content`）: 弹出框内容元素，包含日期表格的宽度、边框、单元格等内容展示样式 - popup.item（`semantic-mark-popup-item`）: 弹出框单项元素，包含日期单元格的尺寸、背景色、边框圆角、悬停态、选中态等交互样式 - popup.footer（`semantic-mark-popup-footer`）: 弹出框底部元素，包含确认取消按钮、快捷选择等底部操作区域的布局样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
Su Mo Tu We Th Fr Sa
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
Su Mo Tu We Th Fr Sa
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
  • root
    根元素，包含相对定位、行内flex布局、内边距、边框圆角、过渡动画等日期选择器容器的基础样式
  • prefix
    前缀元素，包含flex布局、右外边距等前缀内容的布局样式
  • input
    输入框元素，包含相对定位、宽度、颜色、字体、行高、过渡动画等输入框的核心交互样式
  • suffix
    后缀元素，包含flex布局、颜色、行高、指针事件、过渡动画等后缀内容的样式
  • popup.root
    弹出框元素
  • popup.container
    容器元素，设置背景色、内边距、圆角、阴影、边框和内容展示样式
  • popup.header
    弹出框头部元素，包含导航按钮、月份年份选择器等头部控制区域的布局和样式
  • popup.body
    弹出框主体元素，包含日期面板表格的容器布局和样式
  • popup.content
    弹出框内容元素，包含日期表格的宽度、边框、单元格等内容展示样式
  • popup.item
    弹出框单项元素，包含日期单元格的尺寸、背景色、边框圆角、悬停态、选中态等交互样式
  • popup.footer
    弹出框底部元素，包含确认取消按钮、快捷选择等底部操作区域的布局样式
``` --- # descriptions-cn Semantic Source: https://ant.design/components/descriptions-cn/semantic.md ## Descriptions ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含描述列表容器的基础样式、重置样式、边框样式、布局方向等整体样式 - header（`semantic-mark-header`）: 头部元素，包含flex布局、对齐方式、下边距等头部区域的布局和样式控制 - title（`semantic-mark-title`）: 标题元素，包含文本省略、flex占比、颜色、字体权重、字体大小、行高等标题文字样式 - extra（`semantic-mark-extra`）: 额外内容元素，包含左边距、颜色、字体大小等额外操作区域的样式 - label（`semantic-mark-label`）: 标签元素，包含颜色、字体权重、字体大小、行高、文本对齐、冒号样式等标签文字的样式 - content（`semantic-mark-content`）: 内容元素，包含表格单元格布局、颜色、字体大小、行高、文字换行等内容展示样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
Toggle Border
``` --- # divider-cn Semantic Source: https://ant.design/components/divider-cn/semantic.md ## Divider ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含边框顶部样式、分隔线样式等分割线容器的基础样式 - content（`semantic-mark-content`）: 内容元素，包含行内块显示、内边距等分割线文本内容的样式 - rail（`semantic-mark-rail`）: 背景条元素，包含边框顶部样式等分割线连接条的样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

``` --- # drawer-cn Semantic Source: https://ant.design/components/drawer-cn/semantic.md ## Drawer ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含固定定位、层级控制、指针事件、颜色等抽屉容器的基础样式和布局控制 - mask（`semantic-mark-mask`）: 遮罩层元素，包含绝对定位、层级、背景色、指针事件等遮罩层的样式和交互控制 - section（`semantic-mark-section`）: Drawer 容器元素，包含flex布局、宽高、溢出控制、背景色、指针事件等抽屉主体的样式 - header（`semantic-mark-header`）: 头部元素，包含flex布局、对齐方式、内边距、字体大小、行高、下边框等头部区域的样式 - body（`semantic-mark-body`）: 内容元素，包含flex占比、最小尺寸、内边距、溢出滚动等内容区域的展示和布局样式 - footer（`semantic-mark-footer`）: 底部元素，包含flex收缩、内边距、上边框等底部操作区域的样式 - title（`semantic-mark-title`）: 标题元素，包含flex占比、外边距、字体权重、字体大小、行高等标题文字的样式 - extra（`semantic-mark-extra`）: 额外元素，包含flex固定布局等额外操作内容的样式控制 - dragger（`semantic-mark-dragger`）: 拖拽元素，用于调整抽屉大小的拖拽手柄，包含绝对定位、背景透明、指针事件控制、hover状态样式、拖拽状态样式等 - close（`semantic-mark-close`）: 关闭按钮元素，包含按钮的基础样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
  • root
    6.0.0
    根元素，包含固定定位、层级控制、指针事件、颜色等抽屉容器的基础样式和布局控制
  • mask
    5.13.0
    遮罩层元素，包含绝对定位、层级、背景色、指针事件等遮罩层的样式和交互控制
  • section
    6.0.0
    Drawer 容器元素，包含flex布局、宽高、溢出控制、背景色、指针事件等抽屉主体的样式
  • header
    5.13.0
    头部元素，包含flex布局、对齐方式、内边距、字体大小、行高、下边框等头部区域的样式
  • title
    6.0.0
    标题元素，包含flex占比、外边距、字体权重、字体大小、行高等标题文字的样式
  • extra
    6.0.0
    额外元素，包含flex固定布局等额外操作内容的样式控制
  • body
    5.13.0
    内容元素，包含flex占比、最小尺寸、内边距、溢出滚动等内容区域的展示和布局样式
  • footer
    5.13.0
    底部元素，包含flex收缩、内边距、上边框等底部操作区域的样式
  • dragger
    6.0.0
    拖拽元素，用于调整抽屉大小的拖拽手柄，包含绝对定位、背景透明、指针事件控制、hover状态样式、拖拽状态样式等
  • close
    6.1.0
    关闭按钮元素，包含按钮的基础样式
``` --- # dropdown-cn Semantic Source: https://ant.design/components/dropdown-cn/semantic.md ## Dropdown ### Semantic Parts - root（`semantic-mark-root`）: dropdown 的根元素，设置定位、层级和容器样式 - itemTitle（`semantic-mark-itemTitle`）: dropdown 选项的标题内容区域，设置布局和文字样式 - item（`semantic-mark-item`）: dropdown 的单个选项元素，设置选项的交互状态和背景样式 - itemContent（`semantic-mark-itemContent`）: dropdown 选项的主要内容区域，设置内容布局和链接样式 - itemIcon（`semantic-mark-itemIcon`）: dropdown 选项的图标区域，设置图标的尺寸和间距样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
Hover me
``` --- # empty-cn Semantic Source: https://ant.design/components/empty-cn/semantic.md ## Empty ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置文本对齐、字体和行高样式 - image（`semantic-mark-image`）: 图标元素，设置高度、透明度、边距和图片样式 - description（`semantic-mark-description`）: 描述元素，设置文本颜色样式 - footer（`semantic-mark-footer`）: 底部元素，设置顶部边距和操作按钮样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
No data
Customize Description
``` --- # float-button-cn Group Semantic Source: https://ant.design/components/float-button-cn/semantic_group.md ## FloatButton.Group ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置悬浮按钮组的容器样式、固定定位、层级、内边距、间距、方向模式等组合布局样式 - list（`semantic-mark-list`）: 列表元素，设置按钮组列表的Flex布局、圆角、阴影、动画过渡、垂直对齐等列表容器样式 - item（`semantic-mark-item`）: 列表项元素，设置单个悬浮按钮的样式、尺寸、形状、类型、状态、图标内容等按钮基础样式 - itemIcon（`semantic-mark-itemIcon`）: 列表项图标元素，设置悬浮按钮内图标的尺寸、颜色、对齐等图标显示样式 - itemContent（`semantic-mark-itemContent`）: 列表项内容元素，设置悬浮按钮内文字内容、徽标、描述等内容区域样式 - trigger（`semantic-mark-trigger`）: 触发元素，设置菜单模式下触发按钮的样式、形状、图标、悬停态、展开收起状态等交互样式 - triggerIcon（`semantic-mark-triggerIcon`）: 触发图标元素，设置触发按钮内图标的样式、旋转动画、切换状态等图标交互样式 - triggerContent（`semantic-mark-triggerContent`）: 触发内容元素，设置触发按钮内容区域的文字、标识、状态指示等内容样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
``` --- # float-button-cn Semantic Source: https://ant.design/components/float-button-cn/semantic.md ## FloatButton ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置悬浮按钮的基础样式、形状尺寸、类型主题、固定定位、层级、阴影、间距等容器样式 - content（`semantic-mark-content`）: 内容元素，设置按钮内文字内容的字体大小、颜色、对齐、换行等文本显示样式 - icon（`semantic-mark-icon`）: 图标元素，设置按钮内图标的尺寸、颜色、行高、对齐等图标显示样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html ``` --- # form-cn Semantic Source: https://ant.design/components/form-cn/semantic.md ## Form ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含表单项的底边距、垂直对齐、过渡动画、隐藏状态、错误警告状态等表单项容器的基础样式 - label（`semantic-mark-label`）: 标签元素，包含 flex 布局、溢出隐藏、文本不换行、文本对齐、垂直对齐，以及标签的颜色、字体大小、高度、必填标记等标签显示样式 - content（`semantic-mark-content`）: 内容元素，包含表单内容区域的布局、样式和控件容器的相关样式 - help（`semantic-mark-help`）: 帮助信息容器元素，包含帮助文案与校验信息区域的间距、过渡与展示样式 - helpItem（`semantic-mark-helpItem`）: 帮助信息单项元素，包含错误、警告与提示文案的排版样式 - extra（`semantic-mark-extra`）: 额外提示容器元素，包含补充说明文案的间距、颜色与排版样式 ### 使用案例 ```tsx
``` ### Abstract DOM Structure ```html
Use 4 to 16 characters.
Password must contain letters and numbers.
``` --- # image-cn Semantic Source: https://ant.design/components/image-cn/semantic.md ## Image ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置相对定位和行内块布局样式 - image（`semantic-mark-image`）: 图片元素，设置宽度、高度和垂直对齐样式 - cover（`semantic-mark-cover`）: 悬浮图片显示的提示元素，设置绝对定位、背景色、透明度和过渡动画样式 - popup.root（`semantic-mark-popup-root`）: 预览根元素，设置固定定位、层级和背景遮罩样式 - popup.mask（`semantic-mark-popup-mask`）: 预览遮罩元素，设置绝对定位和半透明背景样式 - popup.body（`semantic-mark-popup-body`）: 预览内容元素，设置flex布局、居中对齐和指针事件样式 - popup.footer（`semantic-mark-popup-footer`）: 预览页脚元素，设置绝对定位、居中布局和底部操作区域样式 - popup.actions（`semantic-mark-popup-actions`）: 预览操作组元素，设置flex布局、背景色、圆角和操作按钮样式 - popup.close（`semantic-mark-popup-close`）: 预览关闭按钮元素，设置按钮的基础样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
  • root
    根元素，设置相对定位和行内块布局样式
  • image
    图片元素，设置宽度、高度和垂直对齐样式
  • cover
    悬浮图片显示的提示元素，设置绝对定位、背景色、透明度和过渡动画样式
  • popup.root
    预览根元素，设置固定定位、层级和背景遮罩样式
  • popup.mask
    预览遮罩元素，设置绝对定位和半透明背景样式
  • popup.body
    预览内容元素，设置flex布局、居中对齐和指针事件样式
  • popup.footer
    预览页脚元素，设置绝对定位、居中布局和底部操作区域样式
  • popup.actions
    预览操作组元素，设置flex布局、背景色、圆角和操作按钮样式
  • popup.close
    6.4.0
    预览关闭按钮元素，设置按钮的基础样式
``` --- # input-cn Input Semantic Source: https://ant.design/components/input-cn/semantic_input.md ## Input.Input ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含相对定位、行内块布局、宽度、最小宽度、内边距、颜色、字体、行高、圆角、过渡动画等输入框容器的基础样式 - input（`semantic-mark-input`）: 输入框元素，包含输入框的核心交互样式和文本输入相关的样式 - prefix（`semantic-mark-prefix`）: 前缀的包裹元素，包含前缀内容的布局和样式 - suffix（`semantic-mark-suffix`）: 后缀的包裹元素，包含后缀内容的布局和样式 - clear（`semantic-mark-clear`）: 清除按钮元素，包含清除内容按钮的布局、显隐和交互样式 - count（`semantic-mark-count`）: 文字计数元素，包含字符计数显示的字体和颜色样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html 17 ``` --- # input-cn Otp Semantic Source: https://ant.design/components/input-cn/semantic_otp.md ## Input.Otp ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置行内flex布局、对齐方式、列间距和包装样式 - input（`semantic-mark-input`）: 输入框元素，设置文本居中、内边距和数字输入样式 - separator（`semantic-mark-separator`）: 分隔符元素，设置OTP输入框之间的分隔符显示样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
- - - - -
``` --- # input-cn Password Semantic Source: https://ant.design/components/input-cn/semantic_password.md ## Input.Password ### Semantic Parts - root（`semantic-mark-root`）: 根元素 - input（`semantic-mark-input`）: 输入框元素 - prefix（`semantic-mark-prefix`）: 前缀的包裹元素 - suffix（`semantic-mark-suffix`）: 后缀的包裹元素 - clear（`semantic-mark-clear`）: 清除按钮元素 - count（`semantic-mark-count`）: 文字计数元素 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html 17 ``` --- # input-cn Search Semantic Source: https://ant.design/components/input-cn/semantic_search.md ## Input.Search ### Semantic Parts - root（`semantic-mark-root`）: 根元素 - input（`semantic-mark-input`）: 输入框元素 - prefix（`semantic-mark-prefix`）: 前缀的包裹元素 - suffix（`semantic-mark-suffix`）: 后缀的包裹元素 - clear（`semantic-mark-clear`）: 清除按钮元素 - count（`semantic-mark-count`）: 文字计数元素 - button.root（`semantic-mark-button-root`）: 按钮根元素 - button.icon（`semantic-mark-button-icon`）: 按钮图标元素 - button.content（`semantic-mark-button-content`）: 按钮内容元素 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
17
``` --- # input-cn Textarea Semantic Source: https://ant.design/components/input-cn/semantic_textarea.md ## Input.Textarea ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置文本域包装器的样式、边框、圆角、过渡动画和状态控制 - textarea（`semantic-mark-textarea`）: 文本域元素，设置字体、行高、内边距、颜色、背景、边框、文本输入和多行文本展示样式 - clear（`semantic-mark-clear`）: 清除按钮元素，包含清除内容按钮的布局、显隐和交互样式 - count（`semantic-mark-count`）: 文字计数元素，设置字符计数显示的位置、字体、颜色和数值统计样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html 17 / 100 ``` --- # input-number-cn Semantic Source: https://ant.design/components/input-number-cn/semantic.md ## InputNumber ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置行内块布局、宽度、边框圆角和重置样式 - input（`semantic-mark-input`）: 输入框元素，设置字体、行高、文本输入和交互样式 - prefix（`semantic-mark-prefix`）: 前缀的包裹元素，设置flex布局、对齐方式和右边距样式 - suffix（`semantic-mark-suffix`）: 后缀的包裹元素，设置flex布局、边距和过渡动画样式 - action（`semantic-mark-action`）: 单个操作按钮元素，设置按钮的样式、悬浮效果和点击交互 - actions（`semantic-mark-actions`）: 操作元素，设置绝对定位、宽度、flex布局和数值调节按钮样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
￥
RMB
``` --- # layout-cn Semantic Source: https://ant.design/components/layout-cn/semantic.md ## Layout ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含 Sider 的布局、主题、宽度和折叠状态样式 - body（`semantic-mark-body`）: 内容包裹元素，包含 Sider 子内容的布局和展示样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure --- # list-cn Semantic Source: https://ant.design/components/list-cn/semantic.md ## List ### Semantic Parts - extra（`semantic-mark-extra`）: 设置额外内容 - actions（`semantic-mark-actions`）: 设置列表操作组 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
  • 156
  • 156
  • 2
``` --- # listy-cn Semantic Source: https://ant.design/components/listy-cn/semantic.md ## Listy ### Semantic Parts - root（`semantic-mark-root`）: 根元素，即滚动容器，设置字体与相对定位 - item（`semantic-mark-item`）: 条目元素，设置内间距、分割线与悬浮背景 - groupHeader（`semantic-mark-groupHeader`）: 分组标题元素，设置吸顶定位与背景色 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
Design
Olivia
Liam
Emma
Engineering
Noah
Ava
Ethan
``` --- # masonry-cn Semantic Source: https://ant.design/components/masonry-cn/semantic.md ## Masonry ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置相对定位、flex布局和瀑布流容器样式 - item（`semantic-mark-item`）: 条目元素，设置绝对定位、宽度计算、过渡动画和瀑布流项目样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
1
2
3
4
5
6
7
``` --- # mentions-cn Semantic Source: https://ant.design/components/mentions-cn/semantic.md ## Mentions ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置行内flex布局、相对定位、内边距和边框样式 - textarea（`semantic-mark-textarea`）: 文本域元素，设置字体、行高、文本输入和背景样式 - popup（`semantic-mark-popup`）: 弹出框元素，设置绝对定位、层级、背景色、圆角、阴影和下拉选项样式 - suffix（`semantic-mark-suffix`）: 后缀元素，包含后缀内容的布局和样式，如清除按钮等 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
Hi, @
``` --- # menu-cn Semantic Source: https://ant.design/components/menu-cn/semantic.md ## Menu ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含菜单容器的基础样式和布局 - item（`semantic-mark-item`）: 条目元素，包含相对定位、块级显示、外边距、空白符处理、光标样式、过渡动画等菜单项的基础交互样式 - itemContent（`semantic-mark-itemContent`）: 条目内容元素，包含菜单项内容的布局和排版样式 - itemIcon（`semantic-mark-itemIcon`）: 图标元素，包含最小宽度、字体大小、过渡动画、图标重置样式，以及与文本的间距控制 - itemTitle（`semantic-mark-itemTitle`）: 菜单标题元素(horizontal 模式不生效)，包含标题文字的样式和布局 - list（`semantic-mark-list`）: 菜单列表元素(horizontal 模式不生效)，包含菜单列表的布局和容器样式 - popup（`semantic-mark-popup`）: 弹出菜单(inline 模式不生效)，包含弹出层的定位、层级、背景等样式 - subMenu.itemTitle（`semantic-mark-subMenu-itemTitle`）: 子菜单标题元素，包含子菜单标题的样式和交互效果 - subMenu.list（`semantic-mark-subMenu-list`）: 子菜单列表元素，包含子菜单列表的布局和容器样式 - subMenu.item（`semantic-mark-subMenu-item`）: 子菜单单项元素，包含子菜单项的样式和交互效果 - subMenu.itemIcon（`semantic-mark-subMenu-itemIcon`）: 子菜单条目图标元素，包含子菜单图标的尺寸和样式 - subMenu.itemContent（`semantic-mark-subMenu-itemContent`）: 子菜单条目内容元素，包含子菜单内容的布局和排版 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
``` --- # message-cn Semantic Source: https://ant.design/components/message-cn/semantic.md ## Message ### Semantic Parts - list（`semantic-mark-list`）: 消息列表根元素，设置定位、层级、宽度、滚动区域和位置样式 - listContent（`semantic-mark-listContent`）: 消息列表内容元素，设置消息项排列、间距和高度动画样式 - root（`semantic-mark-root`）: 消息项根元素，设置背景色、圆角、阴影、内边距和动画样式 - wrapper（`semantic-mark-wrapper`）: 图标与标题的包裹元素，设置内容布局、间距和对齐样式 - icon（`semantic-mark-icon`）: 图标元素，设置字体大小、行高和状态颜色样式 - title（`semantic-mark-title`）: 标题元素，设置文本颜色、字号、行高和内容展示样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
``` --- # modal-cn Semantic Source: https://ant.design/components/modal-cn/semantic.md ## Modal ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含相对定位、顶部位置、宽度、最大宽度、外边距、底部内边距等模态框容器的基础布局样式 - mask（`semantic-mark-mask`）: 遮罩层元素，包含固定定位、层级、背景色、动画过渡等遮罩层的样式 - wrapper（`semantic-mark-wrapper`）: 包裹层元素，一般用于动画容器，包含动画和过渡效果的样式 - container（`semantic-mark-container`）: Modal 容器元素，包含相对定位、背景色、背景裁剪、边框、圆角、阴影、指针事件、内边距等模态框主体样式 - header（`semantic-mark-header`）: 头部元素，包含头部内边距、下边框等头部区域样式 - title（`semantic-mark-title`）: 标题元素，包含外边距、颜色、字体权重、字体大小、行高、文字换行等标题文字样式 - body（`semantic-mark-body`）: 内容元素，包含内容区域的背景色、内边距等内容展示样式 - footer（`semantic-mark-footer`）: 底部元素，包含底部的背景色、内边距、上边框、圆角等底部区域样式 - close（`semantic-mark-close`）: 预览关闭按钮元素，设置按钮的基础样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
``` --- # notification-cn Semantic Source: https://ant.design/components/notification-cn/semantic.md ## Notification ### Semantic Parts - list（`semantic-mark-list`）: 通知列表根元素，设置定位、层级、宽度、滚动区域和位置样式 - listContent（`semantic-mark-listContent`）: 通知列表内容元素，设置通知项排列、间距和高度动画样式 - root（`semantic-mark-root`）: 通知项根元素，设置背景色、圆角、阴影、内边距和动画样式 - wrapper（`semantic-mark-wrapper`）: 图标与内容的包裹元素，设置内容布局样式 - icon（`semantic-mark-icon`）: 图标元素，设置绝对定位、字体大小、行高和状态颜色样式 - section（`semantic-mark-section`）: 内容区域元素，包含标题和描述内容 - title（`semantic-mark-title`）: 标题元素，设置颜色、字体大小、行高和外边距样式 - description（`semantic-mark-description`）: 描述元素，设置字体大小、颜色和外边距样式 - actions（`semantic-mark-actions`）: 操作组元素，设置右浮动、上边距和操作按钮布局样式 - close（`semantic-mark-close`）: 关闭按钮元素，设置位置、尺寸和交互样式 - progress（`semantic-mark-progress`）: 进度条元素，设置自动关闭通知的进度样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
``` --- # pagination-cn Semantic Source: https://ant.design/components/pagination-cn/semantic.md ## Pagination ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置flex布局、对齐方式、换行和列表样式 - item（`semantic-mark-item`）: 页码元素，设置尺寸、内边距、边框、背景色、悬停态和激活态样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html ``` --- # popconfirm-cn Semantic Source: https://ant.design/components/popconfirm-cn/semantic.md ## Popconfirm ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置绝对定位、层级、变换原点、箭头指向和弹层容器样式 - container（`semantic-mark-container`）: 容器元素，设置背景色、内边距、圆角、阴影、边框和内容展示样式 - icon（`semantic-mark-icon`）: 图标元素，设置确认图标的尺寸、颜色和布局样式 - arrow（`semantic-mark-arrow`）: 箭头元素，设置宽高、位置、颜色和边框样式 - title（`semantic-mark-title`）: 标题元素，设置标题文本样式和间距 - content（`semantic-mark-content`）: 描述元素，设置描述文本样式和布局 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
``` --- # popover-cn Semantic Source: https://ant.design/components/popover-cn/semantic.md ## Popover ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置绝对定位、层级、变换原点、箭头指向和弹层容器样式 - container（`semantic-mark-container`）: 容器元素，设置背景色、内边距、圆角、阴影、边框和内容展示样式 - arrow（`semantic-mark-arrow`）: 箭头元素，设置宽高、位置、颜色和边框样式 - title（`semantic-mark-title`）: 标题元素，设置标题文本样式和间距 - content（`semantic-mark-content`）: 内容元素，设置内容文本样式和布局 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
``` --- # progress-cn Semantic Source: https://ant.design/components/progress-cn/semantic.md ## Progress ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置相对定位和基础容器样式 - body（`semantic-mark-body`）: 主体元素，设置进度条的布局和尺寸样式 - rail（`semantic-mark-rail`）: 导轨元素，设置背景轨道的颜色和圆角样式，steps 模式下没有该元素 - track（`semantic-mark-track`）: 轨迹元素，设置进度填充部分的颜色和过渡动画样式 - indicator（`semantic-mark-indicator`）: 指示器元素，设置百分比文本或图标的位置和字体样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
80%
``` --- # qr-code-cn Semantic Source: https://ant.design/components/qr-code-cn/semantic.md ## QrCode ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置flex布局、内边距、背景色、边框、圆角和相对定位样式 - cover（`semantic-mark-cover`）: 遮罩层元素，设置绝对定位、层级、背景色和加载状态覆盖样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
``` --- # radio-cn Semantic Source: https://ant.design/components/radio-cn/semantic.md ## Radio ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含布局样式、鼠标样式、禁用状态文字颜色等基础容器样式 - icon（`semantic-mark-icon`）: 选中框元素，包含圆角样式、过渡动画、边框样式、悬停状态、焦点状态等交互样式 - label（`semantic-mark-label`）: 文本元素，包含内边距、文字颜色、禁用状态、对齐方式等文本样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html ``` --- # result-cn Semantic Source: https://ant.design/components/result-cn/semantic.md ## Result ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含文本对齐、布局样式等基础容器样式 - title（`semantic-mark-title`）: 标题元素，包含字体大小、文字颜色、行高、对齐方式等文字样式 - subTitle（`semantic-mark-subTitle`）: 副标题元素，包含字体大小、文字颜色、行高等文字样式 - body（`semantic-mark-body`）: 内容元素，包含外边距、内边距、背景色等内容区域样式 - extra（`semantic-mark-extra`）: 操作区域元素，包含外边距、文本对齐、内部元素间距等布局样式 - icon（`semantic-mark-icon`）: 图标元素，包含外边距、文本对齐、字体大小、状态颜色等图标样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
title
subTitle
The Content of Result
``` --- # segmented-cn Semantic Source: https://ant.design/components/segmented-cn/semantic.md ## Segmented ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置行内块布局、内边距、背景色、圆角、过渡动画和容器样式 - item（`semantic-mark-item`）: 选项元素，设置相对定位、文本对齐、光标样式、过渡动画、选中态背景色和悬停态样式 - icon（`semantic-mark-icon`）: 图标元素，设置图标的尺寸、颜色和与文本的间距样式 - label（`semantic-mark-label`）: 标签内容元素，设置最小高度、行高、内边距、文本省略和内容布局样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
``` --- # select-cn Semantic Source: https://ant.design/components/select-cn/semantic.md ## Select ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含相对定位、行内 flex 布局、光标样式、过渡动画、边框等选择器容器的基础样式 - prefix（`semantic-mark-prefix`）: 前缀元素，包含前缀内容的布局和样式 - suffix（`semantic-mark-suffix`）: 后缀元素，包含后缀内容的布局和样式，如清除按钮、箭头图标等 - input（`semantic-mark-input`）: 输入框元素，包含搜索输入框的样式、光标控制、字体继承等搜索相关样式，去除了边框样式 - content（`semantic-mark-content`）: 多选容器，包含已选项的布局、间距、换行相关样式 - clear（`semantic-mark-clear`）: 清除按钮元素，包含清除按钮的布局、样式和交互效果 - item（`semantic-mark-item`）: 多选项元素，包含边框、背景、内边距、外边距样式 - itemContent（`semantic-mark-itemContent`）: 多选项内容区域，包含文字的省略样式 - itemRemove（`semantic-mark-itemRemove`）: 多选项移除按钮，包含字体相关样式 - placeholder（`semantic-mark-placeholder`）: 占位符元素，包含占位符文本的字体样式和颜色 - popup.root（`semantic-mark-popup-root`）: 弹出菜单元素，包含弹出层的定位、层级、背景、边框、阴影等弹出容器样式 - popup.list（`semantic-mark-popup-list`）: 弹出菜单列表元素，包含选项列表的布局、滚动、最大高度等列表容器样式 - popup.listItem（`semantic-mark-popup-listItem`）: 弹出菜单条目元素，包含选项项的内边距、悬浮效果、选中状态、禁用状态等选项交互样式 ### 使用案例 ```tsx
Single
prefix
aojunhao123
aojunhao123
thinkasany
aojunhao123
thinkasany
meet-student
``` --- # skeleton-cn Element Semantic Source: https://ant.design/components/skeleton-cn/semantic_element.md ## Skeleton.Element ### Semantic Parts - root（`semantic-mark-root`）: 根元素 - content（`semantic-mark-content`）: 内容元素 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
  • root
    6.0.0
    根元素
  • content
    6.0.0
    内容元素
``` --- # skeleton-cn Semantic Source: https://ant.design/components/skeleton-cn/semantic.md ## Skeleton ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含表格显示、宽度、动画效果、圆角等骨架屏容器的基础样式 - header（`semantic-mark-header`）: 头部元素，包含表格单元格、内边距、垂直对齐等头像占位区域的布局样式 - section（`semantic-mark-section`）: 区块元素，包含骨架屏内容区域的布局样式 - avatar（`semantic-mark-avatar`）: 头像元素，包含行内块显示、垂直对齐、背景色、尺寸、圆角等头像占位的样式 - title（`semantic-mark-title`）: 标题元素，包含宽度、高度、背景色、圆角等标题占位的样式 - paragraph（`semantic-mark-paragraph`）: 段落元素，包含内边距、列表项样式、背景色、圆角等段落占位的样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html

``` --- # slider-cn Semantic Source: https://ant.design/components/slider-cn/semantic.md ## Slider ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置相对定位、高度、边距、内边距、光标样式和触摸事件控制 - track（`semantic-mark-track`）: 轨道选取条元素，设置绝对定位、背景色、圆角和过渡动画样式 - tracks（`semantic-mark-tracks`）: 多段轨道容器元素，设置绝对定位和过渡动画样式 - rail（`semantic-mark-rail`）: 背景轨道元素，设置绝对定位、背景色、圆角和过渡动画样式 - handle（`semantic-mark-handle`）: 滑块控制点元素，设置绝对定位、尺寸、轮廓线、用户选择、背景色、边框阴影、圆角、光标样式和过渡动画 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
  • root
    5.23.0
    根元素，设置相对定位、高度、边距、内边距、光标样式和触摸事件控制
  • track
    5.10.0
    轨道选取条元素，设置绝对定位、背景色、圆角和过渡动画样式
  • tracks
    5.10.0
    多段轨道容器元素，设置绝对定位和过渡动画样式
  • rail
    5.10.0
    背景轨道元素，设置绝对定位、背景色、圆角和过渡动画样式
  • handle
    5.10.0
    滑块控制点元素，设置绝对定位、尺寸、轮廓线、用户选择、背景色、边框阴影、圆角、光标样式和过渡动画
``` --- # space-cn Semantic Source: https://ant.design/components/space-cn/semantic.md ## Space ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含 flex 布局、间隙设置、对齐方式、换行等间距容器的基础样式 - item（`semantic-mark-item`）: 包裹的子组件，包含间距项的布局和样式，为每个子元素提供包装用于内联对齐 - separator（`semantic-mark-separator`）: 分隔符，包含分隔元素的样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
  • root
    根元素，包含 flex 布局、间隙设置、对齐方式、换行等间距容器的基础样式
  • item
    包裹的子组件，包含间距项的布局和样式，为每个子元素提供包装用于内联对齐
  • separator
    分隔符，包含分隔元素的样式
``` --- # spin-cn Semantic Source: https://ant.design/components/spin-cn/semantic.md ## Spin ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置绝对定位、显示控制、颜色、字体大小、文本对齐、垂直对齐、透明度和过渡动画(fullscreen 为 false 时才有效) - section（`semantic-mark-section`）: 加载元素区域，设置相对定位、弹性盒子布局、对齐方式和颜色 - indicator（`semantic-mark-indicator`）: 指示器元素，设置宽度、高度、字体大小、行内块显示、过渡动画、变换原点、行高 - description（`semantic-mark-description`）: 描述元素，设置字体大小、行高 - container（`semantic-mark-container`）: 容器元素，放置被 Spin 包裹的子元素，设置透明度和过渡动画 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
``` --- # splitter-cn Semantic Source: https://ant.design/components/splitter-cn/semantic.md ## Splitter ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置flex布局、宽度高度、对齐方式和拉伸样式 - panel（`semantic-mark-panel`）: 面板元素，设置flex基础值、增长比例和面板容器样式 - dragger（`semantic-mark-dragger`）: 拖拽控制元素，设置绝对定位、用户选择、层级、居中对齐、背景色、悬停态和激活态样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
First
Second
``` --- # statistic-cn Semantic Source: https://ant.design/components/statistic-cn/semantic.md ## Statistic ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含统计数值组件的重置样式和整体容器样式 - header（`semantic-mark-header`）: 头部元素，包含下内边距和标题区域的布局样式 - title（`semantic-mark-title`）: 标题元素，包含文字颜色、字体大小等标题文字的显示样式 - content（`semantic-mark-content`）: 内容元素，包含前缀、数值、后缀的布局和对齐等内容区域样式 - value（`semantic-mark-value`）: 数值元素，包含文字颜色、字体大小、字体族等统计数值的展示样式 - prefix（`semantic-mark-prefix`）: 前缀元素，包含行内块显示、右外边距等前缀内容的布局样式 - suffix（`semantic-mark-suffix`）: 后缀元素，包含行内块显示、左外边距等后缀内容的布局样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
Active
11 .28 %
``` --- # steps-cn Items Semantic Source: https://ant.design/components/steps-cn/semantic_items.md ## Steps.Items ### Semantic Parts - root（`semantic-mark-root`）: 根元素 - wrapper（`semantic-mark-wrapper`）: 步骤项内裹元素 - icon（`semantic-mark-icon`）: 步骤项图标元素 - header（`semantic-mark-header`）: 步骤项头部元素 - title（`semantic-mark-title`）: 步骤项标题元素 - subtitle（`semantic-mark-subtitle`）: 步骤项副标题元素 - section（`semantic-mark-section`）: 步骤项区域元素 - content（`semantic-mark-content`）: 步骤项内容元素 - rail（`semantic-mark-rail`）: 步骤项连接线元素 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
Step 1
00:00
This is a content.
2
Step 2
00:01
This is a content.
3
Step 3
00:02
This is a content.
Step 1
00:00
This is a content.
2
Step 2
00:01
This is a content.
3
Step 3
00:02
This is a content.
  • root
    根元素
  • wrapper
    步骤项内裹元素
  • icon
    步骤项图标元素
  • header
    步骤项头部元素
  • title
    步骤项标题元素
  • subtitle
    步骤项副标题元素
  • section
    步骤项区域元素
  • content
    步骤项内容元素
  • rail
    步骤项连接线元素
``` --- # steps-cn Semantic Source: https://ant.design/components/steps-cn/semantic.md ## Steps ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含 flex 布局、禁止换行、对齐方式、CSS 变量等步骤条容器的基础样式 - item（`semantic-mark-item`）: 步骤项元素，包含 flex 布局、相对定位等单个步骤项的基础容器样式 - itemWrapper（`semantic-mark-itemWrapper`）: 步骤项内裹元素，包含 flex 布局、禁止换行、顶部内边距等步骤项内容的包装样式 - itemIcon（`semantic-mark-itemIcon`）: 步骤项图标元素，包含图标的尺寸、定位、字体大小等图标显示相关样式 - itemHeader（`semantic-mark-itemHeader`）: 步骤项头部元素，包含 flex 布局、禁止换行、对齐方式等头部区域的布局样式 - itemTitle（`semantic-mark-itemTitle`）: 步骤项标题元素，包含颜色、字体大小、行高、文字换行、过渡动画等标题文字样式 - itemSubtitle（`semantic-mark-itemSubtitle`）: 步骤项副标题元素，包含颜色、字体权重、字体大小、行高、外边距、文字换行等副标题样式 - itemSection（`semantic-mark-itemSection`）: 步骤项区域元素，包含步骤项内容区域的布局和样式 - itemContent（`semantic-mark-itemContent`）: 步骤项内容元素，包含颜色、字体大小、行高、文字换行、过渡动画等内容文字样式 - itemRail（`semantic-mark-itemRail`）: 步骤项连接线元素，包含边框样式、边框宽度、过渡动画等连接线的样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
Step 1
00:00
This is a content.
2
Step 2
00:01
This is a content.
3
Step 3
00:02
This is a content.
Step 1
00:00
This is a content.
2
Step 2
00:01
This is a content.
3
Step 3
00:02
This is a content.
  • root
    根元素，包含 flex 布局、禁止换行、对齐方式、CSS 变量等步骤条容器的基础样式
  • item
    步骤项元素，包含 flex 布局、相对定位等单个步骤项的基础容器样式
  • itemWrapper
    步骤项内裹元素，包含 flex 布局、禁止换行、顶部内边距等步骤项内容的包装样式
  • itemIcon
    步骤项图标元素，包含图标的尺寸、定位、字体大小等图标显示相关样式
  • itemHeader
    步骤项头部元素，包含 flex 布局、禁止换行、对齐方式等头部区域的布局样式
  • itemTitle
    步骤项标题元素，包含颜色、字体大小、行高、文字换行、过渡动画等标题文字样式
  • itemSubtitle
    步骤项副标题元素，包含颜色、字体权重、字体大小、行高、外边距、文字换行等副标题样式
  • itemSection
    步骤项区域元素，包含步骤项内容区域的布局和样式
  • itemContent
    步骤项内容元素，包含颜色、字体大小、行高、文字换行、过渡动画等内容文字样式
  • itemRail
    步骤项连接线元素，包含边框样式、边框宽度、过渡动画等连接线的样式
``` --- # switch-cn Semantic Source: https://ant.design/components/switch-cn/semantic.md ## Switch ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含最小宽度、高度、行高、垂直对齐、背景色、边框、圆角、光标样式、过渡动画、用户选择等开关容器的基础样式 - content（`semantic-mark-content`）: 内容元素，包含块级显示、溢出隐藏、圆角、高度、内边距、过渡动画等开关内容区域的布局和样式 - indicator（`semantic-mark-indicator`）: 指示器元素,包含绝对定位、宽度、高度、背景色、圆角、阴影、过渡动画等开关把手的样式和交互效果 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html ``` --- # table-cn Semantic Source: https://ant.design/components/table-cn/semantic.md ## Table ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含字体大小、背景色、圆角、滚动条颜色等表格容器的基础样式 - section（`semantic-mark-section`）: 容器元素，包含清除浮动、最大宽度、滚动条背景等表格包装容器样式 - header.wrapper（`semantic-mark-header-wrapper`）: 头部容器元素，包含表头的布局和容器样式 - header.row（`semantic-mark-header-row`）: 头部行元素，包含表头行的布局和样式 - header.cell（`semantic-mark-header-cell`）: 头部单元格元素，包含相对定位、内边距、文字换行、背景色、文字颜色、字体权重等表头单元格样式 - title（`semantic-mark-title`）: 标题元素，包含表格标题的样式和布局 - body.wrapper（`semantic-mark-body-wrapper`）: 主体容器元素，包含表格主体的布局和容器样式 - body.row（`semantic-mark-body-row`）: 主体行元素，包含数据行的悬浮效果、选中状态、展开状态等交互样式 - body.cell（`semantic-mark-body-cell`）: 主体单元格元素，包含相对定位、内边距、文字换行等数据单元格的基础样式 - footer（`semantic-mark-footer`）: 底部元素，包含表格底部的背景色、文字颜色等样式 - content（`semantic-mark-content`）: 内容元素，包含表格内容区域的样式和布局 - pagination.root（`semantic-mark-pagination-root`）: 分页根元素，包含分页组件的基础样式和布局 - pagination.item（`semantic-mark-pagination-item`）: 分页单项元素，包含分页项的样式和交互效果 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
table title
Personal Info Address
Name Age
thinkasany 24 New York No. 1 Lake Park
Jim Green 42 London No. 1 Lake Park
Joe Black 32 Sydney No. 1 Lake Park
table footer
``` --- # tabs-cn Semantic Source: https://ant.design/components/tabs-cn/semantic.md ## Tabs ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含标签页容器的基础样式、布局和方向控制 - item（`semantic-mark-item`）: Item 元素，包含相对定位、内边距、颜色、文本省略、圆角、过渡动画等标签项的样式和交互效果 - remove（`semantic-mark-remove`）: 删除按钮元素，包含可编辑标签页关闭按钮的尺寸、颜色、悬浮态和交互反馈等样式 - header（`semantic-mark-header`）: 头部元素，包含标签页头部导航的布局、背景、边框等样式 - indicator（`semantic-mark-indicator`）: 指示器元素，包含指示条的颜色、位置、尺寸、过渡动画等活跃状态指示样式 - body（`semantic-mark-body`）: 内容区域元素，包含标签页面板容器的布局、动画和尺寸控制 - content（`semantic-mark-content`）: 内容元素，包含单个标签页面板的布局、内边距等内容展示样式 - popup.root（`semantic-mark-popup-root`）: 弹出菜单元素，包含下拉菜单的绝对定位、层级、显示控制、最大高度、滚动等样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
Content of tab 1
``` --- # tag-cn Group Semantic Source: https://ant.design/components/tag-cn/semantic_group.md ## Tag.Group ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置标签组的容器样式和布局 - item（`semantic-mark-item`）: 标签项元素，设置行内块显示、高度、内边距、字体大小、行高、背景色、边框、圆角、透明度、过渡动画、可选中状态等样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
Movies Books Music Sports
``` --- # tag-cn Semantic Source: https://ant.design/components/tag-cn/semantic.md ## Tag ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含行内块布局、自动高度、内边距、字体大小、行高、禁止换行、背景色、边框、圆角、透明度、过渡动画、文本对齐、相对定位等标签的基础样式 - icon（`semantic-mark-icon`）: 图标元素，包含字体大小、颜色、光标样式、过渡动画等图标的显示样式 - content（`semantic-mark-content`）: 内容元素，包含文本内容的颜色、字体样式等内容区域的样式 - close（`semantic-mark-close`）: 关闭元素，包含关闭按钮的布局、光标样式、过渡动画等交互样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html Ant Design ``` --- # time-picker-cn Semantic Source: https://ant.design/components/time-picker-cn/semantic.md ## TimePicker ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含相对定位、行内flex布局、内边距、边框圆角、过渡动画等日期选择器容器的基础样式 - prefix（`semantic-mark-prefix`）: 前缀元素，包含flex布局、右外边距等前缀内容的布局样式 - input（`semantic-mark-input`）: 输入框元素，包含相对定位、宽度、颜色、字体、行高、过渡动画等输入框的核心交互样式 - suffix（`semantic-mark-suffix`）: 后缀元素，包含flex布局、颜色、行高、指针事件、过渡动画等后缀内容的样式 - popup（`semantic-mark-popup`）: 弹出框元素 - popup.container（`semantic-mark-popup-container`）: 容器元素，设置背景色、内边距、圆角、阴影、边框和内容展示样式 - popup.content（`semantic-mark-popup-content`）: 弹出框内容元素，包含日期表格的宽度、边框、单元格等内容展示样式 - popup.item（`semantic-mark-popup-item`）: 弹出框单项元素，包含日期单元格的尺寸、背景色、边框圆角、悬停态、选中态等交互样式 - popup.footer（`semantic-mark-popup-footer`）: 弹出框底部元素，包含确认取消按钮、快捷选择等底部操作区域的布局样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • root
    根元素，包含相对定位、行内flex布局、内边距、边框圆角、过渡动画等日期选择器容器的基础样式
  • prefix
    前缀元素，包含flex布局、右外边距等前缀内容的布局样式
  • input
    输入框元素，包含相对定位、宽度、颜色、字体、行高、过渡动画等输入框的核心交互样式
  • suffix
    后缀元素，包含flex布局、颜色、行高、指针事件、过渡动画等后缀内容的样式
  • popup.root
    弹出框元素
  • popup.container
    容器元素，设置背景色、内边距、圆角、阴影、边框和内容展示样式
  • popup.content
    弹出框内容元素，包含日期表格的宽度、边框、单元格等内容展示样式
  • popup.item
    弹出框单项元素，包含日期单元格的尺寸、背景色、边框圆角、悬停态、选中态等交互样式
  • popup.footer
    弹出框底部元素，包含确认取消按钮、快捷选择等底部操作区域的布局样式
``` --- # timeline-cn Items Semantic Source: https://ant.design/components/timeline-cn/semantic_items.md ## Timeline.Items ### Semantic Parts - root（`semantic-mark-root`）: 根元素 - wrapper（`semantic-mark-wrapper`）: 节点内裹元素 - icon（`semantic-mark-icon`）: 节点图标元素 - header（`semantic-mark-header`）: 节点头部元素 - title（`semantic-mark-title`）: 节点标题元素 - section（`semantic-mark-section`）: 节点区域元素 - content（`semantic-mark-content`）: 节点内容元素 - rail（`semantic-mark-rail`）: 节点连接线元素 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
  1. 2015-09-01 09:12:11
    Solve initial network problems
  2. 2015-09-01 11:11:11
    Technical testing
``` --- # timeline-cn Semantic Source: https://ant.design/components/timeline-cn/semantic.md ## Timeline ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置时间轴容器的列表样式重置、垂直布局、点状图标、轮廓样式、交替布局等基础容器样式 - item（`semantic-mark-item`）: 节点元素，设置单个时间节点的相对定位、外边距、内边距、字体大小、完成状态、颜色主题、布局方向等节点基础样式 - itemWrapper（`semantic-mark-itemWrapper`）: 节点包装元素，设置时间节点内容的包装容器样式 - itemIcon（`semantic-mark-itemIcon`）: 节点图标元素，设置节点头部图标的绝对定位、宽高尺寸、背景色、边框、圆角、波纹动画等图标样式 - itemHeader（`semantic-mark-itemHeader`）: 节点头部元素，设置包含标题和连接线的头部区域布局、对齐方式、文本方向等样式 - itemTitle（`semantic-mark-itemTitle`）: 节点标题元素，设置节点标题文字的字体大小、行高、颜色等文本样式 - itemSection（`semantic-mark-itemSection`）: 节点区域元素，设置包含头部和内容的区域容器的Flex布局、换行、间距等布局样式 - itemContent（`semantic-mark-itemContent`）: 节点内容元素，设置节点详细内容的相对定位、顶部偏移、左侧外边距、文字颜色、词汇换行等内容样式 - itemRail（`semantic-mark-itemRail`）: 节点连接线元素，设置连接时间节点的轨道线条的绝对定位、顶部偏移、左侧偏移、高度、边框颜色、宽度、样式等连接线样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
  1. 2015-09-01
    Create a services
  2. 2015-09-01 09:12:11
    Solve initial network problems
  3. Technical testing
  4. 2015-09-01 09:12:11
    Network problems being solved
``` --- # tooltip-cn Semantic Source: https://ant.design/components/tooltip-cn/semantic.md ## Tooltip ### Semantic Parts - root（`semantic-mark-root`）: 根元素 (包含箭头、内容元素)，设置绝对定位、层级、块级显示、最大宽度、可见性、变换原点和箭头背景色 - container（`semantic-mark-container`）: 内容元素，设置最小宽度高度、内边距、颜色、文本对齐、背景色、圆角、阴影和边框样式 - arrow（`semantic-mark-arrow`）: 箭头元素，设置宽高、位置、颜色和边框样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
``` --- # tour-cn Semantic Source: https://ant.design/components/tour-cn/semantic.md ## Tour ### Semantic Parts - root（`semantic-mark-root`）: 引导根容器，设置绝对定位、层级控制、最大宽度、可见性、箭头背景色变量、主题样式等容器样式 - cover（`semantic-mark-cover`）: 卡片封面区域，设置文本居中对齐、内边距、图片宽度等图片展示样式 - close（`semantic-mark-close`）: 关闭按钮元素，设置绝对定位、尺寸、颜色、悬浮态和交互反馈等关闭按钮样式 - section（`semantic-mark-section`）: 卡片主要内容区域，设置文本对齐、边框圆角、盒阴影、相对定位、背景色、边框、背景裁剪等卡片样式 - footer（`semantic-mark-footer`）: 卡片底部操作区域，设置内边距、文本右对齐、边框圆角、Flex布局等底部容器样式 - actions（`semantic-mark-actions`）: 操作按钮组容器，设置左侧自动外边距、按钮间距等按钮组布局样式 - indicator（`semantic-mark-indicator`）: 单个指示器元素，设置宽高尺寸、行内块显示、圆角、背景色、右外边距、激活状态等圆点样式 - indicators（`semantic-mark-indicators`）: 指示器组容器，设置行内块显示等指示器容器样式 - header（`semantic-mark-header`）: 卡片头部区域，设置内边距、宽度计算、词汇换行等头部容器样式 - title（`semantic-mark-title`）: 引导标题文字，设置字体粗细等标题文本样式 - description（`semantic-mark-description`）: 引导描述文字，设置内边距、词汇换行等描述文本样式 - mask（`semantic-mark-mask`）: 遮罩层元素，设置固定定位、全屏覆盖、层级、指针事件、过渡动画等遮罩样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
tour.png
Hello World!
Hello World?!
``` --- # transfer-cn Semantic Source: https://ant.design/components/transfer-cn/semantic.md ## Transfer ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置flex布局、穿梭框容器的基础样式和布局控制 - section（`semantic-mark-section`）: 区域元素，设置flex布局、宽度、高度、最小高度、边框、圆角等单侧穿梭框的容器样式 - source.section（`semantic-mark-source-section`）: 源区域元素，仅作用于左侧穿梭框容器样式 - target.section（`semantic-mark-target-section`）: 目标区域元素，仅作用于右侧穿梭框容器样式 - source.header（`semantic-mark-source-header`）: 源头部元素，仅作用于左侧头部区域样式 - target.header（`semantic-mark-target-header`）: 目标头部元素，仅作用于右侧头部区域样式 - source.title（`semantic-mark-source-title`）: 源标题元素，仅作用于左侧标题文本样式 - target.title（`semantic-mark-target-title`）: 目标标题元素，仅作用于右侧标题文本样式 - source.body（`semantic-mark-source-body`）: 源内容元素，仅作用于左侧列表主体区域样式 - target.body（`semantic-mark-target-body`）: 目标内容元素，仅作用于右侧列表主体区域样式 - source.list（`semantic-mark-source-list`）: 源列表元素，仅作用于左侧列表内容区域样式 - target.list（`semantic-mark-target-list`）: 目标列表元素，仅作用于右侧列表内容区域样式 - source.item（`semantic-mark-source-item`）: 源列表项元素，仅作用于左侧列表项样式 - target.item（`semantic-mark-target-item`）: 目标列表项元素，仅作用于右侧列表项样式 - source.itemIcon（`semantic-mark-source-itemIcon`）: 源列表项图标元素，仅作用于左侧图标样式 - target.itemIcon（`semantic-mark-target-itemIcon`）: 目标列表项图标元素，仅作用于右侧图标样式 - source.itemContent（`semantic-mark-source-itemContent`）: 源列表项内容元素，仅作用于左侧文本内容样式 - target.itemContent（`semantic-mark-target-itemContent`）: 目标列表项内容元素，仅作用于右侧文本内容样式 - source.footer（`semantic-mark-source-footer`）: 源页脚元素，仅作用于左侧页脚区域样式 - target.footer（`semantic-mark-target-footer`）: 目标页脚元素，仅作用于右侧页脚区域样式 - header（`semantic-mark-header`）: 头部元素，设置flex布局、对齐方式、高度、内边距、颜色、背景色、下边框、圆角等头部区域的样式 - title（`semantic-mark-title`）: 标题元素，设置文本省略、flex占比、文本对齐、自动左边距等标题文字的布局和样式 - body（`semantic-mark-body`）: 内容元素，设置列表主体区域的容器样式和布局控制 - list（`semantic-mark-list`）: 列表元素，设置列表内容的样式、布局和滚动控制 - item（`semantic-mark-item`）: 列表项元素，设置相对定位、内边距、边框、悬停态、选中态、禁用态等列表项的交互样式 - itemIcon（`semantic-mark-itemIcon`）: 列表项图标元素，设置复选框等图标的样式和交互状态 - itemContent（`semantic-mark-itemContent`）: 列表项内容元素，设置文本省略、内边距等列表项文本内容的展示样式 - footer（`semantic-mark-footer`）: 页脚元素，设置底部操作区域的样式和布局 - actions（`semantic-mark-actions`）: 操作元素，设置穿梭按钮组的样式、布局和交互状态 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
18 items Source
  • content 1
  • content 2
  • content 3
  • content 5
  • content 6
  • content 7
  • content 8
  • content 9
  • content 11
  • content 12
  • content 13
  • content 14
  • content 15
  • content 16
  • content 17
  • content 18
  • content 19
  • content 20
Custom Footer
2 items Target
  • content 4
  • content 10
Custom Footer
``` --- # tree-cn Semantic Source: https://ant.design/components/tree-cn/semantic.md ## Tree ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置树形控件的基础样式、布局和容器控制 - item（`semantic-mark-item`）: 条目元素，设置树节点的基础样式、拖拽状态、角色属性、缩进、切换器、内容包装器等节点结构 - itemTitle（`semantic-mark-itemTitle`）: 标题元素，设置树节点标题文字的显示样式和文本内容 - itemIcon（`semantic-mark-itemIcon`）: 图标元素，设置树节点图标的样式、尺寸和状态显示 - itemSwitcher（`semantic-mark-itemSwitcher`）: 展开收起切换器元素，设置树节点展开/收起按钮的样式和背景 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
``` --- # tree-select-cn Semantic Source: https://ant.design/components/tree-select-cn/semantic.md ## TreeSelect ### Semantic Parts - root（`semantic-mark-root`）: 根元素，设置树选择器的基础样式、边框、圆角容器样式 - prefix（`semantic-mark-prefix`）: 前缀元素，设置前缀内容的布局和样式 - input（`semantic-mark-input`）: 输入框元素，设置文本输入、搜索、选择值显示等输入框的核心交互样式 - suffix（`semantic-mark-suffix`）: 后缀元素，设置后缀内容、清除按钮、下拉箭头等后缀区域的样式 - content（`semantic-mark-content`）: 多选容器，包含已选项的布局、间距、换行相关样式 - item（`semantic-mark-item`）: 多选项元素，包含边框、背景、内边距、外边距样式 - itemContent（`semantic-mark-itemContent`）: 多选项内容区域，包含文字的省略样式 - itemRemove（`semantic-mark-itemRemove`）: 多选项移除按钮，包含字体相关样式 - placeholder（`semantic-mark-placeholder`）: 占位符元素，包含占位符文本的字体样式和颜色 - popup.root（`semantic-mark-popup-root`）: 弹出菜单元素，设置下拉树形选择面板的定位、层级、背景、边框、阴影等弹层样式 - popup.item（`semantic-mark-popup-item`）: 弹出菜单条目元素，设置树节点选项的样式、悬停态、选中态等交互状态 - popup.itemTitle（`semantic-mark-popup-itemTitle`）: 弹出菜单标题元素，设置树节点标题文字的显示样式 - popup.itemSwitcher（`semantic-mark-popup-itemSwitcher`）: 弹出菜单切换器元素，设置树节点展开/收起按钮的样式和背景 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
prefix
aojunhao123
contributors
``` --- # typography-cn Semantic Source: https://ant.design/components/typography-cn/semantic.md ## Typography ### Semantic Parts - root（`semantic-mark-root`）: 根元素，包含排版基础样式、布局和定位 - actions（`semantic-mark-actions`）: 操作区域元素，包含复制、编辑、展开/收起等操作按钮的布局和间距样式 - action（`semantic-mark-action`）: 单个操作按钮元素，包括复制、编辑、展开、收起按钮的样式，如内边距、圆角、颜色等 - textarea（`semantic-mark-textarea`）: 可编辑模式下的 TextArea 元素样式，用于自定义编辑输入框的类名和内联样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
Ant Design is a design language for background applications, refined by Ant UED Team. It aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development.
``` --- # upload-cn Semantic Source: https://ant.design/components/upload-cn/semantic.md ## Upload ### Semantic Parts - root（`semantic-mark-root`）: 根元素容器，包含布局样式、禁用状态文字颜色、用户选择控制、鼠标样式等基础样式 - list（`semantic-mark-list`）: 文件列表容器，包含布局排列、过渡动画、间距控制等样式 - item（`semantic-mark-item`）: 文件项元素，包含内边距、背景色、边框样式、悬停效果、状态颜色、过渡动画等样式 - trigger（`semantic-mark-trigger`）: 上传按钮容器，包含按钮样式、禁用状态、隐藏控制等样式 ### 使用案例 ```tsx ``` ### Abstract DOM Structure ```html
xxx.png
yyy.png
zzz.png
``` ---