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

清單畫面

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

每個例子都真係用得，不過入面啲連結唔會帶你去邊度。 HTML 顯示可以複製嘅標記。

page-header

畫面嘅標題列：一個 h1、一個可選嘅副標題，同一個主要動作。

標題、副標題同一個主要動作

預覽 
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>文章</h1>
    <p rst-page-header-sub>你寫過嘅所有嘢，最新嘅排先。</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>
    寫一篇文
  </a>
</header>
{{template "page-header" dict
    "Title" "文章"
    "Sub" "你寫過嘅所有嘢，最新嘅排先。"
    "ActionHref" "/posts/new"
    "ActionLabel" "寫一篇文"
    "ActionIcon" "plus"}}

淨係得標題

預覽 
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>設定</h1>
  </div>
</header>
{{template "page-header" dict "Title" "設定"}}

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="發佈" placeholder="搜尋文章" aria-label="搜尋文章">
      <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="按狀態篩選：已付款">
      已付款
      <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">全部</a>
      <a href="/posts?status=paid" aria-current="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="M20 6 9 17l-5-5"/></svg></a>
      <a href="/posts?status=free">免費</a>
    </div>
  </details>
</div>

將呢段放入 <div rst-list> 入面。

{{template "list-bar" dict
    "Filter" (dict "Aria" "按狀態篩選：已付款" "Items" (list (dict "Href" "/posts" "Label" "全部") (dict "Current" true "Href" "/posts?status=paid" "Label" "已付款") (dict "Href" "/posts?status=free" "Label" "免費")) "Label" "已付款")
    "Hidden" (list (list "sort" "newest"))
    "Placeholder" "搜尋文章"
    "Query" "發佈"
    "SearchAction" "/posts"}}

list-search-submit

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

預設標籤

預覽

將呢段放入 <section rst-box> 入面。

<button class="rst-sr-only" type="submit">搜尋</button>

將呢段放入 <section rst-box> 入面。

{{template "list-search-submit" dict}}

喺你用 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">八月發佈說明</a>
    <small rst-row-sub>8月2號發佈 · 睇 4 分鐘</small>
  </span>
  <span rst-status rst-tone="positive">已發佈</span>
  <a rst-row-action href="/posts/1/edit" aria-label="編輯「八月發佈說明」">編輯</a>
</div>

將呢段放入 <div rst-list> 入面。

{{template "list-row-action" dict
    "Href" "/posts/1"
    "Main" "八月發佈說明"
    "Sub" "8月2號發佈 · 睇 4 分鐘"
    "ActionHref" "/posts/1/edit"
    "ActionLabel" "編輯"
    "ActionAria" "編輯「八月發佈說明」"
    "StatusTone" "positive"
    "StatusLabel" "已發佈"
    "Lead" "accent"
    "LeadInitial" "RN"}}

淨係有名稱同輔助資料嗰行

預覽

將呢段放入 <div rst-list> 入面。

<div rst-row>
  <span rst-row-main><a href="/posts/2">點解我哋唔再用舊嘅執行器</a>
    <small rst-row-sub>草稿 · 20 分鐘前儲存</small>
  </span>
</div>

將呢段放入 <div rst-list> 入面。

{{template "list-row-action" dict
    "Href" "/posts/2"
    "Main" "點解我哋唔再用舊嘅執行器"
    "Sub" "草稿 · 20 分鐘前儲存"}}

row-menu

該行嘅其他操作，收喺 ⋮ 掣後面。破壞性嘅操作連去佢嘅確認頁。

連結、表格同一個破壞性項目

預覽 
<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/edit">編輯</a>
    <form method="post" action="/orders/AB3PX/archive">
      <input type="hidden" name="state" value="archived">
      <button type="submit">封存</button>
    </form>
    <hr>
    <a class="rst-danger" href="/orders/AB3PX/delete">刪除訂單…</a>
  </div>
</details>
{{template "row-menu" dict
    "Name" "Grace Hopper"
    "Items" (list
        (dict "Href" "/orders/AB3PX/edit" "Label" "編輯")
        (dict "Action" "/orders/AB3PX/archive" "Hidden" (list (list "state" "archived")) "Label" "封存")
        (dict "Danger" true "Href" "/orders/AB3PX/delete" "Label" "刪除訂單…"))}}

將破壞性項目放喺最後，標籤以 … 結尾。佢會打開一頁，喺刪除任何嘢之前先問一聲。

只有連結，用喺選擇表格入面嘅清單

