SDivider <s-divider>

分隔内容的水平或垂直线。 SDivider 是 Shopify Polaris <s-divider> web component 的带类型 Vue 3 wrapper。

import { SDivider } from 'polaris-vue-elements'

最佳实践

• 只分隔确实不同的内容。 分隔线适合放在明显不同的部分之间。过多的分隔线会让界面显得杂乱、零碎，因此请先考虑留白是否同样能将内容分组。
• 让分隔线的粗细与分隔的程度相称。 分隔线的醒目程度应反映分隔的重要性：主要部分之间可以使用 color="strong"，而次要分组只需一条更淡的线或仅用间距。
• 顺应布局的方向。 设置 direction，让分隔线横贯它所分隔内容的排列方向，无论这些项目是垂直堆叠还是水平并排。
• 先尝试使用间距。 布局组件上的间距 props 通常比一条线更能干净地将内容分组。添加分隔线是为了让内容更清晰，而不是用来代替精心规划的间距。

参阅 Shopify 关于 <s-divider> 的最佳实践（英文）以获取完整指南。

示例

Content above the divider.Content below the divider.A stronger divider variant.

<script setup>
import { SDivider, SParagraph } from 'polaris-vue-elements'
</script>

<template>
  <SParagraph>Content above the divider.</SParagraph>
  <SDivider />
  <SParagraph>Content below the divider.</SParagraph>
  <SDivider color="strong" />
  <SParagraph color="subdued">A stronger divider variant.</SParagraph>
</template>

Props

Prop	类型	说明
color	"base" | "strong"	分隔线的视觉突出度。 - base：适用于大多数分隔场景的标准分隔线（默认） - strong：更突出的分隔线，用于主要章节之间的分隔
direction	"block" | "inline"	分隔线的方向，使用逻辑属性。 - inline：水平分隔线，用于分隔垂直堆叠的内容 - block：垂直分隔线，用于分隔水平排列的内容