# Ant Design Semantic Documentation This file contains aggregated semantic descriptions for all components. > Total 72 components contain semantic descriptions # alert Semantic Source: https://ant.design/components/alert/semantic.md ## Alert ### Semantic Parts - root（`semantic-mark-root`）: Root element with border, background, padding, border-radius, and positioning styles for the alert container - section（`semantic-mark-section`）: Content element with flex layout controlling content area typography and minimum width - icon（`semantic-mark-icon`）: Icon element with color, line-height, and margin styles, supporting different status icon types - title（`semantic-mark-title`）: Title element with text color and font styling for the alert title - description（`semantic-mark-description`）: Description element with font-size and line-height styles for additional content - actions（`semantic-mark-actions`）: Actions element with layout and spacing styles for action buttons - close（`semantic-mark-close`）: Close button element with basic button styling ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html ``` --- # anchor Semantic Source: https://ant.design/components/anchor/semantic.md ## Anchor ### Semantic Parts - root（`semantic-mark-root`）: Root element with layout positioning, padding, margin, background color and other basic styles - item（`semantic-mark-item`）: Link item element with padding, text color, hover states, transition animations and other styles - itemTitle（`semantic-mark-itemTitle`）: Title text element with font styles, color changes, text decoration, transition effects and other styles - indicator（`semantic-mark-indicator`）: Indicator element with width, height, background color, position changes, transition animations and other styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
API
Anchor Props
Link Props
Basic demo
Static demo
``` --- # auto-complete Semantic Source: https://ant.design/components/auto-complete/semantic.md ## AutoComplete ### Semantic Parts - root（`semantic-mark-root`）: Root element with relative positioning, inline-flex layout, cursor styles, transitions, border and other basic selector container styles - prefix（`semantic-mark-prefix`）: Prefix element with layout and styling for prefix content - input（`semantic-mark-input`）: Input element with search input styling, cursor control, font inheritance and other search-related styles. Remove border styles - content（`semantic-mark-content`）: Multiple selection container with layout, spacing, and wrapping styles for selected items - clear（`semantic-mark-clear`）: Clear button element with layout, styling and interactive effects for clear button - placeholder（`semantic-mark-placeholder`）: Placeholder element with font styles and colors for placeholder text - popup.root（`semantic-mark-popup-root`）: Popup element with popup layer positioning, z-index, background, border, box-shadow and other popup container styles - popup.list（`semantic-mark-popup-list`）: Popup list element with option list layout, scrolling, max-height and other list container styles - popup.listItem（`semantic-mark-popup-listItem`）: Popup item element with option item padding, hover effects, selected states, disabled states and other option interactive styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
prefix
Please select
aojunhao123
aojunhao123
thinkasany
meet-student
``` --- # badge Ribbon Semantic Source: https://ant.design/components/badge/semantic_ribbon.md ## Badge.Ribbon ### Semantic Parts - root（`semantic-mark-root`）: Root element, set relative positioning and wrapper container styles - indicator（`semantic-mark-indicator`）: Indicator element, set absolute positioning, padding, background color, border radius and ribbon styles - content（`semantic-mark-content`）: Content element, set text color and ribbon content display styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
Pushes open the window
and raises the spyglass.
Hippies
``` --- # badge Semantic Source: https://ant.design/components/badge/semantic.md ## Badge ### Semantic Parts - root（`semantic-mark-root`）: Root element with relative positioning, inline-block display, and fit-content width for basic layout - indicator（`semantic-mark-indicator`）: Indicator element with positioning, z-index, dimensions, colors, fonts, text alignment, background, border-radius, box-shadow, and transition animations for complete badge styling ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html 5 ``` --- # blog -beauty Semantic Source: https://ant.design/docs/blog/semantic-beauty.md --- title: Discover the Delicate Beauty of Components with Semantic Design date: 2025-11-22 author: meet-student,thinkasany --- Before Ant Design v6, the experience of customizing styles based on open tokens was already great, but there were still some pain points that were difficult to solve. Ant Design v6 made many changes and improvements to address this. Today, let’s talk about how semantic design helps you discover the delicate beauty of components. --- ## Before v6 In the past, how did we typically adjust component styles? ### Method 1 (props) - Write extensive conditional logic for combinations in `className` and `style` attributes - Use numerous props like `wrapClassName` when modifying styles of different component regions The code might look like this: ```tsx Modal MenuItem ``` ### Method 2 (ConfigProvider) Using the theme Design Token design introduced in Ant Design v5: ```tsx {children} ``` ### Method 3 (CSS) Apart from these two methods, you might also have written less recommended CSS overrides: ```css .wrapper-class .ant-table { border-radius: 4px; overflow: hidden; } .wrapper-class .ant-table .ant-table-thead { background-color: #f9fafc; color: #8b97b6; } ``` All of the above approaches have various pain points: - Limited available `props` make it impossible to modify certain regions, and logic is not well-organized - Limited `Design Token` configuration prevents differentiated styling based on different types/variants - CSS overrides introduce high cognitive load and maintenance costs, with poor maintainability and semantics ## Now in v6 To avoid token proliferation and the addition of numerous API props — which would increase maintenance costs — these elements were consolidated into a more semantic structure. - The DOM structure has been greatly simplified and refined. - Styles and themes can now be customized more flexibly and in a more maintainable way based on different props. - It’s possible to define styles or class names for specific semantic regions, making it easier to customize local styles or themes. ```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 ( ); ``` ### Combining with Tailwind CSS What's more exciting is that the `classNames` property integrates perfectly with atomic CSS frameworks like [Tailwind CSS](https://tailwindcss.com/). This provides developers with unprecedented freedom: you can enjoy the preset behavior and semantic structure of antd components while leveraging Tailwind's utility classes to quickly build any visual style you want. Semantic design + Tailwind CSS, makes component customization extremely flexible. ```tsx return ( ); ``` ## Discover the Delicate Beauty of Components Users can give components refined designs for different states based on their preferred color schemes. Let your imagination run wild and make your pages more vibrant and expressive. If you encounter any issues or have better ideas during use, feel free to share feedback — let’s make Ant Design even better together. --- ### 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; ``` ## The Relationship Between Tokens and Semantic Styling In Ant Design’s design system, tokens are positioned as design variables — the atomic materials of the design language. Semantic styles, on the other hand, define how those materials are used. They are created by combining design tokens with component-level customizations, allowing for more flexible and expressive styling scenarios. Since semantic styles operate at the component level, they provide better control over styling scope. If you aim to design a fully customized Ant Design theme, the combination of tokens and semantic styling will be your most powerful tool — together, they enable you to craft a more refined and precisely tailored theme. --- # breadcrumb Semantic Source: https://ant.design/components/breadcrumb/semantic.md ## Breadcrumb ### Semantic Parts - root（`semantic-mark-root`）: Root element with text color, font size, icon size and other basic styles, using flex layout with ordered list - item（`semantic-mark-item`）: Item element with text color, link color transitions, hover effects, padding, border-radius, height, and margin styles - separator（`semantic-mark-separator`）: Separator element with margin and color styles for the divider ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html ``` --- # button Semantic Source: https://ant.design/components/button/semantic.md ## Button ### Semantic Parts - root（`semantic-mark-root`）: Root element with comprehensive button styling including border, background, padding, border-radius, box-shadow, transitions, cursor, font-weight, alignment, and layout properties - content（`semantic-mark-content`）: Content element that wraps button text with typography styles including nowrap, text-align center, and Chinese character spacing optimization - icon（`semantic-mark-icon`）: Icon element with font-size, color inheritance, and SVG style reset for proper icon display ### Usage Example ```tsx ``` --- # calendar Semantic Source: https://ant.design/components/calendar/semantic.md ## Calendar ### Semantic Parts - root（`semantic-mark-root`）: Root element containing background, border, border-radius and overall layout structure of the calendar component - header（`semantic-mark-header`）: Header element with layout and style control for year selector, month selector and mode switcher - body（`semantic-mark-body`）: Body element with padding and layout control for the calendar table that contains the calendar grid - content（`semantic-mark-content`）: Content element with width, height and table styling control for the calendar table - item（`semantic-mark-item`）: Item element with background, border, hover state, selected state and other interactive styles for calendar cells - itemContent（`semantic-mark-itemContent`）: Item content element with height, overflow and other style control for custom content area inside calendar cells ### Usage Example ```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 Meta Semantic Source: https://ant.design/components/card/semantic_meta.md ## Card.Meta ### Semantic Parts - root（`semantic-mark-root`）: set `root` of Card.Meta - section（`semantic-mark-section`）: set `section` of Card.Meta - avatar（`semantic-mark-avatar`）: set `avatar` of Card.Meta - title（`semantic-mark-title`）: set `title` of Card.Meta - description（`semantic-mark-description`）: set `description` of Card.Meta ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
Card Meta title
This is the description
``` --- # card Semantic Source: https://ant.design/components/card/semantic.md ## Card ### Semantic Parts - root（`semantic-mark-root`）: Card root element with positioning, background, border, border-radius, box-shadow, padding and other container styles - header（`semantic-mark-header`）: Card header area with flex layout, min-height, padding, text color, font-weight, font-size, background, bottom border and top border-radius - body（`semantic-mark-body`）: Card content area with padding, font-size and other content display styles - extra（`semantic-mark-extra`）: Card extra operation area in top-right corner with text color and layout styles for additional content - title（`semantic-mark-title`）: Card title with inline-block display, flex-grow, text ellipsis and other title display styles - actions（`semantic-mark-actions`）: Card bottom action group with flex layout, list-style reset, background, top border and bottom border-radius for action buttons container - cover（`semantic-mark-cover`）: Title cover with styles for cover image display and layout ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
Card title
More
example
Card Meta title
This is the description
``` --- # cascader Semantic Source: https://ant.design/components/cascader/semantic.md ## Cascader ### Semantic Parts - root（`semantic-mark-root`）: Root element with relative positioning, inline-flex layout, cursor styles, transitions, border and other basic selector container styles - prefix（`semantic-mark-prefix`）: Prefix element with layout and styling for prefix content - suffix（`semantic-mark-suffix`）: Suffix element with layout and styling for suffix content like clear button, arrow icon, etc. - input（`semantic-mark-input`）: Input element with search input styling, cursor control, font inheritance and other search-related styles. Remove border styles - content（`semantic-mark-content`）: Multiple selection container with layout, spacing, and wrapping styles for selected items - clear（`semantic-mark-clear`）: Clear button element with layout, styling and interactive effects for clear button - item（`semantic-mark-item`）: Multiple selection item element with border, background, padding, and margin styles - itemContent（`semantic-mark-itemContent`）: Multiple selection item content area with text ellipsis styles - itemRemove（`semantic-mark-itemRemove`）: Multiple selection item remove button with font-related styles - placeholder（`semantic-mark-placeholder`）: Placeholder element with font styles and colors for placeholder text - popup.root（`semantic-mark-popup-root`）: Popup element with popup layer positioning, z-index, background, border, box-shadow and other popup container styles - popup.list（`semantic-mark-popup-list`）: Popup list element with option list layout, scrolling, max-height and other list container styles - popup.listItem（`semantic-mark-popup-listItem`）: Popup item element with option item padding, hover effects, selected states, disabled states and other option interactive styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
prefix
thinkasany
``` --- # checkbox Semantic Source: https://ant.design/components/checkbox/semantic.md ## Checkbox ### Semantic Parts - root（`semantic-mark-root`）: Root element with inline-flex layout, baseline alignment, cursor style, reset styles and other basic checkbox container styles - icon（`semantic-mark-icon`）: Checkbox icon element with size, direction, background, border, border-radius, transitions, and checked state checkmark styles - label（`semantic-mark-label`）: Label text element with padding and spacing styles relative to the checkbox ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html ``` --- # collapse Semantic Source: https://ant.design/components/collapse/semantic.md ## Collapse ### Semantic Parts - root（`semantic-mark-root`）: Root element with border, border-radius, background color and container styles that control the overall layout and appearance of collapse panels - header（`semantic-mark-header`）: Header element with flex layout, padding, color, line-height, cursor style, transition animations and other interactive styles for panel headers - title（`semantic-mark-title`）: Title element with flex auto layout and margin styles for title text layout and typography - body（`semantic-mark-body`）: Body element with padding, color, background color and other styles for panel content area display - icon（`semantic-mark-icon`）: Icon element with font size, transition animations, rotation transforms and other styles and animations for expand/collapse arrows ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
This is panel header

