Descriptions
Displays multiple read-only fields in groups, commonly used for displaying information on detail pages.
Basic Usage
Application Details
| App ID: | YH-Admin-Edge | Version: | v2.5.4-Stable | Node: | Production-Cluster-01 |
|---|---|---|---|---|---|
| Status: | Running | Entry: | No.1188, Wuzhong Avenue, Wuzhong District, Production-Cluster-01, Jiangsu Province | ||
Application Details
| App ID | YH-Admin-Edge | Version | v2.5.4-Stable | Node | Production-Cluster-01 |
|---|---|---|---|---|---|
| Status | Running | Entry | No.1188, Wuzhong Avenue, Wuzhong District, Production-Cluster-01, Jiangsu Province | ||
Basic Usage
Custom Sizes
Vertical Layout with Border
| App ID | Version | Node |
|---|---|---|
| YH-Admin-Edge | v2.5.4-Stable | Production-Cluster-01 |
| Status | Entry | |
| Running | No.1188, Wuzhong Avenue, Wuzhong District, Production-Cluster-01, Jiangsu Province | |
Vertical Layout without Border
| App ID | Version | Node |
|---|---|---|
| YH-Admin-Edge | v2.5.4-Stable | Production-Cluster-01 |
| Status | Entry | |
| Running | No.1188, Wuzhong Avenue, Wuzhong District, Production-Cluster-01, Jiangsu Province | |
Custom Sizes
Long Content
When a description item contains long text, the component automatically wraps lines and displays them correctly.
Long Content Display
| Product Name | Apple MacBook Pro 16-inch M3 Max Chip Laptop | Price | $3,499.00 |
|---|---|---|---|
| Description | Equipped with the M3 Max chip, featuring a 14-core CPU, 30-core GPU, and 16-core Neural Engine. Supports up to 128GB of unified memory and up to 8TB of storage space. 16.2-inch Liquid Retina XDR display with peak brightness up to 1600 nits, ProMotion adaptive refresh rate technology, and True Tone display. MagSafe 3 charging port, three Thunderbolt 4 ports, HDMI port, SDXC card slot, high-impedance headphone jack. Six-speaker sound system with spatial audio. 1080p FaceTime HD camera. Touch ID. Magic Keyboard with a full-height function key row (including Touch ID). Force Touch trackpad. Up to 22 hours of battery life. | ||
| Tags | OfficialLimited OfferHot Sale | Status | In Stock |
Long Content
Custom Styles
Core Performance Panel
| App ID | YH-Admin-Edge | Version | v2.5.4-Stable | Node | Production-Cluster-01 |
|---|---|---|---|---|---|
| Status | Running | Entry | No.1188, Wuzhong Avenue, Wuzhong District, Production-Cluster-01, Jiangsu Province | ||
Custom Styles
Use in Nuxt
Descriptions component fully supports SSR rendering in Nuxt 3/4. It's automatically imported in Nuxt projects.
User Details
| Username | YH-Admin-Edge | test@example.com | Registration Time | 2024-01-01 |
|---|
Use in Nuxt
SSR Notes:
- ✅ Fully supports all Props and styles
- ✅ Renders slot content correctly
- ✅ Dynamic size switching works as expected
- ✅ Custom styles are SSR-safe
SSR Safety
The Descriptions component has undergone comprehensive SSR testing to ensure server and client rendering are perfectly consistent.
API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| title | Title of the list | string | — |
| extra | Extra operation area text, can also be passed via extra slot | string | — |
| border | Whether to show border | boolean | false |
| column | Number of columns per row | number | 3 |
| direction | Arrangement direction | 'horizontal' | 'vertical' | 'horizontal' |
| size | List size | 'large' | 'default' | 'small' | 'default' |
| colon | Whether to show colon (works when no border) | boolean | true |
| label-style | Custom label style | CSSProperties | — |
| content-style | Custom content style | CSSProperties | — |
| label-class-name | Custom label class name | string | — |
| content-class-name | Custom content class name | string | — |
Item Props
| Prop | Description | Type | Default |
|---|---|---|---|
| label | Label text | string | — |
| span | Number of columns occupied | number | 1 |
| width | Column width | string | number | — |
| min-width | Minimum column width | string | number | — |
| align | Content alignment | 'left' | 'center' | 'right' | 'left' |
| label-align | Label alignment | 'left' | 'center' | 'right' | 'left' |
| class-name | Custom content class name | string | — |
| label-class-name | Custom label class name | string | — |
| label-style | Custom label style | CSSProperties | — |
| content-style | Custom content style | CSSProperties | — |
Slots
| Slot Name | Description |
|---|---|
| default | Content of descriptions, usually YhDescriptionsItem |
| title | Custom title, overrides title prop |
| extra | Custom extra area, overrides extra prop |
Item Slots
| Slot Name | Description |
|---|---|
| default | Item content |
| label | Custom label content, overrides label prop |
Expose
| Prop | Description | Type |
|---|---|---|
| — | No exposed attributes | — |
Theme Variables
The Descriptions component uses the following CSS variables for customization:
| Variable | Description | Default |
|---|---|---|
--yh-descriptions-header-margin-bottom | Margin bottom of header | 20px |
--yh-descriptions-title-font-size | Title font size | 16px |
--yh-descriptions-extra-font-size | Extra area font size | 14px |
--yh-descriptions-border-color | Border color | var(--yh-border-color-lighter) |
--yh-descriptions-item-font-size | Cell font size | — |
--yh-descriptions-cell-padding-v | Cell vertical padding | — |
--yh-descriptions-cell-padding-h | Cell horizontal padding | — |
Size System Variables
The size attribute automatically toggles --yh-descriptions-item-font-size and padding variables. These variables are associated with the global YH-UI size system (e.g., --yh-component-size-default-padding) to ensure consistent sizing across the library.