Section

関連する内容を、見出し・件数・操作と一緒にまとめます。

進めている

2

使いどころ

  • 作業面の中で、関連する一覧や内容を見出しと件数でまとめる時に使います。
  • 画面全体の見出しはPageHeader、一件の内容をカードにまとめる時はCard、見出しを持たない区切りはDividerを使います。

使い方

titleを見出しに出し、childrenをその下に置きます。見出しは赤(#990000)の通常の太さの名前(15px、--rx-section-title)に、件数と操作を続けて並べます(「議論 [新しい投稿]」)。名前と件数・操作の間は16px空けます。見出しから線は伸ばしません。続く一覧や表の罫線と重ねないためです。

countは名前の横に、Basecamp 2の議論の件数と同じピル(高さ18px、角丸9px、淡い青#e1e8f8の地に11pxの青緑#1c5c77の数字)で出します。count={0}も表示します。

カード・SplitView・右の列・入れ子のSectionの中では、見出しを本文の大きさ(13px)の黒い太字にします。赤い見出しは作業面の最上位のまとまりだけに使います。

toneは見出しの文字の色です。neutralは赤(--rx-heading)、info・success・warning・dangerはそれぞれの役割の色です。カードなどの中で黒い太字にした見出しには効きません。色だけで状態を伝えず、見出しの文言でも示します。

actionsは件数の後ろに続けて並べます。控えめなボタン(高さ22px)を置きます。狭い場所では見出しの行を折り返します。

アクセシビリティ

  • ルートはsection、見出しは常にh2です。画面の見出し(h1)の下のまとまりに使います。
  • ルートに読み上げ名は付けません。ランドマークとして扱わせたい時は、aria-labelledbyなどを利用側で渡します。

API

Section

Sectionのprops
名前型既定値説明
title必須string見出しの文言。h2で出す。
countnumber見出しの横に出す件数。0も表示し、省略すると出さない。
toneTone"neutral"見出しの文字の色(neutralは赤)。入れ子の中で黒い太字にした見出しには効かない。色だけでは意味が伝わらないので、状態は見出しの文言でも示す。
actionsChild見出しの行の末尾側に置く操作(ActionLinkやButtonなど)。
childrenChild見出しの下に置く内容。

ほかに、<section>へ標準のHTML属性を渡せます。

読み込むCSS:layers.css、reset.css、tokens.css、base.css、layout.css、components/section.css

Tone

値:"neutral" | "info" | "success" | "warning" | "danger"

コード

HTML
Hono JSX