组件

标签

在测量布局之外标明条件名称。

保留原样或大写

p-md · gap-sm

Aa

Collection / 024

Aa

Class names and values keep their case; a quiet heading may be uppercase.

为尺度添加标签

shadow-xs

Quiet separation

Small controls, table rows, and subtle raised states.

shadow-sm

Standard surface

Cards, reusable panels, and quiet product surfaces.

shadow-md

Temporary lift

Hover lift, floating toolbars, and command surfaces.

shadow-lg

Detached overlay

Dropdowns, popovers, toasts, and menus.

shadow-xl

Workflow interruption

Drawers, dialogs, and focused panels.

shadow-2xl

Blocking layer

Modals and spotlight surfaces above a dimmed page.

shadow-inset

Sunken well

Inputs, tracks, pressed states, and recessed wells.

使用于色彩指南.

用法与接口

DemoLabel 使用等宽标签字体渲染 span.ui-label。文字会按原样保留（data-case="as-is"），确保 class 名称与值准确；需要大写标题时可设置 upper。

<DemoLabel>shadow-sm</DemoLabel><DemoLabel upper>Collection / 024</DemoLabel>

<span class="ui-label" data-case="as-is">shadow-sm</span><span class="ui-label">Collection / 024</span>

除非标签本身就是教学主体，否则应放在需要测量的 flex、grid 或 float 父元素之外。