This is panel body

``` --- # color-picker Semantic Source: https://ant.design/components/color-picker/semantic.md ## ColorPicker ### Semantic Parts - root（`semantic-mark-root`）: Trigger container with border styles, transition animations, size controls, displaying color block and text content - body（`semantic-mark-body`）: Color block container with background color, border styles - content（`semantic-mark-content`）: Color block element with actual selected color styles - description（`semantic-mark-description`）: Description text content with font styles and color - popup.root（`semantic-mark-popup-root`）: Popup panel root container with background color, shadow effects, color selection panel, slider controls and preset colors ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
#1677FF
``` --- # date-picker Semantic Source: https://ant.design/components/date-picker/semantic.md ## DatePicker ### Semantic Parts - root（`semantic-mark-root`）: Root element with relative positioning, inline-flex layout, padding, border-radius, transition animations and other basic styles for date picker container - prefix（`semantic-mark-prefix`）: Prefix element with flex layout and margin styles for prefix content layout - input（`semantic-mark-input`）: Input element with relative positioning, width, color, font, line-height, transition animations and other core interactive styles for input field - suffix（`semantic-mark-suffix`）: Suffix element with flex layout, color, line-height, pointer events, transition animations and other styles for suffix content - popup（`semantic-mark-popup`）: Popup element - popup.container（`semantic-mark-popup-container`）: Container element, set background color, padding, border radius, shadow, border and content display styles - popup.header（`semantic-mark-popup-header`）: Popup header element with navigation buttons, month/year selectors and other header control area layout and styles - popup.body（`semantic-mark-popup-body`）: Popup body element with container layout and styles for date panel table - popup.content（`semantic-mark-popup-content`）: Popup content element with width, border, cell and other content display styles for date table - popup.item（`semantic-mark-popup-item`）: Popup item element with size, background, border-radius, hover state, selected state and other interactive styles for date cells - popup.footer（`semantic-mark-popup-footer`）: Popup footer element with layout styles for bottom operation area including confirm/cancel buttons and shortcuts ### Usage Example ```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 Semantic Source: https://ant.design/components/descriptions/semantic.md ## Descriptions ### Semantic Parts - root（`semantic-mark-root`）: Root element with basic styles, reset styles, border styles, layout direction and other overall styles for description list container - header（`semantic-mark-header`）: Header element with flex layout, alignment, bottom margin and other layout and style controls for header area - title（`semantic-mark-title`）: Title element with text ellipsis, flex ratio, color, font weight, font size, line height and other title text styles - extra（`semantic-mark-extra`）: Extra content element with left margin, color, font size and other styles for additional operation area - label（`semantic-mark-label`）: Label element with color, font weight, font size, line height, text align, colon styles and other label text styles - content（`semantic-mark-content`）: Content element with table cell layout, color, font size, line height, word break and other content display styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
Toggle Border
``` --- # divider Semantic Source: https://ant.design/components/divider/semantic.md ## Divider ### Semantic Parts - root（`semantic-mark-root`）: Root element with border-top style, divider styling and other basic divider container styles - content（`semantic-mark-content`）: Content element with inline-block display, padding and other divider text content styles - rail（`semantic-mark-rail`）: Background rail element with border-top style and other divider connection line styles ### Usage Example ```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 Semantic Source: https://ant.design/components/drawer/semantic.md ## Drawer ### Semantic Parts - root（`semantic-mark-root`）: Root element with fixed positioning, z-index control, pointer events, color and other basic styles and layout control for drawer container - mask（`semantic-mark-mask`）: Mask element with absolute positioning, z-index, background color, pointer events and other mask layer styles and interaction controls - section（`semantic-mark-section`）: Drawer container element with flex layout, width/height, overflow control, background color, pointer events and other drawer body styles - header（`semantic-mark-header`）: Header element with flex layout, alignment, padding, font size, line height, bottom border and other header area styles - body（`semantic-mark-body`）: Body element with flex ratio, minimum size, padding, overflow scroll and other content area display and layout styles - footer（`semantic-mark-footer`）: Footer element with flex shrink, padding, top border and other bottom operation area styles - title（`semantic-mark-title`）: Title element with flex ratio, margin, font weight, font size, line height and other title text styles - extra（`semantic-mark-extra`）: Extra element with flex fixed layout and other additional operation content style controls - dragger（`semantic-mark-dragger`）: Dragger element used to resize the drawer, with absolute positioning, transparent background, pointer events control, hover state styles, and dragging state styles - close（`semantic-mark-close`）: Close button element with basic button styling ### Usage Example ```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 Semantic Source: https://ant.design/components/dropdown/semantic.md ## Dropdown ### Semantic Parts - root（`semantic-mark-root`）: Root element of dropdown, sets positioning, z-index and container styles - itemTitle（`semantic-mark-itemTitle`）: Title content area of dropdown option, sets layout and text styles - item（`semantic-mark-item`）: Individual dropdown option element, sets interaction states and background styles - itemContent（`semantic-mark-itemContent`）: Main content area of dropdown option, sets content layout and link styles - itemIcon（`semantic-mark-itemIcon`）: Icon area of dropdown option, sets icon size and spacing styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
Hover me
``` --- # empty Semantic Source: https://ant.design/components/empty/semantic.md ## Empty ### Semantic Parts - root（`semantic-mark-root`）: Root element, sets text alignment, font and line height styles - image（`semantic-mark-image`）: Image element, sets height, opacity, margin and image styles - description（`semantic-mark-description`）: Description element, sets text color styles - footer（`semantic-mark-footer`）: Footer element, sets top margin and action button styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
No data
Customize Description
``` --- # float-button Group Semantic Source: https://ant.design/components/float-button/semantic_group.md ## FloatButton.Group ### Semantic Parts - root（`semantic-mark-root`）: Root element with float button group container styles, fixed positioning, z-index, padding, gap, direction mode and other combined layout styles - list（`semantic-mark-list`）: List element with button group list flex layout, border radius, shadow, animation transition, vertical alignment and other list container styles - item（`semantic-mark-item`）: Item element with individual float button styles, size, shape, type, state, icon content and other button base styles - itemIcon（`semantic-mark-itemIcon`）: Item icon element with float button icon size, color, alignment and other icon display styles - itemContent（`semantic-mark-itemContent`）: Item content element with float button text content, badge, description and other content area styles - trigger（`semantic-mark-trigger`）: Trigger element with menu mode trigger button styles, shape, icon, hover state, expand/collapse state and other interaction styles - triggerIcon（`semantic-mark-triggerIcon`）: Trigger icon element with trigger button icon styles, rotation animation, toggle state and other icon interaction styles - triggerContent（`semantic-mark-triggerContent`）: Trigger content element with trigger button content area text, identifier, state indicator and other content styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
``` --- # float-button Semantic Source: https://ant.design/components/float-button/semantic.md ## FloatButton ### Semantic Parts - root（`semantic-mark-root`）: Root element with float button base styles, shape size, type theme, fixed positioning, z-index, shadow, spacing and other container styles - content（`semantic-mark-content`）: Content element with button text content font size, color, alignment, line wrap and other text display styles - icon（`semantic-mark-icon`）: Icon element with button icon size, color, line height, alignment and other icon display styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html ``` --- # form Semantic Source: https://ant.design/components/form/semantic.md ## Form ### Semantic Parts - root（`semantic-mark-root`）: Root element with form item margin-bottom, vertical-align, transitions, hidden states, error/warning states and other basic form item container styles - label（`semantic-mark-label`）: Label element with flex layout, overflow hidden, whitespace nowrap, text alignment, vertical alignment, plus label color, font size, height, required marks and other label display styles - content（`semantic-mark-content`）: Content element with form content area layout, styling and control container related styles - help（`semantic-mark-help`）: Help container element with spacing, motion, and presentation styles for help and validation areas - helpItem（`semantic-mark-helpItem`）: Single help message item with typography styles for prompt, error, and warning text - extra（`semantic-mark-extra`）: Extra prompt container element with spacing, color, and typography styles for supplementary text ### Usage Example ```tsx
``` ### Abstract DOM Structure ```html
Use 4 to 16 characters.
Password must contain letters and numbers.
``` --- # image Semantic Source: https://ant.design/components/image/semantic.md ## Image ### Semantic Parts - root（`semantic-mark-root`）: Root element, sets relative positioning and inline-block layout styles - image（`semantic-mark-image`）: Image element, sets width, height and vertical alignment styles - cover（`semantic-mark-cover`）: Image hover display prompt element, sets absolute positioning, background color, opacity and transition animation styles - popup.root（`semantic-mark-popup-root`）: Preview root element, sets fixed positioning, z-index and background mask styles - popup.mask（`semantic-mark-popup-mask`）: Preview mask element, sets absolute positioning and semi-transparent background styles - popup.body（`semantic-mark-popup-body`）: Preview body element, sets flex layout, center alignment and pointer event styles - popup.footer（`semantic-mark-popup-footer`）: Preview footer element, sets absolute positioning, center layout and bottom operation area styles - popup.actions（`semantic-mark-popup-actions`）: Preview actions group element, sets flex layout, background color, border radius and action button styles - popup.close（`semantic-mark-popup-close`）: Preview close button element, sets basic button styles ### Usage Example ```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 Input Semantic Source: https://ant.design/components/input/semantic_input.md ## Input.Input ### Semantic Parts - root（`semantic-mark-root`）: Root element with relative positioning, inline-block display, width, min-width, padding, colors, fonts, line-height, border-radius, transitions and other input container basic styles - input（`semantic-mark-input`）: Input element with core interactive styles and text input related styling - prefix（`semantic-mark-prefix`）: Prefix wrapper element with layout and styling for prefix content - suffix（`semantic-mark-suffix`）: Suffix wrapper element with layout and styling for suffix content - clear（`semantic-mark-clear`）: Clear button element with layout, visibility, and interaction styles for clearing content - count（`semantic-mark-count`）: Character count element with font and color styles for count display ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html 17 ``` --- # input Otp Semantic Source: https://ant.design/components/input/semantic_otp.md ## Input.Otp ### Semantic Parts - root（`semantic-mark-root`）: Root element, set inline flex layout, alignment, column gap and wrapper styles - input（`semantic-mark-input`）: Input element, set text center, padding and number input styles - separator（`semantic-mark-separator`）: Separator element, set separator display styles between OTP input boxes ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
- - - - -
``` --- # input Password Semantic Source: https://ant.design/components/input/semantic_password.md ## Input.Password ### Semantic Parts - root（`semantic-mark-root`）: root element - input（`semantic-mark-input`）: input element - prefix（`semantic-mark-prefix`）: prefix element - suffix（`semantic-mark-suffix`）: suffix element - clear（`semantic-mark-clear`）: clear button element - count（`semantic-mark-count`）: count element ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html 17 ``` --- # input Search Semantic Source: https://ant.design/components/input/semantic_search.md ## Input.Search ### Semantic Parts - root（`semantic-mark-root`）: root element - input（`semantic-mark-input`）: input element - prefix（`semantic-mark-prefix`）: prefix element - suffix（`semantic-mark-suffix`）: suffix element - clear（`semantic-mark-clear`）: clear button element - count（`semantic-mark-count`）: count element - button.root（`semantic-mark-button-root`）: button root element - button.icon（`semantic-mark-button-icon`）: button icon element - button.content（`semantic-mark-button-content`）: button content element ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
17
``` --- # input Textarea Semantic Source: https://ant.design/components/input/semantic_textarea.md ## Input.Textarea ### Semantic Parts - root（`semantic-mark-root`）: Root element with textarea wrapper styles, border, border radius, transition animation and state control - textarea（`semantic-mark-textarea`）: Textarea element with font, line height, padding, color, background, border, text input and multi-line text display styles - clear（`semantic-mark-clear`）: Clear button element with layout, visibility, and interaction styles for clearing content - count（`semantic-mark-count`）: Count element with character count display position, font, color and numeric statistics styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html 17 / 100 ``` --- # input-number Semantic Source: https://ant.design/components/input-number/semantic.md ## InputNumber ### Semantic Parts - root（`semantic-mark-root`）: Root element, sets inline-block layout, width, border radius and reset styles - input（`semantic-mark-input`）: Input element, sets font, line height, text input and interaction styles - prefix（`semantic-mark-prefix`）: Prefix wrapper element, sets flex layout, alignment and right margin styles - suffix（`semantic-mark-suffix`）: Suffix wrapper element, sets flex layout, margin and transition animation styles - action（`semantic-mark-action`）: Single action button element, sets button styling, hover effects and click interactions - actions（`semantic-mark-actions`）: Actions element, sets absolute positioning, width, flex layout and number adjustment button styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
￥
RMB
``` --- # layout Semantic Source: https://ant.design/components/layout/semantic.md ## Layout ### Semantic Parts - root（`semantic-mark-root`）: Root element with Sider layout, theme, width and collapsed state styles - body（`semantic-mark-body`）: Body element that wraps Sider children layout and display styles ### Usage Example ```tsx ``` ### Abstract DOM Structure --- # list Semantic Source: https://ant.design/components/list/semantic.md ## List ### Semantic Parts - extra（`semantic-mark-extra`）: set `extra` of List.Item - actions（`semantic-mark-actions`）: set `actions` of List.Item ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
  • 156
  • 156
  • 2
``` --- # masonry Semantic Source: https://ant.design/components/masonry/semantic.md ## Masonry ### Semantic Parts - root（`semantic-mark-root`）: Root element, sets relative positioning, flex layout and masonry container styles - item（`semantic-mark-item`）: Item element, sets absolute positioning, width calculation, transition animation and masonry item styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
1
2
3
4
5
6
7
``` --- # mentions Semantic Source: https://ant.design/components/mentions/semantic.md ## Mentions ### Semantic Parts - root（`semantic-mark-root`）: Root element, set inline flex layout, relative positioning, padding and border styles - textarea（`semantic-mark-textarea`）: Textarea element, set font, line height, text input and background styles - popup（`semantic-mark-popup`）: Popup element, set absolute positioning, z-index, background color, border radius, shadow and dropdown options styles - suffix（`semantic-mark-suffix`）: Suffix element with layout and styling for suffix content like clear button, etc. ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
Hi, @
``` --- # menu Semantic Source: https://ant.design/components/menu/semantic.md ## Menu ### Semantic Parts - root（`semantic-mark-root`）: Root element with basic menu container styles and layout - item（`semantic-mark-item`）: Item element with relative positioning, block display, margins, whitespace handling, cursor styles, transitions and other basic interactive styles for menu items - itemContent（`semantic-mark-itemContent`）: Item content element with layout and typography styles for menu item content - itemIcon（`semantic-mark-itemIcon`）: Icon element with min-width, font-size, transitions, icon reset styles, and spacing control with text - itemTitle（`semantic-mark-itemTitle`）: Item title element (no effect in horizontal mode) with title text styles and layout - list（`semantic-mark-list`）: Menu list element (no effect in horizontal mode) with menu list layout and container styles - popup（`semantic-mark-popup`）: Popup menu element (no effect in inline mode) with popup layer positioning, z-index, background and other styles - subMenu.itemTitle（`semantic-mark-subMenu-itemTitle`）: Submenu title element with submenu title styles and interactive effects - subMenu.list（`semantic-mark-subMenu-list`）: Submenu list element with submenu list layout and container styles - subMenu.item（`semantic-mark-subMenu-item`）: Submenu item element with submenu item styles and interactive effects - subMenu.itemIcon（`semantic-mark-subMenu-itemIcon`）: Submenu item icon element with submenu icon size and styles - subMenu.itemContent（`semantic-mark-subMenu-itemContent`）: Submenu item content element with submenu content layout and typography ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
``` --- # message Semantic Source: https://ant.design/components/message/semantic.md ## Message ### Semantic Parts - list（`semantic-mark-list`）: Message list root element, set positioning, z-index, width, scroll area and placement styles - listContent（`semantic-mark-listContent`）: Message list content element, set notice layout, gap and height transition styles - root（`semantic-mark-root`）: Message item root element, set background color, border radius, shadow, padding and animation styles - wrapper（`semantic-mark-wrapper`）: Wrapper element for icon and title, set content layout, gap and alignment styles - icon（`semantic-mark-icon`）: Icon element, set font size, line height and status color styles - title（`semantic-mark-title`）: Title element, set text color, font size, line height and content display styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
``` --- # modal Semantic Source: https://ant.design/components/modal/semantic.md ## Modal ### Semantic Parts - root（`semantic-mark-root`）: Root element with relative positioning, top position, width, max-width, margins, bottom padding and other basic layout styles for modal container - mask（`semantic-mark-mask`）: Mask element with fixed positioning, z-index, background color, animation transitions and other mask layer styles - wrapper（`semantic-mark-wrapper`）: Wrapper element used for motion container with animation and transition effect styles - container（`semantic-mark-container`）: Modal container element with relative positioning, background, background-clip, border, border-radius, box-shadow, pointer-events, padding and other modal body styles - header（`semantic-mark-header`）: Header element with padding, bottom border and other header area styles - title（`semantic-mark-title`）: Title element with margin, color, font-weight, font-size, line-height, word-wrap and other title text styles - body（`semantic-mark-body`）: Body element with content area background color, padding and other content display styles - footer（`semantic-mark-footer`）: Footer element with footer background color, padding, top border, border-radius and other footer area styles - close（`semantic-mark-close`）: Preview close button element, sets basic button styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
``` --- # notification Semantic Source: https://ant.design/components/notification/semantic.md ## Notification ### Semantic Parts - list（`semantic-mark-list`）: Notification list root element, set positioning, z-index, width, scroll area and placement styles - listContent（`semantic-mark-listContent`）: Notification list content element, set notice layout, gap and height transition styles - root（`semantic-mark-root`）: Notice root element, set background color, border radius, shadow, padding and animation styles - wrapper（`semantic-mark-wrapper`）: Wrapper element for icon and content with content layout styles - icon（`semantic-mark-icon`）: Icon element, set absolute positioning, font size, line height and status color styles - section（`semantic-mark-section`）: Content section element that contains title and description - title（`semantic-mark-title`）: Title element, set color, font size, line height and margin styles - description（`semantic-mark-description`）: Description element, set font size, color and margin styles - actions（`semantic-mark-actions`）: Actions element, set float right, top margin and action button layout styles - close（`semantic-mark-close`）: Close button element, set position, size and interaction styles - progress（`semantic-mark-progress`）: Progress element, set progress styles for auto-closing notifications ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
``` --- # pagination Semantic Source: https://ant.design/components/pagination/semantic.md ## Pagination ### Semantic Parts - root（`semantic-mark-root`）: Root element, set flex layout, alignment, flex wrap and list styles - item（`semantic-mark-item`）: Item element, set size, padding, border, background color, hover state and active state styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html ``` --- # popconfirm Semantic Source: https://ant.design/components/popconfirm/semantic.md ## Popconfirm ### Semantic Parts - root（`semantic-mark-root`）: Root element, set absolute positioning, z-index, transform origin, arrow direction and popover container styles - container（`semantic-mark-container`）: Container element, set background color, padding, border radius, shadow, border and content display styles - icon（`semantic-mark-icon`）: Icon element, set the confirmation icon size, color and layout styles - arrow（`semantic-mark-arrow`）: Arrow element with width, height, position, color and border styles - title（`semantic-mark-title`）: Title element, set title text styles and spacing - content（`semantic-mark-content`）: Description element, set content text styles and layout ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
``` --- # popover Semantic Source: https://ant.design/components/popover/semantic.md ## Popover ### Semantic Parts - root（`semantic-mark-root`）: Root element, set absolute positioning, z-index, transform origin, arrow direction and popover container styles - container（`semantic-mark-container`）: Container element, set background color, padding, border radius, shadow, border and content display styles - arrow（`semantic-mark-arrow`）: Arrow element with width, height, position, color and border styles - title（`semantic-mark-title`）: Title element, set title text styles and spacing - content（`semantic-mark-content`）: Content element, set content text styles and layout ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
``` --- # progress Semantic Source: https://ant.design/components/progress/semantic.md ## Progress ### Semantic Parts - root（`semantic-mark-root`）: Root element, set relative positioning and basic container styles - body（`semantic-mark-body`）: Body element, set progress bar layout and size styles - rail（`semantic-mark-rail`）: Rail element, set background track color and border radius styles. Not exist in steps mode - track（`semantic-mark-track`）: Track element, set progress fill color and transition animation styles - indicator（`semantic-mark-indicator`）: Indicator element, set percentage text or icon position and font styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
80%
``` --- # qr-code Semantic Source: https://ant.design/components/qr-code/semantic.md ## QrCode ### Semantic Parts - root（`semantic-mark-root`）: Root element, set flex layout, padding, background color, border, border radius and relative positioning styles - cover（`semantic-mark-cover`）: Cover element, set absolute positioning, z-index, background color and loading state overlay styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
``` --- # radio Semantic Source: https://ant.design/components/radio/semantic.md ## Radio ### Semantic Parts - root（`semantic-mark-root`）: Root element with layout styles, cursor styles, disabled text color and other basic container styles - icon（`semantic-mark-icon`）: Icon element with border radius, transition animations, border styles, hover states, focus states and other interactive styles - label（`semantic-mark-label`）: Label element with padding, text color, disabled states, alignment and other text styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html ``` --- # result Semantic Source: https://ant.design/components/result/semantic.md ## Result ### Semantic Parts - root（`semantic-mark-root`）: Root element with text alignment, layout styles and other basic container styles - title（`semantic-mark-title`）: Title element with font size, text color, line height, text alignment and other text styles - subTitle（`semantic-mark-subTitle`）: Subtitle element with font size, text color, line height and other text styles - body（`semantic-mark-body`）: Content element with margin, padding, background color and other content area styles - extra（`semantic-mark-extra`）: Action area element with margin, text alignment, inner element spacing and other layout styles - icon（`semantic-mark-icon`）: Icon element with margin, text alignment, font size, status colors and other icon styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
title
subTitle
The Content of Result
``` --- # segmented Semantic Source: https://ant.design/components/segmented/semantic.md ## Segmented ### Semantic Parts - root（`semantic-mark-root`）: Root element with inline-block layout, padding, background, border radius, transition and container styles - item（`semantic-mark-item`）: Option element with relative positioning, text alignment, cursor style, transition, selected state background and hover styles - icon（`semantic-mark-icon`）: Icon element with icon size, color and text spacing styles - label（`semantic-mark-label`）: Label content element with min height, line height, padding, text ellipsis and content layout styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
``` --- # select Semantic Source: https://ant.design/components/select/semantic.md ## Select ### Semantic Parts - root（`semantic-mark-root`）: Root element with relative positioning, inline-flex layout, cursor styles, transitions, border and other basic selector container styles - prefix（`semantic-mark-prefix`）: Prefix element with layout and styling for prefix content - suffix（`semantic-mark-suffix`）: Suffix element with layout and styling for suffix content like clear button, arrow icon, etc. - input（`semantic-mark-input`）: Input element with search input styling, cursor control, font inheritance and other search-related styles. Remove border styles - content（`semantic-mark-content`）: Multiple selection container with layout, spacing, and wrapping styles for selected items - clear（`semantic-mark-clear`）: Clear button element with layout, styling and interactive effects for clear button - item（`semantic-mark-item`）: Multiple selection item element with border, background, padding, and margin styles - itemContent（`semantic-mark-itemContent`）: Multiple selection item content area with text ellipsis styles - itemRemove（`semantic-mark-itemRemove`）: Multiple selection item remove button with font-related styles - placeholder（`semantic-mark-placeholder`）: Placeholder element with font styles and colors for placeholder text - popup.root（`semantic-mark-popup-root`）: Popup element with popup layer positioning, z-index, background, border, box-shadow and other popup container styles - popup.list（`semantic-mark-popup-list`）: Popup list element with option list layout, scrolling, max-height and other list container styles - popup.listItem（`semantic-mark-popup-listItem`）: Popup item element with option item padding, hover effects, selected states, disabled states and other option interactive styles ### Usage Example ```tsx
Single
prefix
aojunhao123
aojunhao123
thinkasany
aojunhao123
thinkasany
meet-student
``` --- # skeleton Element Semantic Source: https://ant.design/components/skeleton/semantic_element.md ## Skeleton.Element ### Semantic Parts - root（`semantic-mark-root`）: Root element - content（`semantic-mark-content`）: Content element ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
  • root
    6.0.0
    根元素
  • content
    6.0.0
    内容元素
``` --- # skeleton Semantic Source: https://ant.design/components/skeleton/semantic.md ## Skeleton ### Semantic Parts - root（`semantic-mark-root`）: Root element with table display, width, animation effects, border radius and other skeleton container basic styles - header（`semantic-mark-header`）: Header element with table cell, padding, vertical alignment and other avatar placeholder area layout styles - section（`semantic-mark-section`）: Section element with skeleton content area layout styles - avatar（`semantic-mark-avatar`）: Avatar element with inline-block display, vertical alignment, background color, size, border radius and other avatar placeholder styles - title（`semantic-mark-title`）: Title element with width, height, background color, border radius and other title placeholder styles - paragraph（`semantic-mark-paragraph`）: Paragraph element with padding, list item styles, background color, border radius and other paragraph placeholder styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html

