# Divider 分割线

用一条细线区隔相邻内容，把视觉上的「一个整体」切成有层级的几块。颜色、粗细、间距都通过 CSS 变量下发，改主题色时分割线会自动跟随。注意它的默认方向是**纵向**，横向分割线必须显式声明。

## 代码演示

### 横向分割线

横向分割线需要显式写 `:vertical="false"`，宽度恒为父容器宽度的 100%。

**演示说明：** `<MDivider />` 默认渲染的是纵向线，所以水平方向必须写 `:vertical="false"`。

```vue
<script setup lang="ts">
const blocks = ['上方内容区块', '下方内容区块']
</script>

<template>
  <div class="m-row-demo--stretch">
    <span>{{ blocks[0] }}</span>
    <MDivider :vertical="false" />
    <span>{{ blocks[1] }}</span>
  </div>
</template>
```

### 纵向分割线（默认）

纵向线的高度是父容器的 100%，所以父容器必须有确定高度，否则线会塌成 0。

**演示说明：** 这里把分割线放进一个高 48px 的 flex 行里，当成图标之间的分隔符使用。

```vue
<script setup lang="ts">
import { mdiContentCopy, mdiDeleteOutline, mdiPencilOutline } from '@mdi/js'
</script>

<template>
  <!-- 纵向分割线高度为 100%，父容器必须有确定高度 -->
  <div class="m-row-demo" style="height: 48px">
    <MIcon :path="mdiPencilOutline" :size="20" />
    <MDivider />
    <MIcon :path="mdiContentCopy" :size="20" />
    <MDivider />
    <MIcon :path="mdiDeleteOutline" :size="20" />
  </div>
</template>
```

### 颜色、粗细与间距

`color`、`size`、`gap` 三个属性会分别写进 `--m-divider-color`、`--m-divider-size`、`--m-divider-gap`。

**演示说明：** `size` 必须带单位（如 `2px`），`gap` 在横向线里表现为上下外边距、在纵向线里表现为左右外边距。

```vue
<script setup lang="ts">
interface Case {
  label: string
  color?: string
  size?: string
  gap?: string
}

const cases: Case[] = [
  { label: '默认：1px / --m-border / 上下间距 8px' },
  { label: '主色 2px，上下间距 20px', color: 'var(--m-primary)', size: '2px', gap: '20px' },
  { label: '错误色 4px，间距为 0', color: 'var(--m-error)', size: '4px', gap: '0' },
]
</script>

<template>
  <div class="m-row-demo--stretch">
    <template v-for="item in cases" :key="item.label">
      <span>{{ item.label }}</span>
      <MDivider :vertical="false" :color="item.color" :size="item.size" :gap="item.gap" />
    </template>
  </div>
</template>
```

### 列表分隔

在纵向堆叠的列表里用分割线切开每一项，是它最常见的用法。

**演示说明：** 循环渲染列表项，除最后一项外都插入一条分割线。

```vue
<script setup lang="ts">
const items = ['账户设置', '通知偏好', '安全与登录', '关于本产品']
</script>

<template>
  <div class="m-row-demo--stretch">
    <template v-for="(item, index) in items" :key="item">
      <span>{{ item }}</span>
      <MDivider v-if="index < items.length - 1" :vertical="false" gap="10px" />
    </template>
  </div>
</template>
```

## API

### Props

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `vertical` | `boolean` | `true` | 是否纵向。**默认为 `true`**，纵向时高度 100%、使用左边框；横向需显式传 `false` |
| `color` | `string` | `undefined`（回退 `var(--m-border)`） | 线条颜色，下发到 `--m-divider-color` |
| `size` | `string` | `undefined`（回退 `'1px'`） | 线条粗细，下发到 `--m-divider-size`；需要带单位 |
| `gap` | `string` | `'8px'` | 间距，下发到 `--m-divider-gap`；横向为上下外边距，纵向为左右外边距 |
| `width` | `string` | `undefined` | **声明了但实现中未引用**（横向宽度恒为 100%） |
| `height` | `string` | `'0'` | **声明了但实现中未引用**（横向高度恒为 0） |

### Events

无。

### Slots

无。

## 使用建议

::: tip 靠 CSS 变量定制，不靠新属性
组件把 `color` / `size` / `gap` 转成三个 CSS 变量再消费。需要更细的控制（虚线、渐变、动画）时，直接在自己的样式里覆盖 `--m-divider-color` 等变量或给容器加类名更省事，不必等组件加新属性。

```vue
<MDivider :vertical="false" color="var(--m-success)" size="2px" gap="16px" />
```
:::

::: warning vertical 默认是 true，这一点最容易踩
`<MDivider />` 默认渲染**纵向**线，横向写法必须显式声明：

```vue
<!-- 纵向：高度撑满父容器，父容器需要有确定高度 -->
<MDivider />

<!-- 横向：必须显式写 false -->
<MDivider :vertical="false" />
```

如果直接写 `<MDivider />` 却发现「什么都没显示」，通常是因为父容器没有高度，纵向线被压成了 0。
:::

::: warning width / height 两个属性目前不生效
`width` 与 `height` 都已声明在 props 里，但实现中并未使用：横向线宽度恒为容器的 100%、高度恒为 0，纵向线高度恒为 100%、宽度恒为 0。想改尺寸请通过间距和容器的尺寸来控制，不要指望这两个属性。
:::

## 相关组件

- [Icon 图标](/components/icon)：纵向分割线常用来分隔一排图标。
- [ButtonGroup 按钮组](/components/button-group)：如果目的是把按钮拼成整体，用按钮组而不是分割线。