レイアウト
Splitter
ドラッグできる仕切りで区切った、大きさを変えられる 2 つの区画。仕切りはキーボードでも動かせます。
ReactVueWeb Components
Storybook で見る プレイグラウンド
使用例
<Splitter start={<Nav />} end={<Main />} defaultSize={30} />設定できる項目
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
start 必須 | ReactNode | — | Start (first) pane content. |
end 必須 | ReactNode | — | End (second) pane content. |
orientation | 'horizontal' | 'vertical' | horizontal | Split direction. @default 'horizontal' |
size | number | — | Controlled size of the start pane, in percent. |
defaultSize | number | 50 | Initial size of the start pane, in percent. @default 50 |
onChange | (size: number) => void | — | Called with the new start-pane percent. |
min | number | 10 | Minimum start-pane percent. @default 10 |
max | number | 90 | Maximum start-pane percent. @default 90 |
step | number | 5 | Keyboard step (percent). @default 5 |
handleLabel | string | Resize panels | Accessible label for the resize handle. @default 'Resize panels' |
アクセシビリティ
- 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA（明るさの差が 7:1 以上）を満たします。
- マウスがなくても、キーボードだけですべての操作ができます。
- いまどこを操作しているかを示す枠（フォーカスの囲み）が、常にはっきり見えます。
- 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。
どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA（WCAG 2.1 AAA）を満たすよう作っています。