``` --- # slider Semantic Source: https://ant.design/components/slider/semantic.md ## Slider ### Semantic Parts - root（`semantic-mark-root`）: Root element with relative positioning, height, margin, padding, cursor style and touch action control - track（`semantic-mark-track`）: Track selection bar element with absolute positioning, background color, border radius and transition animation styles - tracks（`semantic-mark-tracks`）: Multi-segment track container element with absolute positioning and transition animation styles - rail（`semantic-mark-rail`）: Background rail element with absolute positioning, background color, border radius and transition animation styles - handle（`semantic-mark-handle`）: Slider handle control element with absolute positioning, size, outline, user selection, background color, border shadow, border radius, cursor style and transition animation ### Usage Example ```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 Semantic Source: https://ant.design/components/space/semantic.md ## Space ### Semantic Parts - root（`semantic-mark-root`）: Root element with flex layout, gap settings, alignment, wrap and other spacing container basic styles - item（`semantic-mark-item`）: Wrapped item element with spacing item layout and styles, providing wrapper for each child element for inline alignment - separator（`semantic-mark-separator`）: Separator element with divider styling ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
  • root
    根元素，包含 flex 布局、间隙设置、对齐方式、换行等间距容器的基础样式
  • item
    包裹的子组件，包含间距项的布局和样式，为每个子元素提供包装用于内联对齐
  • separator
    分隔符，包含分隔元素的样式
