データ表示

解剖

• Table

  header、body、row、cell、captionをHTML table semanticsで提供する。

• 横スクロール面

  狭い幅ではtable外枠だけをoverflow autoにする。

• Avatar

  画像またはfallback文字を同じ円形領域へ表示する。

• Badge

  公開状態や権限を短い補足として表示する。

状態

• 通常row

  列順とalignmentを全rowで揃える。

• row hover

  muted面で現在rowを示し、列位置は動かさない。

• selected row

  data-state selectedをmuted面へ反映する。

• avatar fallback

  画像がない場合も役割名の先頭文字を表示する。

仕様値

Table

width 100%、14px、caption bottom

Header

height 48px、px 16px

Cell

padding 16px、vertical middle

Row

border bottom、hover muted 50%

Avatar

default 32px、rounded-full

overflow

table wrapper only overflow auto