Retrix

ActionList

作業へのリンクを、一覧や内容の見えるカードで示します。

対応が必要な行
タイルに並べる
中身の見えるタイル
狭い場所で折り返す
右から左に読む場合

使いどころ

  • 別の画面へ移動して行う作業やツールへのリンクを、アイコンと名前で並べる時に使います。
  • 各行は一つのリンクです。行に状態やボタンなど別の操作が付く時は DataList を使います。
  • アイコンと名前を縦に積んだ大きなショートカットや、その場で行う操作には ActionTile を使います。

使い方

items にリンクごとの title と href を渡し、description と塗りつぶしの Icon（icon）を添えます。名前は、移動先で行う作業を動詞で書きます。

layout="list" は背景を持たずに行を積み、行の幅いっぱいの罫線で区切ります。layout="grid" は同じ行の形のまま、各リンクを13rem以上の幅の白いセルにし、1px #e9e9e9 の格子（外周も内側も同じ線、角は丸めない）で区切って並べます。

名前は本文の大きさ（13px）で、本文のリンクと同じ青緑の太字に1pxの下線を引き、説明は灰色の12pxの文字です。アイコンは面に入れず、名前の一行目の前に小さく添えます。accent はアイコンの色で、blue（既定、リンクと同じ青緑）・green・amber・coral で用途を見分けます。状態を示す色には使いません。未確認の連絡先のように対応が必要な行は attention にすると、accent より優先してアイコン・名前・説明を危険を示す赤で表示します。

preview に直近の数件などを渡すと、説明の下に中身の見本を置きます。行全体がリンクなので、見本の中にボタンやリンクを置きません。

ホバーすると行を淡い黄色の面にし、名前を赤にします。押している間は黄色の面です。JavaScriptは使いません。

アクセシビリティ

  • ルートは ul で、各リンクは li の中の一つの a です。一覧の名前は aria-label などで利用側が付けます。
  • icon に置く Icon は読み上げから外れます。名前だけで移動先が分かるように書きます。
  • attention は色で示すので、対応が必要な理由を description に書きます。

API

ActionList

ActionListのprops
名前型既定値説明
items必須readonly ActionListItem[]並べる項目。
layout"list" | "grid""list"listは背景を持たずに行を積み、行の間を細い線で区切る。gridは各項目を白いセルにして1pxの格子で区切って並べる。

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

読み込むCSS：layers.css、reset.css、tokens.css、base.css、layout.css、components/action-list.css

ActionListItem

一件の項目。行（またはタイル）全体が一つのリンクになる。

ActionListItem
名前型既定値説明
title必須string項目の名前。移動先で行う作業を動詞で書く。
href必須string移動先。行全体をこのリンクにする。
descriptionstring名前の下に淡い文字で添える一文。
iconChild名前の前に置くアイコン。面に入れず、accentの色で名前の一行目の前に小さく添える。塗りつぶしのIconを想定する。
previewChild説明の下に置く中身の見本（直近の数件など）。リンクの中に入るので、ボタンやリンクを入れない。
accentAccentアイコンの色。用途を見分けるためだけに使い、状態の色には使わない。
attentionboolean対応が必要な行（未確認の予備の連絡先など）。名前と説明を危険の色で書く。

Accent

値："blue" | "green" | "amber" | "coral"

コード

HTML
Hono JSX