v-dividerコンポーネントは、リストまたはレイアウトのセクションの区切り線として使用できます。
以下に、簡単な例から複雑な例まで示します。
水平方向の位置をリストアイテムと揃えるために、72px 右に寄せて表示できます。
垂直区切り線により、独自のレイアウトのためのツールが増えます。
垂直分割線は、さらに多くのオプションのためにinset prop と組み合わせることもできます。
区切り線とサブヘッダーは、コンテンツを分割するのに役立ち、オプションで同じ inset propを使用して互いに並べることができます。
横長のコンポーネント内でも区切り線は問題なく表示できます。
デフォルトでは、v-divider コンポーネントには WAI-ARIA の separator の役割が割り当てられています。しかし、時には区切りはインターフェイスを美しく見せるための方法にすぎないこともあります。このような場合は、presentationのロールを使用して、「暗黙のネイティブロールセマンティクスがアクセシビリティAPIにマッピングされない要素」を表します。 v-divider のデフォルトのseparatorロールを上書きするには、単に role="presentation" propをコンポーネントに追加してください。さらに、v-dividerコンポーネントには、aria-orientation="horizontal"があります。vertical="true"ならば、aria-orientation="vertical"も自動的に設定されます。role="presentation"の場合、aria-orientation="undefined"がデフォルト値となります。
Caught a mistake or want to contribute to the documentation?
Edit Layout
on GitHub!