# Separator 分隔线

一个简单的水平分隔线组件，用于视觉上分割内容区域。

## 特性

- **自定义高度**: 可设置分隔线的高度
- **自定义样式**: 可应用自定义CSS样式
- **轻量级**: 最小化实现，最大化灵活性

## 安装

```bash
npm install @ticatec/uniface-element
```

```typescript
import Separator from '@ticatec/uniface-element/Separator';
```

## 基本用法

```svelte
<script>
  import Separator from '@ticatec/uniface-element/Separator';
</script>

<div>
  <h2>第1节</h2>
  <p>第1节的内容</p>

  <Separator />

  <h2>第2节</h2>
  <p>第2节的内容</p>
</div>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
|------|------|---------|-------------|
| `height` | `string` | `'24px'` | 分隔线的高度 |
| `style` | `string` | `''` | 附加CSS样式 |

## 示例

### 自定义高度

```svelte
<script>
  import Separator from '@ticatec/uniface-element/Separator';
</script>

<!-- 细分隔线 -->
<Separator height="8px" />

<!-- 默认高度 -->
<Separator height="24px" />

<!-- 粗分隔线 -->
<Separator height="48px" />
```

### 自定义样式

```svelte
<script>
  import Separator from '@ticatec/uniface-element/Separator';
</script>

<Separator
  height="2px"
  style="background: linear-gradient(90deg, transparent, #ccc, transparent);"
/>
```

### 多个分隔线

```svelte
<script>
  import Separator from '@ticatec/uniface-element/Separator';
</script>

<div class="content">
  <h3>标题</h3>
  <p>内容在这里</p>

  <Separator height="16px" />

  <h3>小节</h3>
  <p>更多内容</p>

  <Separator height="32px" style="background-color: #007acc;" />

  <h3>页脚节</h3>
</div>
```

## 最佳实践

1. **视觉层次**: 使用分隔线高度建立视觉层次
2. **间距**: 调整高度来控制区域之间的空白
3. **一致性**: 在整个应用中保持分隔线样式一致
4. **简约设计**: 保持分隔线微妙，避免主导布局