# Antdv Next Component Semantic Structured Descriptions This document extracts semantic DOM descriptions from component `_semantic` demos and formats them into AI-friendly structured data. > Total semantic entries: 65 > Components with semantic descriptions: 58 ## Component List ### alert - Component: `alert` - Semantic nodes: 7 - Source demo: `docs/src/pages/components/alert/demo/_semantic.vue` - `root`: Root element with border, background, padding, border-radius, and positioning styles for the alert container - `icon`: Icon element with color, line-height, and margin styles, supporting different status icon types - `section`: Content element with flex layout controlling content area typography and minimum width - `title`: Title element with text color and font styling for the alert title - `description`: Description element with font-size and line-height styles for additional content - `actions`: Actions element with layout and spacing styles for action buttons - `close`: Close button element with basic button styling ### anchor - Component: `anchor` - Semantic nodes: 4 - Source demo: `docs/src/pages/components/anchor/demo/_semantic.vue` - `root`: Root element with layout positioning, padding, margin, background color and other basic styles - `item`: Link item element with padding, text color, hover states, transition animations and other styles - `itemTitle`: Title text element with font styles, color changes, text decoration, transition effects and other styles - `indicator`: Indicator element with width, height, background color, position changes, transition animations and other styles ### autoComplete - Component: `auto-complete` - Semantic nodes: 9 - Source demo: `docs/src/pages/components/auto-complete/demo/_semantic.vue` - `root`: Root element with relative positioning, inline-flex layout, cursor styles, transitions, border and other basic selector container styles - `prefix`: Prefix element with layout and styling for prefix content - `input`: Input element with search input styling, cursor control, font inheritance and other search-related styles. Remove border styles - `placeholder`: Placeholder element with font styles and colors for placeholder text - `content`: Multiple selection container with layout, spacing, and wrapping styles for selected items - `clear`: Clear button element with layout, styling and interactive effects for clear button - `popup`: - `root`: Popup element with popup layer positioning, z-index, background, border, box-shadow and other popup container styles - `list`: Popup list element with option list layout, scrolling, max-height and other list container styles - `listItem`: Popup item element with option item padding, hover effects, selected states, disabled states and other option interactive styles ### badge - Component: `badge` - Semantic nodes: 2 - Source demo: `docs/src/pages/components/badge/demo/_semantic.vue` - `root`: Root element with relative positioning, inline-block display, and fit-content width for basic layout - `indicator`: Indicator element with positioning, z-index, dimensions, colors, fonts, text alignment, background, border-radius, box-shadow, and transition animations for complete badge styling ### breadcrumb - Component: `breadcrumb` - Semantic nodes: 3 - Source demo: `docs/src/pages/components/breadcrumb/demo/_semantic.vue` - `root`: Root element with text color, font size, icon size and other basic styles, using flex layout with ordered list - `item`: Item element with text color, link color transitions, hover effects, padding, border-radius, height, and margin styles - `separator`: Separator element with margin and color styles for the divider ### button - Component: `button` - Semantic nodes: 3 - Source demo: `docs/src/pages/components/button/demo/_semantic.vue` - `root`: Root element with comprehensive button styling including border, background, padding, border-radius, box-shadow, transitions, cursor, font-weight, alignment, and layout properties - `icon`: Icon element with font-size, color inheritance, and SVG style reset for proper icon display - `content`: Content element that wraps button text with typography styles including nowrap, text-align center, and Chinese character spacing optimization ### calendar - Component: `calendar` - Semantic nodes: 6 - Source demo: `docs/src/pages/components/calendar/demo/_semantic.vue` - `root`: Root element containing background, border, border-radius and overall layout structure of the calendar component - `header`: Header element with layout and style control for year selector, month selector and mode switcher - `body`: Body element with padding and layout control for the calendar table that contains the calendar grid - `content`: Content element with width, height and table styling control for the calendar table - `item`: Item element with background, border, hover state, selected state and other interactive styles for calendar cells - `itemContent`: Item content element with layout and styles for the calendar cell content area ### card - Component: `card` - Semantic nodes: 7 - Source demo: `docs/src/pages/components/card/demo/_semantic.vue` - `root`: Card root element with positioning, background, border, border-radius, box-shadow, padding and other container styles - `header`: Card header area with flex layout, min-height, padding, text color, font-weight, font-size, background, bottom border and top border-radius - `title`: Card title with inline-block display, flex-grow, text ellipsis and other title display styles - `extra`: Card extra operation area in top-right corner with text color and layout styles for additional content - `cover`: Title cover with styles for cover image display and layout - `body`: Card content area with padding, font-size and other content display styles - `actions`: Card bottom action group with flex layout, list-style reset, background, top border and bottom border-radius for action buttons container ### cascader - Component: `cascader` - Semantic nodes: 13 - Source demo: `docs/src/pages/components/cascader/demo/_semantic.vue` - `root`: Root element with relative positioning, inline-flex layout, cursor styles, transitions, border and other basic selector container styles - `prefix`: Prefix element with layout and styling for prefix content - `content`: Multiple selection container with layout, spacing, and wrapping styles for selected items - `placeholder`: Placeholder element with font styles and colors for placeholder text - `clear`: Clear button element with layout, styling and interactive effects for clear button式 - `input`: Input element with search input styling, cursor control, font inheritance and other search-related styles. Remove border styles - `suffix`: Suffix element with layout and styling for suffix content like clear button, arrow icon, etc. - `popup`: - `root`: Popup element with popup layer positioning, z-index, background, border, box-shadow and other popup container styles - `list`: Popup list element with option list layout, scrolling, max-height and other list container styles - `listItem`: Popup item element with option item padding, hover effects, selected states, disabled states and other option interactive styles - `item`: Multiple selection item element with border, background, padding, and margin styles - `itemContent`: Multiple selection item content area with text ellipsis styles - `itemRemove`: Multiple selection item remove button with font-related styles式 ### checkbox - Component: `checkbox` - Semantic nodes: 3 - Source demo: `docs/src/pages/components/checkbox/demo/_semantic.vue` - `root`: Root element with inline-flex layout, baseline alignment, cursor style, reset styles and other basic checkbox container styles - `icon`: Checkbox icon element with size, direction, background, border, border-radius, transitions, and checked state checkmark styles - `label`: Label text element with padding and spacing styles relative to the checkbox ### collapse - Component: `collapse` - Semantic nodes: 5 - Source demo: `docs/src/pages/components/collapse/demo/_semantic.vue` - `root`: Root element with border, border-radius, background color and container styles that control the overall layout and appearance of collapse panels - `header`: Header element with flex layout, padding, color, line-height, cursor style, transition animations and other interactive styles for panel headers - `icon`: Icon element with font size, transition animations, rotation transforms and other styles and animations for expand/collapse arrows - `title`: Title element with flex auto layout and margin styles for title text layout and typography - `body`: Body element with padding, color, background color and other styles for panel content area display ### colorPicker - Component: `color-picker` - Semantic nodes: 5 - Source demo: `docs/src/pages/components/color-picker/demo/_semantic.vue` - `root`: Trigger container with border styles, transition animations, size controls, displaying color block and text content - `body`: Color block container with background color, border styles - `content`: Color block element with actual selected color styles - `description`: Description text content with font styles and color - `popup`: - `root`: Popup panel root container with background color, shadow effects, color selection panel, slider controls and preset colors ### datePicker - Component: `date-picker` - Semantic nodes: 11 - Source demo: `docs/src/pages/components/date-picker/demo/_semantic.vue` - `root`: Root element with relative positioning, inline-flex layout, padding, border-radius, transition animations and other basic styles for date picker container - `prefix`: Prefix element with flex layout and margin styles for prefix content layout - `input`: Input element with relative positioning, width, color, font, line-height, transition animations and other core interactive styles for input field - `suffix`: Suffix element with flex layout, color, line-height, pointer events, transition animations and other styles for suffix content - `popup`: - `root`: Popup element - `container`: Container element, set background color, padding, border radius, shadow, border and content display styles - `header`: Popup header element with navigation buttons, month/year selectors and other header control area layout and styles - `body`: Popup body element with container layout and styles for date panel table - `content`: Popup content element with width, border, cell and other content display styles for date table - `item`: Popup item element with size, background, border-radius, hover state, selected state and other interactive styles for date cells - `footer`: Popup footer element with layout styles for bottom operation area including confirm/cancel buttons and shortcuts ### descriptions - Component: `descriptions` - Semantic nodes: 6 - Source demo: `docs/src/pages/components/descriptions/demo/_semantic.vue` - `root`: Root element with basic styles, reset styles, border styles, layout direction and other overall styles for description list container - `header`: Header element with flex layout, alignment, bottom margin and other layout and style controls for header area - `title`: Title element with text ellipsis, flex ratio, color, font weight, font size, line height and other title text styles - `extra`: Extra content element with left margin, color, font size and other styles for additional operation area - `label`: Label element with color, font weight, font size, line height, text align, colon styles and other label text styles - `content`: Content element with table cell layout, color, font size, line height, word break and other content display styles ### divider - Component: `divider` - Semantic nodes: 3 - Source demo: `docs/src/pages/components/divider/demo/_semantic.vue` - `root`: Root element with border-top style, divider styling and other basic divider container styles - `rail`: Background rail element with border-top style and other divider connection line styles - `content`: Content element with inline-block display, padding and other divider text content styles ### drawer - Component: `drawer` - Semantic nodes: 10 - Source demo: `docs/src/pages/components/drawer/demo/_semantic.vue` - `root`: Root element with fixed positioning, z-index control, pointer events, color and other basic styles and layout control for drawer container - `mask`: Mask element with absolute positioning, z-index, background color, pointer events and other mask layer styles and interaction controls - `section`: Drawer container element with flex layout, width/height, overflow control, background color, pointer events and other drawer body styles - `header`: Header element with flex layout, alignment, padding, font size, line height, bottom border and other header area styles - `title`: Title element with flex ratio, margin, font weight, font size, line height and other title text styles - `extra`: Extra element with flex fixed layout and other additional operation content style controls - `body`: Body element with flex ratio, minimum size, padding, overflow scroll and other content area display and layout styles - `footer`: Footer element with flex shrink, padding, top border and other bottom operation area styles - `dragger`: Dragger element used to resize the drawer, with absolute positioning, transparent background, pointer events control, hover state styles, and dragging state styles - `close`: Close button element with basic button styling ### dropdown - Component: `dropdown` - Semantic nodes: 5 - Source demo: `docs/src/pages/components/dropdown/demo/_semantic.vue` - `root`: Root element of dropdown, sets positioning, z-index and container styles - `itemTitle`: Title content area of dropdown option, sets layout and text styles - `item`: Individual dropdown option element, sets interaction states and background styles - `itemContent`: Main content area of dropdown option, sets content layout and link styles - `itemIcon`: Icon area of dropdown option, sets icon size and spacing styles ### empty - Component: `empty` - Semantic nodes: 4 - Source demo: `docs/src/pages/components/empty/demo/_semantic.vue` - `root`: Root element, sets text alignment, font and line height styles - `image`: Image element, sets height, opacity, margin and image styles - `description`: Description element, sets text color styles - `footer`: Footer element, sets top margin and action button styles ### floatButton - Component: `float-button` - Semantic nodes: 3 - Source demo: `docs/src/pages/components/float-button/demo/_semantic.vue` - `root`: Root element with float button base styles, shape size, type theme, fixed positioning, z-index, shadow, spacing and other container styles - `icon`: Icon element with button icon size, color, line height, alignment and other icon display styles - `content`: Content element with button text content font size, color, alignment, line wrap and other text display styles ### floatButtonGroup - Component: `float-button` - Variant: `group` - Semantic nodes: 8 - Source demo: `docs/src/pages/components/float-button/demo/_semantic_group.vue` - `root`: Root element with float button group container styles, fixed positioning, z-index, padding, gap, direction mode and other combined layout styles - `list`: List element with button group list flex layout, border radius, shadow, animation transition, vertical alignment and other list container styles - `item`: Item element with individual float button styles, size, shape, type, state, icon content and other button base styles - `itemIcon`: Item icon element with float button icon size, color, alignment and other icon display styles - `itemContent`: Item content element with float button text content, badge, description and other content area styles - `trigger`: Trigger element with menu mode trigger button styles, shape, icon, hover state, expand/collapse state and other interaction styles - `triggerIcon`: Trigger icon element with trigger button icon styles, rotation animation, toggle state and other icon interaction styles - `triggerContent`: Trigger content element with trigger button content area text, identifier, state indicator and other content styles ### form - Component: `form` - Semantic nodes: 6 - Source demo: `docs/src/pages/components/form/demo/_semantic.vue` - `root`: Root element with form item margin-bottom, vertical-align, transitions, hidden states, error/warning states and other basic form item container styles - `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`: Content element with form content area layout, styling and control container related styles - `help`: Help container element with spacing, motion, and presentation styles for help and validation areas - `helpItem`: Single help message item with typography styles for prompt, error, and warning text - `extra`: Extra prompt container element with spacing, color, and typography styles for supplementary text ### image - Component: `image` - Semantic nodes: 9 - Source demo: `docs/src/pages/components/image/demo/_semantic.vue` - `root`: Root element, sets relative positioning and inline-block layout styles - `image`: Image element, sets width, height and vertical alignment styles - `cover`: Image hover display prompt element, sets absolute positioning, background color, opacity and transition animation styles - `popup`: - `root`: Preview root element, sets fixed positioning, z-index and background mask styles - `mask`: Preview mask element, sets absolute positioning and semi-transparent background styles - `body`: Preview body element, sets flex layout, center alignment and pointer event styles - `footer`: Preview footer element, sets absolute positioning, center layout and bottom operation area styles - `actions`: Preview actions group element, sets flex layout, background color, border radius and action button styles - `close`: Preview close button element, sets basic button styles ### input - Component: `input` - Semantic nodes: 6 - Source demo: `docs/src/pages/components/input/demo/_semantic.vue` - `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 - `prefix`: Prefix wrapper element with layout and styling for prefix content - `input`: Input element with core interactive styles and text input related styling - `suffix`: Suffix wrapper element with layout and styling for suffix content - `count`: Character count element with font and color styles for count display - `clear`: Clear button element with color, size, hover state and transition animation styles ### input:password - Component: `input` - Variant: `password` - Semantic nodes: 5 - Source demo: `docs/src/pages/components/input/demo/_semantic-password.vue` - `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 - `prefix`: Prefix wrapper element with layout and styling for prefix content - `input`: Input element with core interactive styles and text input related styling - `suffix`: Suffix wrapper element with layout and styling for suffix content - `count`: Character count element with font and color styles for count display ### inputNumber - Component: `input-number` - Semantic nodes: 6 - Source demo: `docs/src/pages/components/input-number/demo/_semantic.vue` - `root`: Root element, sets inline-block layout, width, border radius and reset styles - `prefix`: Prefix wrapper element, sets flex layout, alignment and right margin styles - `input`: Input element, sets font, line height, text input and interaction styles - `suffix`: Suffix wrapper element, sets flex layout, margin and transition animation styles - `actions`: Actions element, sets absolute positioning, width, flex layout and number adjustment button styles - `action`: Single action button element, sets button styling, hover effects and click interactions ### inputSearch - Component: `input` - Variant: `search` - Semantic nodes: 8 - Source demo: `docs/src/pages/components/input/demo/_semantic-search.vue` - `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 - `prefix`: Prefix wrapper element with layout and styling for prefix content - `input`: Input element with core interactive styles and text input related styling - `suffix`: Suffix wrapper element with layout and styling for suffix content - `count`: Character count element with font and color styles for count display - `button`: - `root`: Search button root element with button styles, hover effects and click interactions - `icon`: Search button icon element with icon styles, hover effects and click interactions - `content`: Search button content element with text styles, hover effects and click interactions ### masonry - Component: `masonry` - Semantic nodes: 2 - Source demo: `docs/src/pages/components/masonry/demo/_semantic.vue` - `root`: Root element, sets relative positioning, flex layout and masonry container styles - `item`: Item element, sets absolute positioning, width calculation, transition animation and masonry item styles ### mentions - Component: `mentions` - Semantic nodes: 4 - Source demo: `docs/src/pages/components/mentions/demo/_semantic.vue` - `root`: Root element, set inline flex layout, relative positioning, padding and border styles - `textarea`: Textarea element, set font, line height, text input and background styles - `suffix`: Suffix element with layout and styling for suffix content like clear button, etc. - `popup`: Popup element, set absolute positioning, z-index, background color, border radius, shadow and dropdown options styles ### menu - Component: `menu` - Semantic nodes: 12 - Source demo: `docs/src/pages/components/menu/demo/_semantic.vue` - `root`: Root element with basic menu container styles and layout - `item`: Item element with relative positioning, block display, margins, whitespace handling, cursor styles, transitions and other basic interactive styles for menu items - `itemIcon`: Icon element with min-width, font-size, transitions, icon reset styles, and spacing control with text - `itemContent`: Item content element with layout and typography styles for menu item content - `subMenu`: - `itemTitle`: Submenu title element with submenu title styles and interactive effects - `list`: Submenu list element with submenu list layout and container styles - `item`: Submenu item element with submenu item styles and interactive effects - `itemIcon`: Submenu item icon element with submenu icon size and styles - `itemContent`: Submenu item content element with submenu content layout and typography - `itemTitle`: Item title element (no effect in horizontal mode) with title text styles and layout - `list`: Menu list element (no effect in horizontal mode) with menu list layout and container styles - `popup`: Popup menu element (no effect in inline mode) with popup layer positioning, z-index, background and other styles ### message - Component: `message` - Semantic nodes: 6 - Source demo: `docs/src/pages/components/message/demo/_semantic.vue` - `root`: Message item root element, set background color, border radius, shadow, padding and animation styles - `wrapper`: Wrapper element for icon and title, set content layout, gap and alignment styles - `icon`: Icon element, set font size, line height and status color styles - `title`: Title element, set text color, font size, line height and content display styles - `list`: Message list root element, set positioning, z-index, width, scroll area and placement styles - `listContent`: Message list content element, set notice layout, gap and height transition styles ### modal - Component: `modal` - Semantic nodes: 9 - Source demo: `docs/src/pages/components/modal/demo/_semantic.vue` - `root`: Root element with relative positioning, top position, width, max-width, margins, bottom padding and other basic layout styles for modal container - `mask`: Mask element with fixed positioning, z-index, background color, animation transitions and other mask layer styles - `container`: Modal container element with relative positioning, background, background-clip, border, border-radius, box-shadow, pointer-events, padding and other modal body styles - `wrapper`: Wrapper element used for motion container with animation and transition effect styles - `header`: Header element with padding, bottom border and other header area styles - `title`: Title element with margin, color, font-weight, font-size, line-height, word-wrap and other title text styles - `body`: Body element with content area background color, padding and other content display styles - `footer`: Footer element with footer background color, padding, top border, border-radius and other footer area styles - `close`: Close button element with base button styles, positioning and interaction effects ### notification - Component: `notification` - Semantic nodes: 11 - Source demo: `docs/src/pages/components/notification/demo/_semantic.vue` - `root`: Notice root element, set background color, border radius, shadow, padding and animation styles - `wrapper`: Wrapper element for icon and content with content layout styles - `icon`: Icon element, set absolute positioning, font size, line height and status color styles - `section`: Content section element that contains title and description - `title`: Title element, set color, font size, line height and margin styles - `description`: Description element, set font size, color and margin styles - `close`: Close button element, set position, size and interaction styles - `actions`: Actions element, set float right, top margin and action button layout styles - `progress`: Progress element, set progress styles for auto-closing notifications - `list`: Notification list root element, set positioning, z-index, width, scroll area and placement styles - `listContent`: Notification list content element, set notice layout, gap and height transition styles ### otp - Component: `input` - Variant: `otp` - Semantic nodes: 3 - Source demo: `docs/src/pages/components/input/demo/_semantic-otp.vue` - `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`: Input element with core interactive styles and text input related styling - `separator`: Separator element, set separator display styles between OTP input boxes ### pagination - Component: `pagination` - Semantic nodes: 2 - Source demo: `docs/src/pages/components/pagination/demo/_semantic.vue` - `root`: Root element, set flex layout, alignment, flex wrap and list styles - `item`: Item element, set size, padding, border, background color, hover state and active state styles ### popconfirm - Component: `popconfirm` - Semantic nodes: 6 - Source demo: `docs/src/pages/components/popconfirm/demo/_semantic.vue` - `root`: Root element, set absolute positioning, z-index, transform origin, arrow direction and popover container styles - `container`: Container element, set background color, padding, border radius, shadow, border and content display styles - `title`: Title element, set title text styles and spacing - `content`: Description element, set content text styles and layout - `icon`: Icon element, set icon size, color and margin styles - `arrow`: Arrow element with width, height, position, color and border styles ### popover - Component: `popover` - Semantic nodes: 5 - Source demo: `docs/src/pages/components/popover/demo/_semantic.vue` - `root`: Root element, set absolute positioning, z-index, transform origin, arrow direction and popover container styles - `container`: Container element, set background color, padding, border radius, shadow, border and content display styles - `title`: Title element, set title text styles and spacing - `content`: Content element, set content text styles and layout - `arrow`: Arrow element with width, height, position, color and border styles ### progress - Component: `progress` - Semantic nodes: 5 - Source demo: `docs/src/pages/components/progress/demo/_semantic.vue` - `root`: Root element, set relative positioning and basic container styles - `body`: Body element, set progress bar layout and size styles - `rail`: Rail element, set background track color and border radius styles. Not exist in steps mode - `track`: Track element, set progress fill color and transition animation styles - `indicator`: Indicator element, set percentage text or icon position and font styles ### qrCode - Component: `qr-code` - Semantic nodes: 2 - Source demo: `docs/src/pages/components/qr-code/demo/_semantic.vue` - `root`: Root element, set flex layout, padding, background color, border, border radius and relative positioning styles - `cover`: Cover element, set absolute positioning, z-index, background color and loading state overlay styles ### radio - Component: `radio` - Semantic nodes: 3 - Source demo: `docs/src/pages/components/radio/demo/_semantic.vue` - `root`: Root element with layout styles, cursor styles, disabled text color and other basic container styles - `icon`: Icon element with border radius, transition animations, border styles, hover states, focus states and other interactive styles - `label`: Label element with padding, text color, disabled states, alignment and other text styles ### result - Component: `result` - Semantic nodes: 6 - Source demo: `docs/src/pages/components/result/demo/_semantic.vue` - `root`: Root element with text alignment, layout styles and other basic container styles - `icon`: Icon element with margin, text alignment, font size, status colors and other icon styles - `title`: Title element with font size, text color, line height, text alignment and other text styles - `subTitle`: Subtitle element with font size, text color, line height and other text styles - `extra`: Action area element with margin, text alignment, inner element spacing and other layout styles - `body`: Content element with margin, padding, background color and other content area styles ### ribbon - Component: `badge` - Variant: `ribbon` - Semantic nodes: 3 - Source demo: `docs/src/pages/components/badge/demo/_semantic_ribbon.vue` - `root`: Root element, set relative positioning and wrapper container styles - `indicator`: Indicator element, set absolute positioning, padding, background color, border radius and ribbon styles - `content`: Content element, set text color and ribbon content display styles ### segmented - Component: `segmented` - Semantic nodes: 4 - Source demo: `docs/src/pages/components/segmented/demo/_semantic.vue` - `root`: Root element with inline-block layout, padding, background, border radius, transition and container styles - `item`: Option element with relative positioning, text alignment, cursor style, transition, selected state background and hover styles - `label`: Label content element with min height, line height, padding, text ellipsis and content layout styles - `icon`: Icon element with icon size, color and text spacing styles ### select - Component: `select` - Semantic nodes: 13 - Source demo: `docs/src/pages/components/select/demo/_semantic.vue` - `root`: Root element with relative positioning, inline-flex layout, cursor styles, transitions, border and other basic selector container styles - `prefix`: Prefix element with layout and styling for prefix content - `content`: Multiple selection container with layout, spacing, and wrapping styles for selected items - `placeholder`: Placeholder element with font styles and colors for placeholder text - `clear`: Clear button element with layout, styling and interactive effects for clear button - `input`: Input element with search input styling, cursor control, font inheritance and other search-related styles. Remove border styles - `suffix`: Suffix element with layout and styling for suffix content like clear button, arrow icon, etc. - `popup`: - `root`: Popup element with popup layer positioning, z-index, background, border, box-shadow and other popup container styles - `list`: Popup list element with option list layout, scrolling, max-height and other list container styles - `listItem`: Popup item element with option item padding, hover effects, selected states, disabled states and other option interactive styles - `item`: Multiple selection item element with border, background, padding, and margin styles - `itemContent`: Multiple selection item content area with text ellipsis styles - `itemRemove`: Multiple selection item remove button with font-related styless ### skeleton - Component: `skeleton` - Semantic nodes: 6 - Source demo: `docs/src/pages/components/skeleton/demo/_semantic.vue` - `root`: Root element with table display, width, animation effects, border radius and other skeleton container basic styles - `header`: Header element with table cell, padding, vertical alignment and other avatar placeholder area layout styles - `section`: Section element with skeleton content area layout styles - `avatar`: Avatar element with inline-block display, vertical alignment, background color, size, border radius and other avatar placeholder styles - `title`: Title element with width, height, background color, border radius and other title placeholder styles - `paragraph`: Paragraph element with padding, list item styles, background color, border radius and other paragraph placeholder styles ### skeleton:element - Component: `skeleton` - Variant: `element` - Semantic nodes: 2 - Source demo: `docs/src/pages/components/skeleton/demo/_semantic_element.vue` - `root`: Root element - `content`: Content element ### slider - Component: `slider` - Semantic nodes: 5 - Source demo: `docs/src/pages/components/slider/demo/_semantic.vue` - `root`: Root element with relative positioning, height, margin, padding, cursor style and touch action control - `track`: Track selection bar element with absolute positioning, background color, border radius and transition animation styles - `tracks`: Multi-segment track container element with absolute positioning and transition animation styles - `rail`: Background rail element with absolute positioning, background color, border radius and transition animation styles - `handle`: Slider handle control element with absolute positioning, size, outline, user selection, background color, border shadow, border radius, cursor style and transition animation ### space - Component: `space` - Semantic nodes: 3 - Source demo: `docs/src/pages/components/space/demo/_semantic.vue` - `root`: Root element with flex layout, gap settings, alignment, wrap and other spacing container basic styles - `item`: Wrapped item element with spacing item layout and styles, providing wrapper for each child element for inline alignment - `separator`: Separator element with divider styling ### spin - Component: `spin` - Semantic nodes: 2 - Source demo: `docs/src/pages/components/spin/demo/_semantic.vue` - `root`: Root element with absolute positioning, display control, color, font size, text alignment, vertical alignment, opacity and transition animation (effective when fullscreen is false) - `indicator`: Indicator element with width, height, font size, inline-block display, transition animation, transform origin, line height and color ### splitter - Component: `splitter` - Semantic nodes: 3 - Source demo: `docs/src/pages/components/splitter/demo/_semantic.vue` - `root`: Root element with flex layout, width and height, alignment and stretch styles - `panel`: Panel element with flex basis, grow ratio and panel container styles - `dragger`: Drag control element with absolute positioning, user selection, z-index, center alignment, background color, hover and active states styles ### statistic - Component: `statistic` - Semantic nodes: 7 - Source demo: `docs/src/pages/components/statistic/demo/_semantic.vue` - `root`: Root element with reset styles and overall container styles for statistic component - `header`: Header element with bottom padding and title area layout styles - `title`: Title element with text color, font size and other title text display styles - `prefix`: Prefix element with inline-block display, right margin and other prefix content layout styles - `content`: Content element with text color, font size, font family and other numeric content display styles - `value`: Value element with text color, font size, font family and other statistic number display styles - `suffix`: Suffix element with inline-block display, left margin and other suffix content layout styles ### steps - Component: `steps` - Semantic nodes: 10 - Source demo: `docs/src/pages/components/steps/demo/_semantic.vue` - `root`: Root element with flex layout, nowrap, alignment, CSS variables and other basic step container styles - `item`: Step item element with flex layout, relative positioning and other basic step item container styles - `itemWrapper`: Step item wrapper element with flex layout, nowrap, top padding and other step content wrapping styles - `itemIcon`: Step item icon element with icon size, positioning, font-size and other icon display related styles - `itemHeader`: Step item header element with flex layout, nowrap, alignment and other header area layout styles - `itemTitle`: Step item title element with color, font-size, line-height, word-break, transitions and other title text styles - `itemSubtitle`: Step item subtitle element with color, font-weight, font-size, line-height, margin, word-break and other subtitle styles - `itemSection`: Step item section element with step content area layout and styling - `itemContent`: Step item content element with color, font-size, line-height, word-break, transitions and other content text styles - `itemRail`: Step item rail element with border-style, border-width, transitions and other connecting line styles ### switch - Component: `switch` - Semantic nodes: 3 - Source demo: `docs/src/pages/components/switch/demo/_semantic.vue` - `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`: Content element with block display, overflow hidden, border radius, height, padding, transition animations and other switch content area layout and styles - `indicator`: Indicator element with absolute positioning, width, height, background color, border radius, shadow, transition animations and other switch handle styles and interactive effects ### table - Component: `table` - Semantic nodes: 13 - Source demo: `docs/src/pages/components/table/demo/_semantic.vue` - `root`: Root element with font-size, background, border-radius, scrollbar-color and other basic table container styles - `title`: Title element with table title styling and layout - `content`: Content element with table content area styling and layout - `header`: - `wrapper`: Header wrapper element with table header layout and container styles - `row`: Header row element with table header row layout and styling - `cell`: Header cell element with relative positioning, padding, word-wrap, background, text color, font-weight and other header cell styles - `section`: Container element with clear-fix, max-width, scrollbar background and other table wrapper styles - `body`: - `wrapper`: Body wrapper element with table body layout and container styles - `row`: Body row element with hover effects, selected states, expanded states and other interactive row styles - `cell`: Body cell element with relative positioning, padding, word-wrap and other basic data cell styles - `footer`: Footer element with table footer background color, text color and other footer styles - `pagination`: - `root`: Pagination root element with pagination component basic styles and layout - `item`: Pagination item element with pagination item styling and interactive effects ### tabs - Component: `tabs` - Semantic nodes: 7 - Source demo: `docs/src/pages/components/tabs/demo/_semantic.vue` - `root`: Root element with basic tab container styles, layout and direction control - `header`: Header element with tab navigation header layout, background, borders and other styles - `item`: Item element with relative positioning, padding, colors, text ellipsis, border-radius, transitions and other tab item styles and interactive effects - `indicator`: Indicator element with indicator bar color, position, dimensions, transitions and other active state indication styles - `body`: Body element with tab panel container layout, animation and size control styles - `content`: Content element with single tab panel layout, padding and other content display styles - `popup`: - `root`: Popup menu element with dropdown absolute positioning, z-index, display control, max-height, scrolling and other styles ### tag - Component: `tag` - Semantic nodes: 4 - Source demo: `docs/src/pages/components/tag/demo/_semantic.vue` - `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`: Icon element with font size, color, cursor style, transition animations and other icon display styles - `content`: Content element with text content color, font styles and other content area styles - `close`: Close element with close button layout, cursor styles, transition animations and other interaction styles ### textArea - Component: `input` - Variant: `textarea` - Semantic nodes: 3 - Source demo: `docs/src/pages/components/input/demo/_semantic-textarea.vue` - `root`: Root element with textarea wrapper styles, border, border radius, transition animation and state control - `textarea`: Textarea element with font, line height, padding, color, background, border, text input and multi-line text display styles - `count`: Count element with character count display position, font, color and numeric statistics styles ### timeline - Component: `timeline` - Semantic nodes: 9 - Source demo: `docs/src/pages/components/timeline/demo/_semantic.vue` - `root`: Root element with timeline container list style reset, vertical layout, dot icon, outlined style, alternate layout and other basic container styles - `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`: Item wrapper element with timeline node content wrapping container styles - `itemIcon`: Item icon element with node head icon absolute positioning, width/height size, background color, border, border radius, wave animation and other icon styles - `itemSection`: Item section element with section container containing header and content flex layout, wrap, gap and other layout styles - `itemHeader`: Item header element with header area layout containing title and rail, alignment, text direction and other styles - `itemTitle`: Item title element with node title text font size, line height, color and other text styles - `itemContent`: Item content element with node detail content relative positioning, top offset, left margin, text color, word break and other content styles - `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 ### timePicker - Component: `time-picker` - Semantic nodes: 9 - Source demo: `docs/src/pages/components/time-picker/demo/_semantic.vue` - `root`: Root element with relative positioning, inline-flex layout, padding, border-radius, transition animations and other basic styles for time picker container - `prefix`: Prefix element with flex layout and margin styles for prefix content layout - `input`: Input element with relative positioning, width, color, font, line-height, transition animations and other core interactive styles for input field - `suffix`: Suffix element with flex layout, color, line-height, pointer events, transition animations and other styles for suffix content - `popup`: - `root`: Popup element - `container`: Container element, set background color, padding, border radius, shadow, border and content display styles - `content`: Popup content element with width, border, cell and other content display styles for time list - `item`: Popup item element with size, background, border-radius, hover state, selected state and other interactive styles for time cells - `footer`: Popup footer element with layout styles for bottom operation area including confirm/cancel buttons ### tooltip - Component: `tooltip` - Semantic nodes: 3 - Source demo: `docs/src/pages/components/tooltip/demo/_semantic.vue` - `root`: Root element (including arrows, content elements) with absolute positioning, z-index, block display, max width, visibility, transform origin and arrow background color - `container`: Content element with min width and height, padding, color, text alignment, background color, border radius, shadow and border styles - `arrow`: Arrow element with width, height, position, color and border styles ### tour - Component: `tour` - Semantic nodes: 12 - Source demo: `docs/src/pages/components/tour/demo/_semantic.vue` - `root`: Tour root container with absolute positioning, z-index control, max width, visibility, arrow background color variable, theme styles and other container styles - `mask`: Mask layer element with fixed positioning, full screen coverage, z-index, pointer events, transition animation and other mask styles - `section`: Card main content area with text alignment, border radius, box shadow, relative positioning, background color, border, background clip and other card styles - `cover`: Card cover area with text center alignment, padding, image width and other image display styles - `header`: Card header area with padding, width calculation, word break and other header container styles - `title`: Guide title text with font weight and other title text styles - `description`: Guide description text with padding, word wrap and other description text styles - `footer`: Card bottom action area with padding, text right alignment, border radius, flex layout and other bottom container styles - `actions`: Action button group container with left auto margin, button spacing and other button group layout styles - `indicators`: Indicator group container with inline-block display and other indicator container styles - `indicator`: Single indicator element with width/height size, inline-block display, border radius, background color, right margin, active state and other dot styles - `close`: Close button element with absolute positioning, size, color, hover state and interaction feedback styles ### transfer - Component: `transfer` - Semantic nodes: 13 - Source demo: `docs/src/pages/components/transfer/demo/_semantic.vue` - `root`: Root element with flex layout, transfer container base styles and layout control - `section`: Section element with flex layout, width, height, min height, border, border radius and other single-side transfer container styles - `header`: Header element with flex layout, alignment, height, padding, color, background color, bottom border, border radius and other header area styles - `title`: Title element with text ellipsis, flex ratio, text alignment, auto left margin and other title text layout and styles - `body`: Body element with list main area container styles and layout control - `list`: List element with list content styles, layout and scroll control - `item`: List item element with relative positioning, padding, border, hover state, selected state, disabled state and other list item interaction styles - `itemIcon`: List item icon element with checkbox and other icon styles and interaction states - `itemContent`: List item content element with text ellipsis, padding and other list item text content display styles - `footer`: Footer element with bottom operation area styles and layout - `actions`: Actions element with transfer button group styles, layout and interaction states - `source`: Source-side (left) overrides nested under the same shared semantic keys (section/header/title/body/list/item/itemIcon/itemContent/footer); only the source list picks them up - `target`: Target-side (right) overrides nested under the same shared semantic keys (section/header/title/body/list/item/itemIcon/itemContent/footer); only the target list picks them up ### tree - Component: `tree` - Semantic nodes: 5 - Source demo: `docs/src/pages/components/tree/demo/_semantic.vue` - `root`: Root element with tree control base styles, layout and container control - `item`: Item element with tree node base styles, drag state, role attributes, indentation, switcher, content wrapper and other node structure - `itemIcon`: Icon element with tree node icon styles, size and state display - `itemTitle`: Title element with tree node title text display styles and text content - `itemSwitcher`: Switcher element with tree node expand/collapse button styles and background ### treeSelect - Component: `tree-select` - Semantic nodes: 13 - Source demo: `docs/src/pages/components/tree-select/demo/_semantic.vue` - `root`: Root element with tree selector base styles, border, border radius container styles - `prefix`: Prefix element with prefix content layout and styles - `placeholder`: Placeholder element with font styles and colors for placeholder text - `content`: Multiple selection container with layout, spacing, and wrapping styles for selected items - `item`: Multiple selection item element with border, background, padding, and margin styles - `itemContent`: Multiple selection item content area with text ellipsis styles - `itemRemove`: Multiple selection item remove button with font-related styles - `input`: Input element with text input, search, selected value display and other input core interaction styles - `suffix`: Suffix element with suffix content, clear button, dropdown arrow and other suffix area styles - `popup`: - `root`: Popup element with dropdown tree selection panel positioning, z-index, background, border, shadow and other popup layer styles - `item`: Popup item element with tree node option styles, hover state, selected state and other interaction states - `itemTitle`: Popup title element with tree node title text display styles - `itemSwitcher`: Popup switcher element with tree node expand/collapse button styles and background ### typography - Component: `typography` - Semantic nodes: 4 - Source demo: `docs/src/pages/components/typography/demo/_semantic.vue` - `root`: Root element with base typography styles, layout, and positioning - `actions`: Actions element with layout and spacing styles for copy, edit, expand/collapse buttons - `action`: Individual action button element including copy, edit, expand, collapse button styles like padding, border radius, colors, etc. - `textarea`: TextArea element in editable mode, used to customize className and inline styles for the edit input ### upload - Component: `upload` - Semantic nodes: 3 - Source demo: `docs/src/pages/components/upload/demo/_semantic.vue` - `root`: Root container element with layout styles, disabled text color, user-select control, cursor styles and other basic styles - `list`: File list container with layout arrangement, transition animations, spacing control and other styles - `item`: File item element with padding, background color, border styles, hover effects, status colors, transition animations and other styles