預覽 
<details rst-row-menu name="rst-menus">
  <summary aria-label="Alan Turing 嘅操作">
    <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/CD4QY/edit">編輯</a>
    <hr>
    <a class="rst-danger" href="/orders/CD4QY/delete">刪除訂單…</a>
  </div>
</details>
{{template "row-menu" dict
    "Name" "Alan Turing"
    "Items" (list
        (dict "Href" "/orders/CD4QY/edit" "Label" "編輯")
        (dict "Danger" true "Href" "/orders/CD4QY/delete" "Label" "刪除訂單…"))}}

喺表格入面，每個項目都一定要係連結。要提交嘅操作就經佢自己嗰一頁做。

seg-tabs

由伺服器算出嘅連結砌成嘅分段控件。目前嘅分頁就係連結上面嘅 aria-current。

兩個分區

預覽 
<nav rst-seg-tabs aria-label="文章分區">
  <a href="?tab=basics" aria-current="page">基本</a>
  <a href="?tab=advanced">進階</a>
</nav>
{{template "seg-tabs" dict
    "Label" "文章分區"
    "Items" (list
        (dict "Current" true "Href" "?tab=basics" "Label" "基本")
        (dict "Href" "?tab=advanced" "Label" "進階"))}}

dropdown

一個完全冇 JavaScript 嘅展開塊：一個 summary 掣，下面係一板普通連結。

套咗一個選擇嘅篩選選單

預覽 
<details rst-dropdown name="rst-menus">
  <summary rst-btn 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="m6 9 6 6 6-6"/></svg>
  </summary>
  <div rst-dropdown-menu>
    <a href="/posts?sort=newest" aria-current="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="M20 6 9 17l-5-5"/></svg></a>
    <a href="/posts?sort=oldest">最舊</a>
    <a href="/posts?sort=title">按標題</a>
  </div>
</details>
{{template "dropdown" dict
    "Label" "最新"
    "Aria" "文章排序：最新排先"
    "Items" (list
        (dict "Current" true "Href" "/posts?sort=newest" "Label" "最新")
        (dict "Href" "/posts?sort=oldest" "Label" "最舊")
        (dict "Href" "/posts?sort=title" "Label" "按標題"))}}

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-selection><span rst-bulkbar-count>揀咗 3 項</span><a rst-bulkbar-escalate href="/posts?select=all">揀晒全部 412 項符合嘅</a></span>
  <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>
    </summary>
    <div rst-dropdown-menu>
      <button type="submit" name="action" value="export">匯出</button>
      <button type="submit" name="action" value="unpublish">取消發佈</button>
      <button type="submit" name="action" value="delete" class="rst-danger">刪除…</button>
    </div>
  </details>
</div>

將呢段放入 <div rst-list> 入面。

{{template "bulk-bar" dict
    "DoneHref" "/posts"
    "Count" "揀咗 3 項"
    "EscalateHref" "/posts?select=all"
    "EscalateLabel" "揀晒全部 412 項符合嘅"
    "Actions" (list
        (dict "Label" "匯出" "Value" "export")
        (dict "Label" "取消發佈" "Value" "unpublish")
        (dict "Danger" true "Label" "刪除…" "Value" "delete"))
    "MenuLabel" "操作"}}

破壞性嗰項擺喺最尾：第一項先係外面個表單㩒 Enter 嗰陣默默用嘅預設。

media-grid

圖片方塊組成嘅網格。每個框都係 4:3，所以高嘅截圖同闊嘅橫額都可以整齊咁放喺同一個網格入面。

截圖、一個標誌同一個橫額

預覽

將呢段放入 <div rst-list> 入面。

