Retrix
91種類のコンポーネント。上部中央のコマンドメニューから名前で探せます。
実務アプリの利用例
作業面と移動
18- AppShell机の上に白いシートを置く、アプリの基本の画面構成です。ヘッダーと作業面を画面の中央に揃えます。
- CommandMenuヘッダーの末尾側に置く検索欄から開き、アプリ全体の移動先と操作を名前で探します。
- SplitView一覧と本文、作業と補足を並べて表示します。
- Wing中央の作業面の左右に、開閉できる補助パネルを置きます。
- Section関連する内容を、見出し・件数・操作と一緒にまとめます。
- Surface机の上に置く白いシート（作業面）です。AppShellの作業面と同じ見た目で、AppShellを使わない画面で使います。
- ContextBar現在の位置と、関連する移動・操作を作業面の上部にまとめます。
- PageHeader対象と作業を、大きな見出しで伝えます。
- ProfileHeader人物の写真と名前に、その人に関する設定を並べます。
- Breadcrumb階層をたどって、上の階層へ戻ります。
- BackLink一つ上の階層へ戻るためのリンクです。
- Navigation同じ領域のページを切り替えます。
- Tree作業面の中で、階層を開閉して項目を選択します。
- TableOfContents長い資料の見出しへ移動し、現在の位置を示します。
- Tabs同じ場所で、関連するパネルを切り替えます。
- Pagination分割された一覧のページを移動します。
- Steps手順と現在の段階を示します。
- Divider内容の区切りに線を引き、見出しや操作を置きます。
入力と選択
22- Fieldラベル・入力欄・補足・エラーを関連付けます。
- FieldGroup見出し・説明・入力欄を、ひとまとまりのフォームとして配置します。
- OptionalFields必要な時だけ追加する入力欄と、追加できる項目のチップです。
- InputGroup入力欄の前後に、単位や接頭辞を並べます。
- CopyFieldコピーして使う値を表示する欄と、コピーボタンです。
- Switchオン・オフの設定を切り替えます。
- ToggleGroup関連する状態を、一つまたは複数切り替えます。
- Rangeスライダーで、数値や範囲を調整します。
- Dialつまみの周りに並べた選択肢から、一つを選びます。
- Suggestion自由に入力できる欄に、候補を表示します。
- Picker検索して、候補から値を選びます。
- EmojiPicker絵文字を検索して選ぶパネルです。
- InlineSelect文中の語をクリックして、選択肢から選びます。
- ColorPicker色相・彩度・明度・不透明度を、見本を確認しながら選びます。
- TagInput入力した文字をタグとして追加・解除します。
- DatePicker日付や期間を、一つの入力欄で選びます。
- DateTimeRange開始と終了の日時を並べて入力します。
- FileInputファイルを選択し、添付する内容を確認します。
- ImageCropper画像の切り抜く範囲を、画像の上の操作と数値の両方で調整します。
- Composer本文・添付・送信の操作を、一つの入力エリアにまとめます。
- TextEditor書式ツールを並べた入力エリアです。
- FilterBar一覧の絞り込み条件を、リンクで切り替えます。
操作と補足
14- Button操作の主従、無効、処理中を表します。
- SplitButton主な操作のボタンと、別の方法を選ぶ▾のボタンをつなげて並べます。
- ActionTile塗りつぶしのアイコンと名前を縦に並べたタイルです。リンクや操作をグリッドに並べます。
- Toolbar対象に対する複数の操作をまとめます。
- ActionDock画面の下に表示する操作バーです。アイコン・名前・ショートカットキーを並べます。
- DropdownMenu現在の対象に関する補助の操作をまとめます。
- FilterMenu文字を入力して候補を絞り込み、選択する小さなパネルです。
- Dialog今の画面を離れずに、操作の影響や内容を確認します。
- Popover補足の説明や小さな操作を、必要な時に開いて表示します。
- Tooltip操作に添える短い補足を、ホバーとフォーカスで表示します。
- HoverCard対象の概要と関連する操作を、近くに表示します。
- Disclosure補足の内容を、HTMLの標準の要素で開閉します。
- DangerZone削除や公開の取り消しなど、影響の大きい操作を説明と一緒にまとめます。
- Keycapキーボードのキーの表記をそろえて表示します。
内容と一覧
23- Card関連する内容と操作を一つにまとめます。
- LayerCard上端の見出しの帯と、その下の中身を一つのカードにまとめます。
- Message投稿者・時刻・本文を、決まった順序で表示します。
- MessageList差出人・件名・本文の冒頭・時刻を並べた受信の一覧です。
- SearchResults題名・抜粋・補足を並べ、一致した語を強調した検索結果です。
- Table数値・短い状態・長い文章を、列の役割に合わせて表示します。
- Grid行と列の見出しを見ながら、縦横に並んだセルを確認・選択する表です。
- Treegrid階層のある行を、列をそろえて表示します。
- ValueList項目の現在の値を、項目名より目立たせて表示します。
- SettingList設定の名前と、行の末尾の操作を罫線で区切って並べた一覧です。
- EditableProperty値をその場で編集し、確定と取り消しの操作をそろえます。
- DataList主な情報・補足・状態を行ごとに並べて比較します。
- ActionList作業へのリンクを、一覧や内容の見えるカードで示します。
- FileItem既存のファイルの名前と状態を示します。
- ImageFrame縦横比を保って画像を表示します。
- Carousel関連する内容を1件ずつ表示し、前後に切り替えます。
- Comparison変更前と変更後を並べて確認します。
- ChartFrameグラフと数値の表を並べて表示します。
- Avatar人物やチームを、名前と一緒に示します。
- Tag分類や選択した条件を短く示します。
- Reactions同じ絵文字ごとに、付けた人数を添えてリアクションを表示します。
- Icon操作や用途を表す文言に添えるアイコンです。
- CodeBlock設定や短いコードを、改行を保って表示します。