Vuetify

ショップ

企業向け

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

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

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

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

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

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

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

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

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

デフォルトでは、v-divider コンポーネントには WAI-ARIAseparator の役割が割り当てられています。しかし、時には区切りはインターフェイスを美しく見せるための方法にすぎないこともあります。このような場合は、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!