SDivider `<s-divider>`

コンテンツを区切る水平または垂直の線。 SDivider は、Shopify Polaris の <s-divider> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

本当に異なるコンテンツだけを区切る。 区切り線が意味を持つのは、明確に異なるセクションの間です。多すぎるとインターフェースが雑然として細切れに見えるため、余白だけでも同じようにコンテンツをグループ化できないか確認します。
区切りの大きさに合わせて重みを変える。 区切り線の目立ち具合は、区切りの重要度を反映させます。大きなセクションの区切りには color="strong" を使えますが、小さなグループ分けには控えめな線か余白だけで十分です。
レイアウトの方向に従う。 direction を設定し、縦に積まれた項目の間でも横に並んだ項目の間でも、区切るコンテンツの流れを横切るように線を引きます。
まず余白を試す。 レイアウトコンポーネントの余白 props のほうが、線よりもすっきりとコンテンツをグループ化できることがよくあります。区切り線は、わかりやすさを高めるために追加するものであり、よく考えられた余白の代わりではありません。

詳しいガイダンスについては、<s-divider> に関する Shopify のベストプラクティス（英語）を参照してください。

例

Content above the divider.

Content below the divider.

A stronger divider variant.

vue

<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`: 横に並べられたコンテンツを区切る垂直の区切り線

SDivider <s-divider> ​

ベストプラクティス ​

例 ​

Props ​

SDivider `<s-divider>`

ベストプラクティス

例

Props