Divider (分割线)

<template>
  <div class="w-full max-w-md">
    <p class="text-default-600 text-sm">第一部分内容</p>
    <KunDivider />
    <p class="text-default-600 text-sm">第二部分内容</p>
  </div>
</template>

<template>
  <div class="w-full max-w-md">
    <p class="text-default-600 text-sm">使用第三方账号登录</p>
    <KunDivider>或</KunDivider>
    <p class="text-default-600 text-sm">使用邮箱登录</p>
  </div>
</template>

<template>
  <div class="flex h-10 items-center gap-3">
    <span class="text-default-600 text-sm">首页</span>
    <KunDivider orientation="vertical" />
    <span class="text-default-600 text-sm">文档</span>
    <KunDivider orientation="vertical" />
    <span class="text-default-600 text-sm">关于</span>
  </div>
</template>

<template>
  <div class="w-full max-w-md">
    <p class="text-default-600 text-sm">实线分割线</p>
    <KunDivider border-style="solid" />
    <p class="text-default-600 text-sm">虚线分割线</p>
    <KunDivider border-style="dashed" />
  </div>
</template>

<template>
  <div class="flex w-full max-w-md flex-col gap-3">
    <KunDivider color="default" />
    <KunDivider color="primary" />
    <KunDivider color="secondary" />
    <KunDivider color="success" />
    <KunDivider color="warning" />
    <KunDivider color="danger" />
    <KunDivider color="info" />
  </div>
</template>