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

LargeDefaultSmall

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	Email	test@example.com	Registration Time	2024-01-01

Use in Nuxt

SSR Notes:

• Fully supports SSR-safe rendering for props, slots, and border layout
• Slot content and custom styles render consistently across server and client
• Size switching and vertical layout are driven by props only, so hydration stays stable

SSR Safety

The Descriptions component is table-like presentational UI driven entirely by props and slots, which makes it a naturally stable SSR component in Nuxt pages.

API

Props

Prop	Description	Type	Default
title	Title of the list	string	undefined
extra	Extra operation area text. Can also be provided through the extra slot	string	undefined
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 when border is disabled	boolean	true
label-style	Custom label style	CSSProperties	undefined
content-style	Custom content style	CSSProperties	undefined
label-class-name	Custom label class name	string	''
content-class-name	Custom content class name	string	''
theme-overrides	Component-level theme overrides	ComponentThemeVars	undefined

Types

Descriptions 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	undefined
content-style	Custom content style	CSSProperties	undefined

Slots

Component	Slot Name	Description
YhDescriptions	default	Content of descriptions, usually YhDescriptionsItem
YhDescriptions	title	Custom title, overrides title prop
YhDescriptions	extra	Custom extra area, overrides extra prop
YhDescriptionsItem	default	Item content
YhDescriptionsItem	label	Custom label content, overrides label prop

Events

This component does not expose component events.

Expose

This component does not expose public instance methods or properties.

Theme Variables

The Descriptions component uses the following CSS variables for customization:

Variable	Description	Default
--yh-descriptions-header-margin-bottom	Header bottom spacing	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	Uses the current size preset
--yh-descriptions-cell-padding-v	Cell vertical padding	Uses the current size preset
--yh-descriptions-cell-padding-h	Cell horizontal padding	Uses the current size preset

Size System Variables

The size prop automatically switches the item font size and padding variables so the component stays aligned with the shared YH-UI size system.

Type Exports

Name	Description
YhDescriptionsProps	Props type for YhDescriptions
YhDescriptionsSlots	Slots type for YhDescriptions
YhDescriptionsItemProps	Props type for YhDescriptionsItem
YhDescriptionsItemSlots	Slots type for YhDescriptionsItem
YhDescriptionsInstance	Public instance type for YhDescriptions
YhDescriptionsItemInstance	Public instance type for YhDescriptionsItem