UI プリミティブ

コンポーネントにはなれない形。中身は呼び出す側しか知らないからです。セクションのカード、データのグリッド、開閉メニュー、そしてシェル自身の枠組み。tokens.css がクラスを配り、マークアップはアプリが書きます。以下はすべて ui.Styleguide が返すマークアップで、文言だけがあなたの言語になっています。ui のテストが tokens.css と突き合わせているのも、このマークアップです。

どの例も実際に動きますが、リンクはどこにも移動しません。

box

余白のあるセクションカードと、その外側に置く見出しです。

どのカードがどれか

rst-list と rst-card に余白がないのは意図です。これらは行の連なりを収めるもので、余白は各行が自分で持ちます。フォームや段落、リンクの帯など、行でないものを直に入れると枠線にぴったり付いて描かれます。文字が縁に触れているのがその印です。任意の内容を入れる余白付きのカードは rst-box で、その見出しは直前に置く兄弟の rst-box-head です。

デスクトップモバイル HTML

<div rst-box-head>
  <h2>支払い額</h2>
  <a rst-btn href="/payout/edit">編集</a>
</div>
<section rst-box>
  <p>画面上のものはすべてボックスの中に置きます。</p>
  <div rst-box-foot>2時間前に更新</div>
</section>

button

ボタンには 4 つの種類と 3 つのサイズがあり、リンクもボタンの見た目にできます。フォーム送信中に出るスピナーは form-foot を見てください。

デスクトップモバイル HTML

<p>
  <button rst-btn type="button">キャンセル</button> <button rst-btn="primary" type="button">保存</button> <button rst-btn="ghost" type="button">プレビュー</button> <button rst-btn="danger" type="button">削除</button>
</p>
<p>
  <button rst-btn="primary sm" type="button">小</button> <button rst-btn="primary" type="button">標準</button> <button rst-btn="primary lg" type="button">大</button> <a rst-btn href="/orders">注文を見る</a>
</p>
<p>
  <button rst-btn="primary block" type="button">続ける</button>
</p>
<p>
  <button rst-btn type="button" disabled>アーカイブ済み</button>
</p>

dropdown

ヘッダーのはみ出しメニューや一覧バーの絞り込みの正体である details/summary のメニューと、適用中の絞り込みを表す取り外せるチップです。

デスクトップモバイル HTML

<details rst-dropdown name="rst-menus">
  <summary>
    絞り込み
    <span rst-caret aria-hidden="true">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
    </span>
    <span class="rst-sr-only">注文の絞り込み: 支払い済み</span>
  </summary>
  <div rst-dropdown-menu>
    <a aria-current="true" href="/orders?status=paid">支払い済み</a>
    <details rst-menu-group name="rst-menus-price" open>
      <summary>価格</summary>
      <div>
        <a href="/orders?price=free">無料</a>
      </div>
    </details>
  </div>
</details>
<span rst-ftok>
  <span rst-ftok-k>支払い済み</span>
  <a href="/orders" aria-label="絞り込み「支払い済み」を解除">✕</a>
</span>

form-layout

フォームにリズムと保存バーを与える属性です。これらを出力する部品はありません。呼び出し側が組み立てたフィールドの連なりを包むものです。

デスクトップモバイル HTML

<form rst-form-flow method="post" action="/settings">
  <div rst-field>
    <label rst-field-label for="name">名前</label>
    <input rst-input type="text" id="name" name="name">
  </div>
  <div rst-field>
    <label rst-field-label for="email">メールアドレス</label>
    <input rst-input type="email" id="email" name="email">
  </div>
  <div rst-field-row>
    <div class="rst-grow" rst-field>
      <label rst-field-label for="city">都市</label>
      <input rst-input type="text" id="city" name="city">
    </div>
    <div rst-field>
      <label rst-field-label for="zip">郵便番号</label>
      <input rst-input="short" type="text" id="zip" name="zip">
    </div>
  </div>
  <div rst-form-bar>
    <span rst-form-bar-note>変更はすぐに保存されます。</span>
    <div rst-form-actions>
      <a rst-btn href="/settings">キャンセル</a>
      <button rst-btn="primary" type="submit">保存</button>
    </div>
  </div>
