コンテンツ v1.0.0

ディスクリプションリスト

キーと値のペアを表示するためのセマンティックなディスクリプションリスト。 スタック、水平、ストライプの3つのスタイルを用意しています。 アクセシビリティのために適切なdl/dt/dd HTML要素を使用します。

スタック

ラベルを値の上に積み重ね、区切り線で分離

オプション

名前 型 デフォルト 説明
items * Array 必須 Array of hashes with :label and :value keys
class String "" Additional CSS classes

水平

ラベルを左、値を右に並べたサイドバイサイドレイアウト

オプション

名前 型 デフォルト 説明
items * Array 必須 Array of hashes with :label and :value keys
label_width String "w-1/3" Tailwind width class for the label column
class String "" Additional CSS classes

ストライプ

視認性を向上させる交互の行背景色

オプション

名前 型 デフォルト 説明
items * Array 必須 Array of hashes with :label and :value keys
label_width String "w-1/3" Tailwind width class for the label column
class String "" Additional CSS classes

変更履歴 v1.0.0

- Initial release with stacked, horizontal, and striped styles
- Semantic dl/dt/dd HTML
- Dark mode support

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得