跳到內容
選單
語言，而家係廣東話
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

rastrillo 設計系統

設計系統提供嘅嘢嘅概覽。主題：plain。語言：廣東話。

清單畫面

一般嘅清單畫面：標題、工具列同行，喺桌面同手機都用得。

預先整好、彼此一致嘅介面元件，喺伺服器度算好。

框架本身嘅用語叫佢哋做 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-search-submit

搜尋表單真正嘅提交掣：視覺上收埋咗，但喺 Tab 次序裏面，一攞到鍵盤焦點就現身。

預設標籤

預覽 
<section rst-box><button class="rst-sr-only" type="submit">搜尋</button></section>

喺你用 Tab 掣入去之前，呢度乜都睇唔到。

list-row-action

一行清單：記錄名做主要連結、一行附加資料，同一個次要動作。

前面嘅記號、狀態同一個動作

預覽 
<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

揀選模式嘅頂部條，代替咗清單列：數量、一個擴大揀選嘅連結，同動作選單。

揀咗三行

預覽 
<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>