言語

English Gaeilge 简体中文 Español हिन्दी Português বাংলা Русский 日本語廣東話 Tiếng Việt العربية

rastrillo デザインシステム

デザインシステムが提供するものの概要。テーマ: signal。言語: 日本語。

一覧画面

一般的な一覧画面。タイトル、ツールバー、行があり、デスクトップでもモバイルでも動きます。

あらかじめ作られ、互いに揃った UI 部品を、サーバー側で描画。

フレームワーク自身の語彙では、これらは partial です。ui.Templates() は partial を返し、docs/site/templates.md もその名前で説明しています。このページの言葉は変わりましたが、コードの言葉は変わっていません。

ここのリンクは動きません

リンクは動きません。サンプルのソースは別に用意しています。

下の各サンプルは、それぞれ自分のフレームの中にあります。

サンプルの中身は英語のままです。サンプルのシェルは翻訳されています。

page-header

画面のタイトルバー。h1、任意のサブ見出し、そして主要な操作がひとつ。

見出し、サブ見出し、そして主要な操作

デスクトップモバイルコード

<header rst-page-header>
  <div rst-page-header-titles>
    <h1>Posts</h1>
    <p rst-page-header-sub>Everything you have written, newest first.</p>
  </div>
  <a rst-btn="primary" href="/posts/new"><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="M5 12h14"/><path d="M12 5v14"/></svg>Write a post</a>
</header>

見出しだけ

デスクトップモバイルコード

<header rst-page-header>
  <div rst-page-header-titles>
    <h1>Settings</h1>
  </div>
</header>

list-bar

一覧カードの上部にあるツールバー。検索と絞り込みが入ります。

検索と絞り込みのドロップダウン

デスクトップモバイルコード

<div rst-list><div rst-lbar>
  <search><form rst-search method="get" action="/posts">
  <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="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
  <input type="search" name="q" value="release" placeholder="Search posts" aria-label="Search posts">
  <a rst-search-clear href="/posts?sort=newest" aria-label="検索をクリア"><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="M18 6 6 18"/><path d="m6 6 12 12"/></svg></a>
  <input type="hidden" name="sort" value="newest">
  <button class="rst-sr-only" type="submit">検索</button>
</form></search>
  <details rst-dropdown name="rst-menus">
  <summary rst-btn aria-label="Filter by status: Paid">Paid <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></summary>
  <div rst-dropdown-menu>
    <a href="/posts">All</a>
    <a href="/posts?status=paid" aria-current="true">Paid <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="M20 6 9 17l-5-5"/></svg></a>
    <a href="/posts?status=free">Free</a>
  </div>
</details>
</div></div>

list-bar-search

検索だけの一覧のための、単独の検索フォーム。ふつうの method="get" フォームです。

検索語あり

デスクトップモバイルコード

<div rst-list><search><form rst-search method="get" action="/comments">
  <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="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
  <input type="search" name="q" value="spam" placeholder="Search comments" aria-label="Search comments">
  <a rst-search-clear href="/comments?status=held" aria-label="検索をクリア"><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="M18 6 6 18"/><path d="m6 6 12 12"/></svg></a>
  <input type="hidden" name="status" value="held">
  <button class="rst-sr-only" type="submit">検索</button>
</form></search></div>

✕ はリンクで、検索語を外した同じ画面に移ります。状態の絞り込みは Hidden に乗っているので残ります。

検索語あり、4 ページ目

デスクトップモバイルコード

<div rst-list><search><form rst-search method="get" action="/comments">
  <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="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
  <input type="search" name="q" value="spam" placeholder="Search comments" aria-label="Search comments">
  <a rst-search-clear href="/comments" aria-label="検索をクリア"><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="M18 6 6 18"/><path d="m6 6 12 12"/></svg></a>
  <input type="hidden" name="page" value="4">
  <button class="rst-sr-only" type="submit">検索</button>
</form></search></div>

Hidden のどの組がページなのかを示すものは何もないので、既定では page=4 が、もう 4 ページもない結果に持ち込まれます。アプリはそれを ClearHref で戻します。

空、アクセシブルな名前はカタログから

デスクトップモバイルコード

<div rst-list><search><form rst-search method="get" action="/comments">
  <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="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
  <input type="search" name="q" aria-label="検索">
  <button class="rst-sr-only" type="submit">検索</button>
</form></search></div>

Placeholder なし。入力欄のアクセシブルな名前は、現在の言語のフレームワークカタログから来ます。

list-search-submit

検索フォームの本物の送信ボタンです。目には見えませんがタブ順には入っていて、キーボードでフォーカスすると姿を現します。