<div rst-media>
  <div rst-media-tile>
    <div rst-media-frame>
      <img src="/images/checkout.png" alt="" loading="lazy" decoding="async" width="1280" height="3200">
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/1">結帳，第 2 步</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="結帳，第 2 步 嘅操作">
            <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="/images/1/edit">編輯</a>
            <hr>
            <a class="rst-danger" href="/images/1/delete">刪除…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>付款步驟，信用卡表格已經打開。</p>
      <p rst-media-meta>1280 × 3200 · 412 KB</p>
    </div>
  </div>
  <div rst-media-tile>
    <div rst-media-frame>
      <img src="/images/pricing.png" alt="" loading="lazy" decoding="async" width="1280" height="2400">
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/2">定價頁面</a>
        <details rst-row-menu name="rst-menus">
          <summary 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"><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="/images/2/edit">編輯</a>
            <hr>
            <a class="rst-danger" href="/images/2/delete">刪除…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc="none">冇描述</p>
      <p rst-media-meta>1280 × 2400 · 318 KB</p>
    </div>
  </div>
  <div rst-media-tile>
    <div rst-media-frame="contain">
      <img src="/images/logo.svg" alt="Harbour" loading="lazy" decoding="async" width="240" height="240">
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/3">Harbour 標誌</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="Harbour 標誌 嘅操作">
            <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="/images/3/edit">編輯</a>
            <hr>
            <a class="rst-danger" href="/images/3/delete">刪除…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>淨係個標誌，適合深色同淺色背景。</p>
      <p rst-media-meta>240 × 240 · 3 KB</p>
    </div>
  </div>
  <div rst-media-tile>
    <div rst-media-frame="contain">
      <img src="/images/banner.png" alt="" loading="lazy" decoding="async" width="1200" height="200">
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/4">春季橫額</a>
        <details rst-row-menu name="rst-menus">
          <summary 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"><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="/images/4/edit">編輯</a>
            <hr>
            <a class="rst-danger" href="/images/4/delete">刪除…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>三月嗰陣商店頂部嘅橫條。</p>
      <p rst-media-meta>1200 × 200 · 64 KB</p>
    </div>
  </div>
</div>

將呢段放入 <div rst-list> 入面。

{{template "media-grid" dict
    "Items" (list
        (dict "Desc" "付款步驟，信用卡表格已經打開。" "Height" 3200 "Href" "/images/1" "Menu" (list (dict "Href" "/images/1/edit" "Label" "編輯") (dict "Danger" true "Href" "/images/1/delete" "Label" "刪除…")) "Meta" "1280 × 3200 · 412 KB" "Name" "結帳，第 2 步" "Src" "/images/checkout.png" "Width" 1280)
        (dict "Desc" "" "Height" 2400 "Href" "/images/2" "Menu" (list (dict "Href" "/images/2/edit" "Label" "編輯") (dict "Danger" true "Href" "/images/2/delete" "Label" "刪除…")) "Meta" "1280 × 2400 · 318 KB" "Name" "定價頁面" "Src" "/images/pricing.png" "Width" 1280)
        (dict "Alt" "Harbour" "Desc" "淨係個標誌，適合深色同淺色背景。" "Fit" "contain" "Height" 240 "Href" "/images/3" "Menu" (list (dict "Href" "/images/3/edit" "Label" "編輯") (dict "Danger" true "Href" "/images/3/delete" "Label" "刪除…")) "Meta" "240 × 240 · 3 KB" "Name" "Harbour 標誌" "Src" "/images/logo.svg" "Width" 240)
        (dict "Desc" "三月嗰陣商店頂部嘅橫條。" "Fit" "contain" "Height" 200 "Href" "/images/4" "Menu" (list (dict "Href" "/images/4/edit" "Label" "編輯") (dict "Danger" true "Href" "/images/4/delete" "Label" "刪除…")) "Meta" "1200 × 200 · 64 KB" "Name" "春季橫額" "Src" "/images/banner.png" "Width" 1200))}}

標誌或者橫額就將 Fit 設做 "contain"。截圖保持預設，顯示佢頂部。冇 Desc 嘅方塊會顯示「冇描述」。

揀選模式，揀咗一個方塊

預覽

將呢段放入 <div rst-list> 入面。

<div rst-media>
  <div rst-media-tile>
    <div rst-media-frame>
      <img src="/images/checkout.png" alt="" loading="lazy" decoding="async" width="1280" height="3200">
      <label rst-selbox>
        <input type="checkbox" name="id" value="1" checked aria-label="揀 結帳，第 2 步">
      </label>
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/1">結帳，第 2 步</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="結帳，第 2 步 嘅操作">
            <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="/images/1/edit">編輯</a>
            <hr>
            <a class="rst-danger" href="/images/1/delete">刪除…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>付款步驟，信用卡表格已經打開。</p>
      <p rst-media-meta>1280 × 3200 · 412 KB</p>
    </div>
  </div>
  <div rst-media-tile>
    <div rst-media-frame>
      <img src="/images/pricing.png" alt="" loading="lazy" decoding="async" width="1280" height="2400">
      <label rst-selbox>
        <input type="checkbox" name="id" value="2" aria-label="揀 定價頁面">
      </label>
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/2">定價頁面</a>
        <details rst-row-menu name="rst-menus">
          <summary 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"><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="/images/2/edit">編輯</a>
            <hr>
            <a class="rst-danger" href="/images/2/delete">刪除…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc="none">冇描述</p>
      <p rst-media-meta>1280 × 2400 · 318 KB</p>
    </div>
  </div>
