cn hx components Separator

HxSeparator

视觉分割线。渲染 <div>。

// 水平分割线，带垂直边距
<HxSeparator direction="dir-x" color="waive" marginY="md" />

// 垂直分割线（行内元素间）
<HxFlex direction="dir-x" alignItems="center">
  <span>左侧</span>
  <HxSeparator direction="dir-y" marginX="sm" />
  <span>右侧</span>
</HxFlex>

Props

Prop	类型	默认值	说明
direction	'dir-x' | 'dir-y'	'dir-x'	方向。'dir-x' = 水平线，'dir-y' = 垂直线
color	HxColor	—	线条颜色
size	尺寸令牌	—	线条长度（水平）或高度（垂直），粗细固定为 1px
marginX	尺寸令牌	none	水平外边距
marginY	尺寸令牌	none	垂直外边距
$model	HxObject<T>	—	响应式模型

原生 DOM 事件

所有标准 <div> 事件透传。作为视觉分割线，实际中很少需要 DOM 事件监听。

全局配置

import { configHxSeparator } from '@hx/components';
configHxSeparator({ color: 'waive' });