介面基本元件

組件做唔到嘅形狀，因為佢哋包住嘅主體淨係叫嗰邊先知：區塊卡、資料格網、展開選單，同埋外殼自己嘅框架。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

按鈕有四種款式同三種大細，連結都可以整到似按鈕。表單提交緊嗰陣出現嘅轉圈，睇 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

真正嘅資料表格講法：卡片一次過定好啲欄，行淨係揀格。

畫面係直住疊落嚟

一個畫面就係一欄：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

模態框有佢自己嘅網址，唔係客戶端狀態：下面嗰版標成 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>

去佢真正屬於嗰個網址度睇佢行 (喺新分頁度打開).

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>