Divider 分割线

开启新的篇章

import { DuDivider } from 'dangoui'

示例

各种例子

垂直模式不支持 slot

<template>
  <PreviewBlock title="默认">
    <DuDivider />
  </PreviewBlock>
  <PreviewBlock title="带文字">
    <DuDivider>分割线</DuDivider>
  </PreviewBlock>
  <PreviewBlock title="垂直">
    <div class="flex items-center gap-x-8px">
      <DuButton
        color="default"
        type="text"
        size="mini"
        icon="multiselection"
      >
        同时搜多款
      </DuButton>
      <DuDivider type="vertical" />
      <DuButton
        color="default"
        type="text"
        size="mini"
        icon="info-circle"
      >
        规格说明
      </DuButton>
    </div>
  </PreviewBlock>
  <PreviewBlock title="水平/指定长度">
    <div class="flex flex-auto justify-center items-center">
      <DuDivider type="horizontal" :length="240" />
    </div>
  </PreviewBlock>
  <PreviewBlock title="垂直/指定高度">
    <div class="flex items-center gap-x-8px">
      <DuButton
        color="default"
        type="text"
        size="mini"
        icon="multiselection"
      >
        同时搜多款
      </DuButton>
      <DuDivider type="vertical" :length="12" />
      <DuButton
        color="default"
        type="text"
        size="mini"
        icon="info-circle"
      >
        规格说明
      </DuButton>
    </div>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuDivider, DuButton } from 'dangoui'
</script>

各种颜色

<template>
  <PreviewBlock title="使用色板中的颜色">
    <DuDivider color="success-soft-bg" />
  </PreviewBlock>
  <PreviewBlock title="指定颜色">
    <DuDivider color="rgba(0,0,0,0.4)" />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuDivider } from 'dangoui'
</script>

API

属性

属性名	类型	默认值	说明
type	`"horizontal" \| "vertical"`	-	分割线水平或者竖直
length	`string \| number`	-	分割线长度，默认为 100%
color	`string`	-	色彩，可以使用合法的 CSS 颜色值或者色板中具体的颜色名（如 primary-solid-color）

插槽

名称
default

TODO

没想要不要给 Divider 默认的 padding