</form>

help

ヘルプ記事にリンクする、枠付きの疑問符です。CSS のツールチップは飾りで、リンク自身が文としてのラベルを持っています。

デスクトップモバイル HTML

<a rst-help rst-tip href="/help/orders" target="_blank" rel="noopener" aria-label="ヘルプ: 注文" data-tip="注文について">
  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
</a>

list-grid

データテーブルの本当の語彙です。列を決めるのはカードで一度きり、行はセルを選ぶだけです。

画面は縦に積む

画面は1本の列です。page-header、次に section-header とカード、その次の section-header とカード、と読む順に並びます。横並びは、それを備えた書き方だけのものです。rst-box-head、rst-field-row、rst-lbar、rst-lrow のセル、rst-seg-tabs。

デスクトップモバイル HTML

<div rst-card style="--rst-cols: 2fr 110px var(--rst-col-menu)">
  <div rst-lrow="head">
    <span>注文</span>
    <span class="rst-m-hide">状態</span>
    <span></span>
  </div>
  <div rst-lrow>
    <a class="rst-nm" href="/orders/AB3PX"><bdi>Grace Hopper</bdi>
      <small>AB3PX · <bdi>grace@example.com</bdi></small>
    </a>
    <span class="rst-m-hide rst-cell-mut">支払い済み</span>
    <details rst-row-menu name="rst-menus">
      <summary aria-label="Grace Hopper の操作">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
      </summary>
      <div rst-row-menu-panel>
        <a href="/orders/AB3PX">表示</a>
        <hr>
        <a class="rst-danger" href="/orders/AB3PX/refund">注文を返金…</a>
      </div>
    </details>
  </div>
  <p rst-no-match>該当する注文はありません。<a href="/orders">絞り込みを解除</a></p>
</div>
<p rst-count-line>
  <strong>412</strong>件中 <strong>1–20</strong>件を表示</p>

modal

モーダルはクライアント側の状態ではなく、それ自体がひとつの URL です。下の画面を inert にし、その上にパネルを置き、閉じるのはただのリンクです。

デスクトップモバイル HTML

<div rst-backdrop inert>
  <div rst-page>
    <h1>設定</h1>
  </div>
</div>
<div rst-modal-overlay>
  <dialog rst-modal-panel open aria-labelledby="modal-title">
    <nav>
      <a href="/settings/profile" aria-current="page">プロフィール</a>
      <a href="/settings/billing">請求</a>
      <a href="/settings/notifications">通知</a>
    </nav>
    <section>
      <a rst-modal-close href="/settings" aria-label="設定を閉じる">✕</a>
      <h2 id="modal-title">プロフィール</h2>
      <p>アカウント全体で表示される名前と写真を変更します。</p>
    </section>
  </dialog>
</div>

本来あるべき URL で、動いているところを見る (新しいタブで開きます).

selbox

選択モードで一覧の行が身につけるチェックボックスです。そのラベルは、その行が何であるかを言い直します。

デスクトップモバイル HTML

<label rst-selbox>
  <input type="checkbox" aria-label="注文 AB3PX を選択">
</label>

shell-sidebar

コンテンツページでの sidebar シェルの枠です。スマートフォンでは、目次へ戻る操作になります。

デスクトップモバイル HTML