``` --- # spin Semantic Source: https://ant.design/components/spin/semantic.md ## Spin ### Semantic Parts - root（`semantic-mark-root`）: The root element, which sets absolute positioning, display control, color, font size, text alignment, vertical alignment, opacity, and transition animation (only effective when fullscreen is false) - section（`semantic-mark-section`）: The loading element area, which sets relative positioning, flexbox layout, alignment, and color - indicator（`semantic-mark-indicator`）: The indicator element, which sets width, height, font size, inline-block display, transition animation, transform origin, and line height - description（`semantic-mark-description`）: The description element, which sets font size and line height - container（`semantic-mark-container`）: The container element that holds the child elements wrapped by Spin, setting opacity and transition animation ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
``` --- # splitter Semantic Source: https://ant.design/components/splitter/semantic.md ## Splitter ### Semantic Parts - root（`semantic-mark-root`）: Root element with flex layout, width and height, alignment and stretch styles - panel（`semantic-mark-panel`）: Panel element with flex basis, grow ratio and panel container styles - dragger（`semantic-mark-dragger`）: Drag control element with absolute positioning, user selection, z-index, center alignment, background color, hover and active states styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
First
Second
``` --- # statistic Semantic Source: https://ant.design/components/statistic/semantic.md ## Statistic ### Semantic Parts - root（`semantic-mark-root`）: Root element with reset styles and overall container styles for statistic component - header（`semantic-mark-header`）: Header element with bottom padding and title area layout styles - title（`semantic-mark-title`）: Title element with text color, font size and other title text display styles - content（`semantic-mark-content`）: Content element with layout and alignment styles for the prefix, value and suffix area - value（`semantic-mark-value`）: Value element with text color, font size, font family and other statistic number display styles - prefix（`semantic-mark-prefix`）: Prefix element with inline-block display, right margin and other prefix content layout styles - suffix（`semantic-mark-suffix`）: Suffix element with inline-block display, left margin and other suffix content layout styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
Active
11 .28 %
``` --- # steps Items Semantic Source: https://ant.design/components/steps/semantic_items.md ## Steps.Items ### Semantic Parts - root（`semantic-mark-root`）: Root element - wrapper（`semantic-mark-wrapper`）: Step item wrapper element - icon（`semantic-mark-icon`）: Step item icon element - header（`semantic-mark-header`）: Step item header element - title（`semantic-mark-title`）: Step item title element - subtitle（`semantic-mark-subtitle`）: Step item subtitle element - section（`semantic-mark-section`）: Step item section element - content（`semantic-mark-content`）: Step item content element - rail（`semantic-mark-rail`）: Step item rail element ### Usage Example ```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.
Arrow
2
Step 2
00:01
This is a content.
Arrow
3
Step 3
00:02
This is a content.
Arrow
  • root
    根元素
  • wrapper
    步骤项内裹元素
  • icon
    步骤项图标元素
  • header
    步骤项头部元素
  • title
    步骤项标题元素
  • subtitle
    步骤项副标题元素
  • section
    步骤项区域元素
  • content
    步骤项内容元素
  • rail
    步骤项连接线元素
