基于 BeerCSS 框架实现垂直分割线

以下是基于 BeerCSS 框架实现垂直分割线的 5 种主流方法，结合 Material Design 风格与响应式特性：

---

一、边框实现法（推荐）

通过 border-left 或 border-right 快速创建分割线，适配 BeerCSS 的材质系统：

<!-- HTML -->
<div class="row gap-medium">
  <a class="button">首页</a>
  <div class="divider-vertical surface"></div>
  <a class="button">产品</a>
</div>

<!-- CSS -->
<style>
.divider-vertical {
  height: 24px;      /* 与按钮高度匹配 */
  border-left: 1px solid var(--outline);
  margin: 0 12px;    /* 使用 BeerCSS 的标准间距 */
}
</style>

优点：无需额外元素，直接通过 BeerCSS 的间距系统控制间隔 19

---

二、伪元素动态定位

适用于动态生成的菜单项，通过 :before 伪元素自动插入分割线：

<!-- HTML -->
<div class="menu-item" v-for="item in menuItems">
  {{ item.name }}
</div>

<!-- CSS -->
<style>
.menu-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 15%;
  height: 70%;
  border-right: 1px solid var(--primary-container);
}
</style>

特性：

• 自动跳过最后一个元素 136
• 高度百分比适配不同内容尺寸
• 使用 BeerCSS 的配色变量体系 10

---

三、Flex 布局间隔器

利用 BeerCSS 的 gap 系统与背景色结合：

<div class="row gap-large">
  <div class="item">服务</div>
  <div class="spacer"></div>
  <div class="item">关于</div>
</div>

<style>
.spacer {
  width: 1px;
  background: linear-gradient(
    to bottom, 
    transparent 0%, 
    var(--outline) 50%, 
    transparent 100%
  );
  margin: 0 calc(var(--gap-large) / 2);
}
</style>

交互优化：

• 渐变过渡避免视觉突兀 37
• 间距变量与 BeerCSS 标准同步更新

---

四、Material 图标方案

使用 BeerCSS 内置的 Material 图标库：

<div class="row align-center">
  <span>设置</span>
  <i class="material-icons">vertical_split</i>
  <span>偏好</span>
</div>

<style>
.material-icons {
  font-size: 18px;
  color: var(--on-surface-variant);
  margin: 0 8px;
  opacity: 0.6;
}
</style>

适用场景：

• 需要图标+分割线组合的场景
• 高对比度主题适配 44

---

五、响应式高级方案

结合断点系统的动态分割线：

<div class="divider-responsive">
  <div class="desktop-line"></div>
  <div class="mobile-line"></div>
</div>

<style>
.desktop-line {
  display: block;
  border-left: 1px solid var(--outline);
  height: 24px;
}

.mobile-line {
  display: none;
}

@media (max-width: 600px) {
  .desktop-line { display: none; }
  .mobile-line {
    display: block;
    height: 1px;
    background: var(--outline);
    margin: 8px 0;
  }
}
</style>

技术亮点：

• PC端竖线 / 移动端横线自动切换 917
• 使用 --outline 变量适配暗黑模式

---

最佳实践建议

1. 无障碍设计：为分割线添加 role="separator" 和 aria-orientation 属性 36
2. 性能优化：避免在循环渲染中使用复杂伪元素选择器
3. 主题同步：使用 var(--outline) 替代固定色值以保持主题统一
4. 交互状态：在 :hover 时增加分割线对比度（opacity: 0.8 → 1）

完整实现示例可参考 BeerCSS 官方文档的 Menu 组件 结合上述方案调整。

转载请附上原文链接。