Separator & Kbd 分隔线与按键

在视觉或语义上分隔内容。用于显示键盘输入的按键。

分隔线

Column({ space: 4 }) {
  Text('Radix Primitives')
  Text('An open-source UI component library.')
}
SSeparator()
Row({ space: 16 }) {
  Text('Blog')
  SSeparator({ orientation: 'vertical' })
  Text('Docs')
  SSeparator({ orientation: 'vertical' })
  Text('Source')
}.height(20)

网页近似预览，真机效果以 HarmonyOS 渲染为准。

标签与线型

label 配合 labelAlignment start | center | end；lineStyle solid | dashed | dotted；thickness 线宽。

SSeparator({ label: 'OR CONTINUE WITH' })
SSeparator({ label: 'Today', labelAlignment: 'start' })
SSeparator({ label: 'End of results', labelAlignment: 'end', lineStyle: 'dashed' })
SSeparator({ lineStyle: 'dashed' })
SSeparator({ lineStyle: 'dotted', thickness: 2 })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

按键

SKbdGroup() {
  SKbd({ icon: 'command' })
  SKbd({ text: '⇧' })
  SKbd({ text: '⌥' })
  SKbd({ text: '⌃' })
}
SKbdGroup() {
  SKbd({ text: 'Ctrl' })
  Text('+')
  SKbd({ text: 'B' })
}
SKbd({ icon: 'corner-down-left' })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

尺寸、键帽与组合键

sizing sm | default | lg；variant 'outline'；SKbdGroup({ keys })。

SKbd({ text: 'Esc', sizing: 'sm' })
SKbd({ text: 'Esc' })
SKbd({ text: 'Esc', sizing: 'lg' })
SKbd({ text: 'Esc', variant: 'outline', sizing: 'lg' })
// combos from strings; cmd / enter / arrows become icons
SKbdGroup({ keys: ['Ctrl', 'Shift', 'P'], separator: '+' })
SKbdGroup({ keys: ['cmd', 'K'], variant: 'outline' })
SKbdGroup({ keys: ['G', 'H'], separator: 'then' })
SKbdGroup({ keys: ['up', 'down', 'enter'], sizing: 'sm' })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SSeparator

shadcn-vue 的 Separator：bg-border shrink-0，水平时高 1px（占满宽度），垂直时宽 1px（占满父容器的高度——请为父容器设置高度，如 shadcn 的 h-5）。

变体：lineStyle 取 solid | dashed | dotted，thickness，以及在水平线中间断开的 label（「OR CONTINUE WITH」），由 labelAlignment 取 start | center | end 决定位置。

属性	类型	默认值	说明
orientation	SeparatorOrientation SeparatorOrientation = 'horizontal' | 'vertical'	'horizontal'
decorative	boolean	true	纯视觉元素（对无障碍屏蔽）。当它用于分隔有意义的分组时，请设为 false。
length	Length	'100%'	可选的显式长度；默认为沿方向占父容器的 100%。
lineStyle	SeparatorLineStyle SeparatorLineStyle = 'solid' | 'dashed' | 'dotted'	'solid'
thickness	number	1	线条粗细，单位 vp。
label	ResourceStr | undefined	undefined	切入水平分隔线中的文字。
labelAlignment	SeparatorLabelAlignment SeparatorLabelAlignment = 'start' | 'center' | 'end'	'center'

SKbd

shadcn-vue 的 Kbd：bg-muted text-muted-foreground h-5 min-w-5 rounded-sm px-1 font-sans text-xs font-medium。

变体：sizing 取 sm（16）| default（20）| lg（24），variant 取 default | outline（键帽外观）。

属性	类型	默认值	说明
text	ResourceStr | undefined	undefined
icon	string | undefined	undefined	lucide 图标名称，例如 command、corner-down-left。
sizing	KbdSize KbdSize = 'sm' | 'default' | 'lg'	'default'
variant	KbdVariant KbdVariant = 'default' | 'outline'	'default'

插槽: 子组件（尾随闭包）

SKbdGroup

shadcn-vue 的 KbdGroup：inline-flex items-center gap-1。

keys 由字符串渲染出快捷键，并以 separator 连接（默认无分隔符）；常见名称（cmd / command / meta、enter / return、up / down / left / right）会转换为图标。

属性	类型	默认值	说明
keys	string[]	[]
separator	string	''	按键之间的文字，例如 '+' 或 'then'。
sizing	KbdSize KbdSize = 'sm' | 'default' | 'lg'	'default'
variant	KbdVariant KbdVariant = 'default' | 'outline'	'default'

插槽: 子组件（尾随闭包）