``` --- # steps Semantic Source: https://ant.design/components/steps/semantic.md ## Steps ### Semantic Parts - root（`semantic-mark-root`）: Root element with flex layout, nowrap, alignment, CSS variables and other basic step container styles - item（`semantic-mark-item`）: Step item element with flex layout, relative positioning and other basic step item container styles - itemWrapper（`semantic-mark-itemWrapper`）: Step item wrapper element with flex layout, nowrap, top padding and other step content wrapping styles - itemIcon（`semantic-mark-itemIcon`）: Step item icon element with icon size, positioning, font-size and other icon display related styles - itemHeader（`semantic-mark-itemHeader`）: Step item header element with flex layout, nowrap, alignment and other header area layout styles - itemTitle（`semantic-mark-itemTitle`）: Step item title element with color, font-size, line-height, word-break, transitions and other title text styles - itemSubtitle（`semantic-mark-itemSubtitle`）: Step item subtitle element with color, font-weight, font-size, line-height, margin, word-break and other subtitle styles - itemSection（`semantic-mark-itemSection`）: Step item section element with step content area layout and styling - itemContent（`semantic-mark-itemContent`）: Step item content element with color, font-size, line-height, word-break, transitions and other content text styles - itemRail（`semantic-mark-itemRail`）: Step item rail element with border-style, border-width, transitions and other connecting line styles ### Usage Example ```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.
Arrow
2
Step 2
00:01
This is a content.
Arrow
3
Step 3
00:02
This is a content.
Arrow
  • root
    根元素，包含 flex 布局、禁止换行、对齐方式、CSS 变量等步骤条容器的基础样式
  • item
    步骤项元素，包含 flex 布局、相对定位等单个步骤项的基础容器样式
  • itemWrapper
    步骤项内裹元素，包含 flex 布局、禁止换行、顶部内边距等步骤项内容的包装样式
  • itemIcon
    步骤项图标元素，包含图标的尺寸、定位、字体大小等图标显示相关样式
  • itemHeader
    步骤项头部元素，包含 flex 布局、禁止换行、对齐方式等头部区域的布局样式
  • itemTitle
    步骤项标题元素，包含颜色、字体大小、行高、文字换行、过渡动画等标题文字样式
  • itemSubtitle
    步骤项副标题元素，包含颜色、字体权重、字体大小、行高、外边距、文字换行等副标题样式
  • itemSection
    步骤项区域元素，包含步骤项内容区域的布局和样式
  • itemContent
    步骤项内容元素，包含颜色、字体大小、行高、文字换行、过渡动画等内容文字样式
  • itemRail
    步骤项连接线元素，包含边框样式、边框宽度、过渡动画等连接线的样式
