Separator - 分隔线

Demo

Last Changed

7 minutes ago

separator/demo.vue

云端之上

缤纷多彩

云

乐

坊

<template>
  <div class="flex flex-col gap-4">
    <div class="text-sm">
      <p class="m-0">
        云端之上
      </p>
      <YlfSeparator class="my-3" />
      <p class="m-0">
        缤纷多彩
      </p>
    </div>
    <div class="flex items-center gap-3 text-sm">
      <span>云</span>
      <YlfSeparator orientation="vertical" class="h-4!" />
      <span>乐</span>
      <YlfSeparator orientation="vertical" class="h-4!" />
      <span>坊</span>
    </div>
  </div>
</template>

分隔线：基于 reka-ui，支持水平 / 垂直与语义化（decorative 控制是否对屏幕阅读器可见）。

Props

属性	说明	类型	默认值
orientation	方向	horizontal | vertical	horizontal
decorative	仅装饰	boolean	true