既定のラベル

デスクトップモバイルコード

<section rst-box><button class="rst-sr-only" type="submit">検索</button></section>

Tab キーで入るまで、ここには何も表示されません。

list-row-action

一覧の1行。レコード名を主リンクに、補足の1行、そして副次的な操作がひとつ。

先頭の目印、状態、そしてひとつの操作

デスクトップモバイルコード

<div rst-list><div rst-row>
  <span rst-row-lead data-lead="accent" aria-hidden="true">RN</span>
  <span rst-row-main><a href="/posts/1">Release notes, August</a><small rst-row-sub>Published 2 August · 4 min read</small></span>
  <span rst-status rst-tone="positive">Published</span>
  <a rst-row-action href="/posts/1/edit" aria-label="Edit Release notes, August">Edit</a>
</div></div>

名前と補足行だけ

デスクトップモバイルコード

<div rst-list><div rst-row>
  <span rst-row-main><a href="/posts/2">Why we moved off the old runner</a><small rst-row-sub>Draft · saved 20 minutes ago</small></span>
</div></div>

seg-tabs

サーバーで描画したリンクによるセグメント切り替え。現在のタブはリンクに付いた aria-current です。

セクションが二つ

デスクトップモバイルコード

<nav rst-seg-tabs aria-label="Post sections"><a href="?tab=basics" aria-current="page">Basics</a><a href="?tab=advanced">Advanced</a></nav>

dropdown

JavaScript を一行も使わない開閉です。summary のボタンの下に、ただのリンクを並べたパネルがあります。

絞り込みをひとつ適用したフィルターメニュー

デスクトップモバイルコード

<details rst-dropdown name="rst-menus">
  <summary rst-btn aria-label="Sort posts: newest first">Newest <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></summary>
  <div rst-dropdown-menu>
    <a href="/posts?sort=newest" aria-current="true">Newest <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="M20 6 9 17l-5-5"/></svg></a>
    <a href="/posts?sort=oldest">Oldest</a>
    <a href="/posts?sort=title">By title</a>
  </div>
</details>

bulk-bar

選択モードのヘッダー帯で、一覧バーと入れ替わります。件数、選択を広げるリンク、そして操作メニュー。

3 行を選択中

デスクトップモバイルコード

<div rst-list><div rst-bulkbar><a rst-bulkbar-close href="/posts" aria-label="選択完了"><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="M18 6 6 18"/><path d="m6 6 12 12"/></svg></a><span rst-bulkbar-count>3 selected</span><a rst-bulkbar-escalate href="/posts?select=all">Select all 412 matching</a><details rst-dropdown name="rst-menus"><summary>Actions<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><button type="submit" name="action" value="export">Export</button><button type="submit" name="action" value="unpublish">Unpublish</button><button type="submit" name="action" value="delete" class="rst-danger">Delete…</button></div></details></div></div>

取り消せない項目は最後に置きます。先頭の項目は、外側のフォームで Enter を押したときに暗黙に選ばれるものだからです。

pagination

番号付きの普通のリンクを並べた帯です。JavaScript を切ってもページ送りは動きます。

長い一覧の途中

デスクトップモバイルコード

<nav rst-pagination aria-label="Posts pages"><a href="/posts?page=3">Previous</a><a href="/posts?page=1">1</a><span rst-pagination-gap aria-hidden="true">…</span><a href="/posts?page=3">3</a><span aria-current="page">4</span><a href="/posts?page=5">5</a><span rst-pagination-gap aria-hidden="true">…</span><a href="/posts?page=9">9</a><a href="/posts?page=5">Next</a>
</nav>

最初のページ、アクセシブルな名前は既定

デスクトップモバイルコード

<nav rst-pagination aria-label="ページ送り"><span rst-pagination-disabled>Previous</span><span aria-current="page">1</span><a href="/posts?page=2">2</a><a href="/posts?page=2">Next</a>
</nav>

Label がないので、この nav のアクセシブルな名前はカタログから来ます。

empty-state

空の状態のカード。空の状態と、最初の一歩への入り口。

POST の行動喚起つき

デスクトップモバイルコード

<div rst-empty>
  <h2 rst-empty-title>Nothing here yet</h2>
  <p rst-empty-body>No posts yet. Your first one is a good place to start.</p>
  <form rst-empty-cta method="post" action="/posts/seed">
    <input type="hidden" name="csrf" value="tok-123">
    <button rst-btn="primary" type="submit">Add sample posts</button>
  </form>
</div>

文だけ

デスクトップモバイルコード

<div rst-empty>
  <p rst-empty-body>No comments on this post yet.</p>
</div>