``` --- # switch Semantic Source: https://ant.design/components/switch/semantic.md ## Switch ### Semantic Parts - root（`semantic-mark-root`）: Root element with min-width, height, line-height, vertical alignment, background color, border, border radius, cursor style, transition animations, user selection and other basic switch container styles - content（`semantic-mark-content`）: Content element with block display, overflow hidden, border radius, height, padding, transition animations and other switch content area layout and styles - indicator（`semantic-mark-indicator`）: Indicator element with absolute positioning, width, height, background color, border radius, shadow, transition animations and other switch handle styles and interactive effects ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html ``` --- # table Semantic Source: https://ant.design/components/table/semantic.md ## Table ### Semantic Parts - root（`semantic-mark-root`）: Root element with font-size, background, border-radius, scrollbar-color and other basic table container styles - section（`semantic-mark-section`）: Container element with clear-fix, max-width, scrollbar background and other table wrapper styles - header.wrapper（`semantic-mark-header-wrapper`）: Header wrapper element with table header layout and container styles - header.row（`semantic-mark-header-row`）: Header row element with table header row layout and styling - header.cell（`semantic-mark-header-cell`）: Header cell element with relative positioning, padding, word-wrap, background, text color, font-weight and other header cell styles - title（`semantic-mark-title`）: Title element with table title styling and layout - body.wrapper（`semantic-mark-body-wrapper`）: Body wrapper element with table body layout and container styles - body.row（`semantic-mark-body-row`）: Body row element with hover effects, selected states, expanded states and other interactive row styles - body.cell（`semantic-mark-body-cell`）: Body cell element with relative positioning, padding, word-wrap and other basic data cell styles - footer（`semantic-mark-footer`）: Footer element with table footer background color, text color and other footer styles - content（`semantic-mark-content`）: Content element with table content area styling and layout - pagination.root（`semantic-mark-pagination-root`）: Pagination root element with pagination component basic styles and layout - pagination.item（`semantic-mark-pagination-item`）: Pagination item element with pagination item styling and interactive effects ### Usage Example ```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 Semantic Source: https://ant.design/components/tabs/semantic.md ## Tabs ### Semantic Parts - root（`semantic-mark-root`）: Root element with basic tab container styles, layout and direction control - item（`semantic-mark-item`）: Item element with relative positioning, padding, colors, text ellipsis, border-radius, transitions and other tab item styles and interactive effects - remove（`semantic-mark-remove`）: Remove button element with editable tab close button size, color, hover state and other interactive feedback styles - header（`semantic-mark-header`）: Header element with tab navigation header layout, background, borders and other styles - indicator（`semantic-mark-indicator`）: Indicator element with indicator bar color, position, dimensions, transitions and other active state indication styles - body（`semantic-mark-body`）: Body element with tab panel container layout, animation and size control styles - content（`semantic-mark-content`）: Content element with single tab panel layout, padding and other content display styles - popup.root（`semantic-mark-popup-root`）: Popup menu element with dropdown absolute positioning, z-index, display control, max-height, scrolling and other styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
Content of tab 1
``` --- # tag Group Semantic Source: https://ant.design/components/tag/semantic_group.md ## Tag.Group ### Semantic Parts - root（`semantic-mark-root`）: Root element with tag group container styles and layout - item（`semantic-mark-item`）: Tag item element with inline-block display, height, padding, font size, line height, background color, border, border radius, opacity, transition animation, checkable state and other styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
Movies Books Music Sports
``` --- # tag Semantic Source: https://ant.design/components/tag/semantic.md ## Tag ### Semantic Parts - root（`semantic-mark-root`）: Root element with inline-block display, auto height, padding, font size, line height, nowrap, background color, border, border radius, opacity, transition animations, text alignment, relative positioning and other basic tag styles - icon（`semantic-mark-icon`）: Icon element with font size, color, cursor style, transition animations and other icon display styles - content（`semantic-mark-content`）: Content element with text content color, font styles and other content area styles - close（`semantic-mark-close`）: Close element with close button layout, cursor styles, transition animations and other interaction styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html Ant Design ``` --- # time-picker Semantic Source: https://ant.design/components/time-picker/semantic.md ## TimePicker ### Semantic Parts - root（`semantic-mark-root`）: Root element with relative positioning, inline-flex layout, padding, border-radius, transition animations and other basic styles for date picker container - prefix（`semantic-mark-prefix`）: Prefix element with flex layout and margin styles for prefix content layout - input（`semantic-mark-input`）: Input element with relative positioning, width, color, font, line-height, transition animations and other core interactive styles for input field - suffix（`semantic-mark-suffix`）: Suffix element with flex layout, color, line-height, pointer events, transition animations and other styles for suffix content - popup（`semantic-mark-popup`）: Popup element - popup.container（`semantic-mark-popup-container`）: Container element, set background color, padding, border radius, shadow, border and content display styles - popup.content（`semantic-mark-popup-content`）: Popup content element with width, border, cell and other content display styles for date table - popup.item（`semantic-mark-popup-item`）: Popup item element with size, background, border-radius, hover state, selected state and other interactive styles for date cells - popup.footer（`semantic-mark-popup-footer`）: Popup footer element with layout styles for bottom operation area including confirm/cancel buttons and shortcuts ### Usage Example ```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 Items Semantic Source: https://ant.design/components/timeline/semantic_items.md ## Timeline.Items ### Semantic Parts - root（`semantic-mark-root`）: Root element - wrapper（`semantic-mark-wrapper`）: Item wrapper element - icon（`semantic-mark-icon`）: Item icon element - header（`semantic-mark-header`）: Item header element - title（`semantic-mark-title`）: Item title element - section（`semantic-mark-section`）: Item section element - content（`semantic-mark-content`）: Item content element - rail（`semantic-mark-rail`）: Item rail element ### Usage Example ```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 Semantic Source: https://ant.design/components/timeline/semantic.md ## Timeline ### Semantic Parts - root（`semantic-mark-root`）: Root element with timeline container list style reset, vertical layout, dot icon, outlined style, alternate layout and other basic container styles - item（`semantic-mark-item`）: Item element with single timeline node relative positioning, margin, padding, font size, finish state, color theme, layout direction and other node basic styles - itemWrapper（`semantic-mark-itemWrapper`）: Item wrapper element with timeline node content wrapping container styles - itemIcon（`semantic-mark-itemIcon`）: Item icon element with node head icon absolute positioning, width/height size, background color, border, border radius, wave animation and other icon styles - itemHeader（`semantic-mark-itemHeader`）: Item header element with header area layout containing title and rail, alignment, text direction and other styles - itemTitle（`semantic-mark-itemTitle`）: Item title element with node title text font size, line height, color and other text styles - itemSection（`semantic-mark-itemSection`）: Item section element with section container containing header and content flex layout, wrap, gap and other layout styles - itemContent（`semantic-mark-itemContent`）: Item content element with node detail content relative positioning, top offset, left margin, text color, word break and other content styles - itemRail（`semantic-mark-itemRail`）: Item rail element with timeline node connection track line absolute positioning, top offset, left offset, height, border color, width, style and other connection line styles ### Usage Example ```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 Semantic Source: https://ant.design/components/tooltip/semantic.md ## Tooltip ### Semantic Parts - root（`semantic-mark-root`）: Root element (including arrows, content elements) with absolute positioning, z-index, block display, max width, visibility, transform origin and arrow background color - container（`semantic-mark-container`）: Content element with min width and height, padding, color, text alignment, background color, border radius, shadow and border styles - arrow（`semantic-mark-arrow`）: Arrow element with width, height, position, color and border styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
``` --- # tour Semantic Source: https://ant.design/components/tour/semantic.md ## Tour ### Semantic Parts - root（`semantic-mark-root`）: Tour root container with absolute positioning, z-index control, max width, visibility, arrow background color variable, theme styles and other container styles - cover（`semantic-mark-cover`）: Card cover area with text center alignment, padding, image width and other image display styles - close（`semantic-mark-close`）: Close button element with absolute positioning, size, color, hover state and other interactive feedback styles - section（`semantic-mark-section`）: Card main content area with text alignment, border radius, box shadow, relative positioning, background color, border, background clip and other card styles - footer（`semantic-mark-footer`）: Card bottom action area with padding, text right alignment, border radius, flex layout and other bottom container styles - actions（`semantic-mark-actions`）: Action button group container with left auto margin, button spacing and other button group layout styles - indicator（`semantic-mark-indicator`）: Single indicator element with width/height size, inline-block display, border radius, background color, right margin, active state and other dot styles - indicators（`semantic-mark-indicators`）: Indicator group container with inline-block display and other indicator container styles - header（`semantic-mark-header`）: Card header area with padding, width calculation, word break and other header container styles - title（`semantic-mark-title`）: Guide title text with font weight and other title text styles - description（`semantic-mark-description`）: Guide description text with padding, word wrap and other description text styles - mask（`semantic-mark-mask`）: Mask layer element with fixed positioning, full screen coverage, z-index, pointer events, transition animation and other mask styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
tour.png
Hello World!
Hello World?!
``` --- # transfer Semantic Source: https://ant.design/components/transfer/semantic.md ## Transfer ### Semantic Parts - root（`semantic-mark-root`）: Root element with flex layout, transfer container base styles and layout control - section（`semantic-mark-section`）: Section element with flex layout, width, height, min height, border, border radius and other single-side transfer container styles - source.section（`semantic-mark-source-section`）: Source section element, only applies to left transfer section container styles - target.section（`semantic-mark-target-section`）: Target section element, only applies to right transfer section container styles - source.header（`semantic-mark-source-header`）: Source header element, only applies to left header area styles - target.header（`semantic-mark-target-header`）: Target header element, only applies to right header area styles - source.title（`semantic-mark-source-title`）: Source title element, only applies to left title text styles - target.title（`semantic-mark-target-title`）: Target title element, only applies to right title text styles - source.body（`semantic-mark-source-body`）: Source body element, only applies to left list body styles - target.body（`semantic-mark-target-body`）: Target body element, only applies to right list body styles - source.list（`semantic-mark-source-list`）: Source list element, only applies to left list content styles - target.list（`semantic-mark-target-list`）: Target list element, only applies to right list content styles - source.item（`semantic-mark-source-item`）: Source item element, only applies to left list item styles - target.item（`semantic-mark-target-item`）: Target item element, only applies to right list item styles - source.itemIcon（`semantic-mark-source-itemIcon`）: Source item icon element, only applies to left icon styles - target.itemIcon（`semantic-mark-target-itemIcon`）: Target item icon element, only applies to right icon styles - source.itemContent（`semantic-mark-source-itemContent`）: Source item content element, only applies to left text content styles - target.itemContent（`semantic-mark-target-itemContent`）: Target item content element, only applies to right text content styles - source.footer（`semantic-mark-source-footer`）: Source footer element, only applies to left footer area styles - target.footer（`semantic-mark-target-footer`）: Target footer element, only applies to right footer area styles - header（`semantic-mark-header`）: Header element with flex layout, alignment, height, padding, color, background color, bottom border, border radius and other header area styles - title（`semantic-mark-title`）: Title element with text ellipsis, flex ratio, text alignment, auto left margin and other title text layout and styles - body（`semantic-mark-body`）: Body element with list main area container styles and layout control - list（`semantic-mark-list`）: List element with list content styles, layout and scroll control - item（`semantic-mark-item`）: List item element with relative positioning, padding, border, hover state, selected state, disabled state and other list item interaction styles - itemIcon（`semantic-mark-itemIcon`）: List item icon element with checkbox and other icon styles and interaction states - itemContent（`semantic-mark-itemContent`）: List item content element with text ellipsis, padding and other list item text content display styles - footer（`semantic-mark-footer`）: Footer element with bottom operation area styles and layout - actions（`semantic-mark-actions`）: Actions element with transfer button group styles, layout and interaction states ### Usage Example ```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 Semantic Source: https://ant.design/components/tree/semantic.md ## Tree ### Semantic Parts - root（`semantic-mark-root`）: Root element with tree control base styles, layout and container control - item（`semantic-mark-item`）: Item element with tree node base styles, drag state, role attributes, indentation, switcher, content wrapper and other node structure - itemTitle（`semantic-mark-itemTitle`）: Title element with tree node title text display styles and text content - itemIcon（`semantic-mark-itemIcon`）: Icon element with tree node icon styles, size and state display - itemSwitcher（`semantic-mark-itemSwitcher`）: Switcher element with tree node expand/collapse button styles and background ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
``` --- # tree-select Semantic Source: https://ant.design/components/tree-select/semantic.md ## TreeSelect ### Semantic Parts - root（`semantic-mark-root`）: Root element with tree selector base styles, border, border radius container styles - prefix（`semantic-mark-prefix`）: Prefix element with prefix content layout and styles - input（`semantic-mark-input`）: Input element with text input, search, selected value display and other input core interaction styles - suffix（`semantic-mark-suffix`）: Suffix element with suffix content, clear button, dropdown arrow and other suffix area styles - content（`semantic-mark-content`）: Multiple selection container with layout, spacing, and wrapping styles for selected items - item（`semantic-mark-item`）: Multiple selection item element with border, background, padding, and margin styles - itemContent（`semantic-mark-itemContent`）: Multiple selection item content area with text ellipsis styles - itemRemove（`semantic-mark-itemRemove`）: Multiple selection item remove button with font-related styles - placeholder（`semantic-mark-placeholder`）: Placeholder element with font styles and colors for placeholder text - popup.root（`semantic-mark-popup-root`）: Popup element with dropdown tree selection panel positioning, z-index, background, border, shadow and other popup layer styles - popup.item（`semantic-mark-popup-item`）: Popup item element with tree node option styles, hover state, selected state and other interaction states - popup.itemTitle（`semantic-mark-popup-itemTitle`）: Popup title element with tree node title text display styles - popup.itemSwitcher（`semantic-mark-popup-itemSwitcher`）: Popup switcher element with tree node expand/collapse button styles and background ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
prefix
aojunhao123
contributors
``` --- # typography Semantic Source: https://ant.design/components/typography/semantic.md ## Typography ### Semantic Parts - root（`semantic-mark-root`）: Root element with base typography styles, layout, and positioning - actions（`semantic-mark-actions`）: Actions element with layout and spacing styles for copy, edit, expand/collapse buttons - action（`semantic-mark-action`）: Individual action button element including copy, edit, expand, collapse button styles like padding, border radius, colors, etc. - textarea（`semantic-mark-textarea`）: TextArea element in editable mode, used to customize className and inline styles for the edit input ### Usage Example ```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 Semantic Source: https://ant.design/components/upload/semantic.md ## Upload ### Semantic Parts - root（`semantic-mark-root`）: Root container element with layout styles, disabled text color, user-select control, cursor styles and other basic styles - list（`semantic-mark-list`）: File list container with layout arrangement, transition animations, spacing control and other styles - item（`semantic-mark-item`）: File item element with padding, background color, border styles, hover effects, status colors, transition animations and other styles - trigger（`semantic-mark-trigger`）: Upload button container with button styles, disabled state, visibility control and other styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
xxx.png
yyy.png
zzz.png
``` ---