Dictionary

役割と種類

List、Description List、Table、Interactive List、Interactive Tableなどのプロトタイプとして機能します。Cellはタイポグラフィーファーストで設計されており、DensityとSizeの組み合わせで単体の大きさが決定します。このCellを継承したコンポーネントを1次元的、または2次元的に複数並べることで、タイポグラフィーベースの一貫性のある美しいコンポーネントが形作られます。

いつ使うべきか / 使わないべきか

ListやTableのようなSizeやDensityが一貫したボックスが1次元的、または2次元的に複数並ぶ場合はCellを継承してコンポーネントを設計することを検討します。

インタラクション

Cellを継承したコンポーネントでInteractiveなものはインタラクションを起こしますが、Cell自体はインタラクションを起こしません。

スタイル

外観

Cellの内部にはテキストはもちろん、Icon、Checkbox、Radio、Thumbnail、Avatarなど様々なコンポーネントを含めることができます。テキストのサイズや上下の余白はDensity及びSizeの組み合わせを元に、Flavorで指定したTypographyの設定から自動的に算出されます。また、Cell自体は左右の余白は持ちません。左右の余白はコンポーネントのコンテキストに応じて変化するため、継承先のコンポーネント側で実装するようにします。

Density

密度を決定します。 Dense / Normal / Comfort の3種類から選択します。

Size

サイズを決定します。 S / M / L の3種類から選択します。

注意点

バーティカルリズムが揃わなくなるため、SizeやDensityが異なるCellを同じグループ内に混在させることはできません。