cn hx components Separator - bradwoo8621/hx GitHub Wiki

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' });
⚠️ **GitHub.com Fallback** ⚠️