ショップ

企業向け

v-dividerコンポーネントは、リストまたはレイアウトのセクションの区切り線として使用できます。

最も単純なDividerは、水平線を表示します。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

水平方向の位置をリストアイテムと揃えるために、72px 右に寄せて表示できます。

垂直区切り線により、独自のレイアウトのためのツールが増えます。

垂直分割線は、さらに多くのオプションのためにinset prop と組み合わせることもできます。

区切り線とサブヘッダーは、コンテンツを分割するのに役立ち、オプションで同じ inset propを使用して互いに並べることができます。

横長のコンポーネント内でも区切り線は問題なく表示できます。

By default, v-divider components are assigned the WAI-ARIA role of separator which denotes that the divider "separates and distinguishes sections of content or groups of menuitems." However, sometimes a divider is just a way to make an interface look nice. In those cases, the role of presentation should be used which denotes "an element whose implicit native role semantics will not be mapped to the accessibility API." To override the default separator role in a v-divider, simply add a role="presentation" prop to your component. In addition, v-divider components have an aria-orientation="horizontal". If vertical="true", then aria-orientation="vertical" will be set automatically as well. If role="presentation", aria-orientation="undefined", its default value.

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!