</div>

將呢段放入 <div rst-list> 入面。

{{template "media-grid" dict
    "Items" (list
        (dict "Desc" "付款步驟，信用卡表格已經打開。" "Height" 3200 "Href" "/images/1" "Menu" (list (dict "Href" "/images/1/edit" "Label" "編輯") (dict "Danger" true "Href" "/images/1/delete" "Label" "刪除…")) "Meta" "1280 × 3200 · 412 KB" "Name" "結帳，第 2 步" "Select" "1" "Selected" true "Src" "/images/checkout.png" "Width" 1280)
        (dict "Desc" "" "Height" 2400 "Href" "/images/2" "Menu" (list (dict "Href" "/images/2/edit" "Label" "編輯") (dict "Danger" true "Href" "/images/2/delete" "Label" "刪除…")) "Meta" "1280 × 2400 · 318 KB" "Name" "定價頁面" "Select" "2" "Src" "/images/pricing.png" "Width" 1280))}}

將網格同 bulk-bar 放喺同一個表格入面。每個剔選框用 "id" 呢個名提交佢方塊嘅 Select 值；想改就設定 SelectName。喺表格入面，選單項目一定要係連結。

pagination

一排有編號嘅普通連結，所以熄咗 JavaScript 都仲揭到頁。

長清單嘅中間

預覽 
<nav rst-pagination aria-label="文章分頁">
  <a href="/posts?page=3" rst-pagination-step="prev"><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 rst-pagination-word>上一頁</span></a>
  <a href="/posts?page=1">1</a>
  <span rst-pagination-gap aria-hidden="true">…</span>
  <a href="/posts?page=3" rst-pagination-wide>3</a>
  <span aria-current="page">4</span>
  <a href="/posts?page=5" rst-pagination-wide>5</a>
  <span rst-pagination-gap aria-hidden="true">…</span>
  <a href="/posts?page=9">9</a>
  <a href="/posts?page=5" rst-pagination-step="next"><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 rst-pagination-word>下一頁</span></a>
</nav>
{{template "pagination" dict
    "Items" (list
        (dict "Href" "/posts?page=3" "Label" "上一頁" "Rel" "prev")
        (dict "Href" "/posts?page=1" "Label" "1")
        (dict "Gap" true)
        (dict "Href" "/posts?page=3" "Label" "3")
        (dict "Current" true "Label" "4")
        (dict "Href" "/posts?page=5" "Label" "5")
        (dict "Gap" true)
        (dict "Href" "/posts?page=9" "Label" "9")
        (dict "Href" "/posts?page=5" "Label" "下一頁" "Rel" "next"))
    "Label" "文章分頁"}}

第一版，用預設嘅無障礙名稱

預覽 
<nav rst-pagination aria-label="分頁">
  <span rst-pagination-disabled rst-pagination-step="prev"><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 rst-pagination-word>上一頁</span></span>
  <span aria-current="page">1</span>
  <a href="/posts?page=2">2</a>
  <a href="/posts?page=2" rst-pagination-step="next"><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 rst-pagination-word>下一頁</span></a>
</nav>
{{template "pagination" dict
    "Items" (list
        (dict "Disabled" true "Label" "上一頁" "Rel" "prev")
        (dict "Current" true "Label" "1")
        (dict "Href" "/posts?page=2" "Label" "2")
        (dict "Href" "/posts?page=2" "Label" "下一頁" "Rel" "next"))}}

冇 Label，所以呢個 nav 嘅無障礙名稱嚟自目錄。

empty-state

空狀態卡。空狀態，同埋開始嘅入口。

帶一個用 POST 嘅行動呼籲

預覽 
<div rst-empty>
  <h2 rst-empty-title>呢度暫時乜都冇</h2>
  <p rst-empty-body>暫時未有文章。由第一篇開始就啱晒。</p>
  <form rst-empty-cta method="post" action="/posts/seed">
    <input type="hidden" name="csrf" value="tok-123">
    <button rst-btn="primary" type="submit">加入示範文章</button>
  </form>
</div>
{{template "empty-state" dict
    "Body" "暫時未有文章。由第一篇開始就啱晒。"
    "Title" "呢度暫時乜都冇"
    "ActionLabel" "加入示範文章"
    "PostAction" "/posts/seed"
    "Hidden" (list (list "csrf" "tok-123"))}}

淨係一句

預覽 
<div rst-empty>
  <p rst-empty-body>呢篇文暫時未有留言。</p>
</div>
{{template "empty-state" dict "Body" "呢篇文暫時未有留言。"}}