Separator - 分隔线

Demo

更新日期

2026-09-25 UTC

separator/demo.vue

给生活一点颜色

六段纯色，连接云乐坊的每一份好奇。

探索工具 记录灵感 参加活动

正文分节保持安静

中性细线负责结构，彩色线用于品牌或分类。

探索

创作

分享

<template>
  <div class="ylf-separator-demo">
    <div>
      <h3>给生活一点颜色</h3>
      <p>六段纯色，连接云乐坊的每一份好奇。</p>
      <YlfSeparator variant="spectrum" class="my-4" />
      <div class="flex flex-wrap gap-2">
        <YlfBadge variant="accent" tone="cyan" appearance="soft">
          探索工具
        </YlfBadge>
        <YlfBadge variant="accent" tone="pink" appearance="soft">
          记录灵感
        </YlfBadge>
        <YlfBadge variant="accent" tone="coral" appearance="soft">
          参加活动
        </YlfBadge>
      </div>
    </div>
    <div class="text-sm">
      <p>正文分节保持安静</p>
      <YlfSeparator class="my-3" />
      <p>中性细线负责结构，彩色线用于品牌或分类。</p>
    </div>
    <div class="flex items-center gap-3 text-sm">
      <span>探索</span>
      <YlfSeparator orientation="vertical" variant="accent" tone="cyan" class="h-4!" />
      <span>创作</span>
      <YlfSeparator orientation="vertical" variant="accent" tone="pink" class="h-4!" />
      <span>分享</span>
    </div>
  </div>
</template>

<style scoped>
.ylf-separator-demo {
  display: grid;
  gap: var(--ylf-space-8);
  width: 100%;
  max-width: 560px;
}
.ylf-separator-demo h3 {
  margin: 0 0 var(--ylf-space-2);
  font-size: var(--ylf-text-lg);
  font-weight: 600;
}
.ylf-separator-demo p {
  margin: 0;
  color: var(--ylf-c-text-2);
  font-size: var(--ylf-text-sm);
  line-height: var(--ylf-leading-body);
}
</style>

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

正文默认使用中性细线。brand 使用晴空蓝；accent 配合 tone 区分内容；spectrum 用六段纯色拼接，适合页头、品牌区或活动入口。彩色拼接不铺在正文下方，也不作为唯一的状态提示。

垂直分隔线需要父布局或调用方提供高度，例如 style="height: 24px"。

Props

属性	说明	类型	默认值
orientation	方向	horizontal | vertical	horizontal
decorative	仅装饰	boolean	true
variant	视觉角色	neutral | brand | accent | spectrum	neutral
tone	强调色，仅用于 accent	blue | sun | cyan | coral | pink | green	blue