<div rst-shell-sidebar="page">
  <a rst-skip href="#main">本文へ移動</a>
  <div rst-shell-back>
    <a href="/#nav-reports" rel="up" aria-label="セクションに戻る">セクション</a>
  </div>
  <aside rst-shell-rail>
    <h1 rst-shell-title>
      <span><a rst-shell-brand href="/">Notes</a></span><span>レポート</span>
    </h1>
    <a rst-shell-brand href="/">Notes</a>
    <nav rst-shell-nav>
      <span rst-shell-group>業務</span>
      <a id="nav-dashboard" href="/dashboard">ダッシュボード</a>
      <a id="nav-reports" href="/reports" aria-current="page">レポート</a>
    </nav>
    <div rst-shell-rail-foot>
      <details rst-dropdown rst-shell-profile name="rst-shell-menu">
        <summary>
          <span rst-shell-avatar>
            <span rst-person-av aria-hidden="true">A</span>
            <span rst-person-name>Ada Lovelace</span>
          </span>
        </summary>
        <div rst-dropdown-menu>
          <div rst-shell-who>
            <span rst-person-av aria-hidden="true">A</span>
            <span rst-person-name>Ada Lovelace</span>
            <span rst-person-email>ada@example.com</span>
          </div>
          <a href="/settings">設定</a>
        </div>
      </details>
    </div>
  </aside>
  <main rst-shell-main id="main">
    <div rst-page>本文。</div>
  </main>
</div>

サイドバーのシェルのデモを開きます。単独のプレビューです。 (新しいタブで開きます).

shell-topbar

トップバーのシェル自身の枠組みを、マークアップとして示したもの。Layout はこれをひとつのテンプレートとして提供します。

デスクトップモバイル HTML

<div rst-shell-topbar>
  <a rst-skip href="#main">本文へ移動</a>
  <header rst-shell-bar>
    <a rst-shell-brand href="/">Notes</a>
    <details rst-shell-menu name="rst-shell-menu">
      <summary>
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg>メニュー</summary>
    </details>
    <div rst-shell-tail>
      <nav rst-shell-nav>
        <a href="/" aria-current="page">ホーム</a>
        <a href="/archive">アーカイブ</a>
      </nav>
      <details rst-dropdown rst-shell-account name="rst-menus">
        <summary>
          アカウント
          <span rst-caret aria-hidden="true">
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
          </span>
        </summary>
        <div rst-dropdown-menu>
          <a href="/settings">設定</a>
        </div>
      </details>
    </div>
  </header>
  <main rst-page id="main">本文。</main>
  <footer rst-shell-foot>rastrillo で作成</footer>
</div>

トップバーのシェルのデモを開きます。専用のプレビューです。 (新しいタブで開きます).

stat-band

ダッシュボードの上部に並ぶ数値の行です。

デスクトップモバイル HTML

<div rst-stats>
  <div rst-stat="lead">
    <span rst-stat-label>今月の売上</span>
    <span rst-stat-num>&euro;48,210</span>
    <span rst-stat-delta rst-tone="positive">+12%</span>
    <span rst-stat-note>先月比</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>本日の注文</span>
    <span rst-stat-num>318</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>平均購入額</span>
    <span rst-stat-num>&euro;41.20</span>
    <span rst-stat-delta rst-tone="negative">&minus;3%</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>返金</span>
    <span rst-stat-num>7</span>
  </div>
</div>

tblock

枠付きのカードで、中身はスイッチが入っている間だけ :has() で表示されます。本当の状態はスイッチであり、表示は見せ方の都合にすぎません。

デスクトップモバイル HTML

<div rst-tblock>
  <label rst-tblock-head>
    <input type="checkbox" name="notify" checked>
    <span rst-switch-track aria-hidden="true"></span>
    <span>
      <span rst-tblock-title>メール通知</span>
      <span rst-tblock-desc>参加しているスレッドに返信があるたびに送信されます。</span>
    </span>
  </label>
  <div rst-tblock-body>
    <div rst-field>
      <label rst-field-label for="notify-freq">頻度</label>
      <input rst-input type="text" id="notify-freq" name="notify_freq" value="毎日のまとめ">
    </div>
  </div>
</div>