Màn hình danh sách

Màn hình danh sách thông thường: tiêu đề, thanh công cụ và các hàng, chạy được cả trên máy tính lẫn điện thoại.

Mỗi ví dụ đều hoạt động thật, nhưng các liên kết trong đó không dẫn đến đâu. HTML hiển thị mã đánh dấu để sao chép.

page-header

Thanh tiêu đề của màn hình: một h1, một phụ đề tuỳ chọn và một hành động chính.

Tiêu đề, tiêu đề phụ và một hành động chính

Máy tính Điện thoại HTML Template

<header rst-page-header>
  <div rst-page-header-titles>
    <h1>Bài viết</h1>
    <p rst-page-header-sub>Mọi thứ bạn đã viết, mới nhất ở trên.</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>
    Viết một bài
  </a>
</header>

{{template "page-header" dict
    "Title" "Bài viết"
    "Sub" "Mọi thứ bạn đã viết, mới nhất ở trên."
    "ActionHref" "/posts/new"
    "ActionLabel" "Viết một bài"
    "ActionIcon" "plus"}}

Chỉ có tiêu đề

Máy tính Điện thoại HTML Template

<header rst-page-header>
  <div rst-page-header-titles>
    <h1>Cài đặt</h1>
  </div>
</header>

{{template "page-header" dict "Title" "Cài đặt"}}

list-bar

Thanh công cụ ở đầu thẻ danh sách, có tìm kiếm và bộ lọc.

Tìm kiếm kèm trình đơn lọc

Máy tính Điện thoại HTML Template

Đặt đoạn này bên trong <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="phát hành" placeholder="Tìm bài viết" aria-label="Tìm bài viết">
      <a rst-search-clear href="/posts?sort=newest" aria-label="Xóa tìm kiếm">
        <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">Tìm kiếm</button>
    </form>
  </search>
  <details rst-dropdown name="rst-menus">
    <summary rst-btn aria-label="Lọc theo trạng thái: Đã thanh toán">
      Đã thanh toán
      <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">Tất cả</a>
      <a href="/posts?status=paid" aria-current="true">Đã thanh toán <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">Miễn phí</a>
    </div>
  </details>
</div>

Đặt đoạn này bên trong <div rst-list>.

{{template "list-bar" dict
    "Filter" (dict "Aria" "Lọc theo trạng thái: Đã thanh toán" "Items" (list (dict "Href" "/posts" "Label" "Tất cả") (dict "Current" true "Href" "/posts?status=paid" "Label" "Đã thanh toán") (dict "Href" "/posts?status=free" "Label" "Miễn phí")) "Label" "Đã thanh toán")
    "Hidden" (list (list "sort" "newest"))
    "Placeholder" "Tìm bài viết"
    "Query" "phát hành"
    "SearchAction" "/posts"}}

list-bar-search

Biểu mẫu tìm kiếm đứng riêng, cho những danh sách chỉ tìm kiếm. Một biểu mẫu method="get" thông thường.

Có truy vấn

Máy tính Điện thoại HTML Template

Đặt đoạn này bên trong <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="thư rác" placeholder="Tìm bình luận" aria-label="Tìm bình luận">
    <a rst-search-clear href="/comments?status=held" aria-label="Xóa tìm kiếm">
      <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">Tìm kiếm</button>
  </form>
</search>

Đặt đoạn này bên trong <div rst-list>.

{{template "list-bar-search" dict
    "Action" "/comments"
    "Query" "thư rác"
    "Placeholder" "Tìm bình luận"
    "Hidden" (list (list "status" "held"))}}

Dấu ✕ là một liên kết tới chính màn hình đó nhưng đã bỏ truy vấn. Bộ lọc trạng thái đi trong Hidden nên vẫn còn.

Có truy vấn, ở trang 4

Máy tính Điện thoại HTML Template

Đặt đoạn này bên trong <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="thư rác" placeholder="Tìm bình luận" aria-label="Tìm bình luận">
    <a rst-search-clear href="/comments" aria-label="Xóa tìm kiếm">
      <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">Tìm kiếm</button>
  </form>
</search>

Đặt đoạn này bên trong <div rst-list>.

{{template "list-bar-search" dict
    "Action" "/comments"
    "Query" "thư rác"
    "Placeholder" "Tìm bình luận"
    "Hidden" (list (list "page" "4"))
    "ClearHref" "/comments"}}

Không có gì trong Hidden cho biết cặp nào là số trang, nên mặc định sẽ mang page=4 vào một tập kết quả không còn bốn trang nữa. ClearHref là cách một ứng dụng đặt lại điều đó.

Trống, tên trợ năng lấy từ danh mục

Máy tính Điện thoại HTML Template

Đặt đoạn này bên trong <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="Tìm kiếm">
    <button class="rst-sr-only" type="submit">Tìm kiếm</button>
  </form>
</search>

Đặt đoạn này bên trong <div rst-list>.

{{template "list-bar-search" dict "Action" "/comments"}}

Không có Placeholder. Tên trợ năng của ô nhập lấy từ danh mục của framework trong ngôn ngữ hiện tại.

list-search-submit

Nút gửi thật của biểu mẫu tìm kiếm: ẩn khỏi mắt nhìn, vẫn nằm trong thứ tự Tab, và hiện ra khi nhận tiêu điểm bàn phím.

Nhãn mặc định

Máy tính Điện thoại HTML Template

Đặt đoạn này bên trong <section rst-box>.

<button class="rst-sr-only" type="submit">Tìm kiếm</button>

Đặt đoạn này bên trong <section rst-box>.

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

Không có gì hiện ra ở đây cho đến khi bạn dùng phím Tab đi vào.

list-row-action

Một hàng danh sách: tên bản ghi làm liên kết chính, một dòng thông tin phụ và một hành động phụ.

Dấu dẫn đầu, trạng thái và một hành động

Máy tính Điện thoại HTML Template

Đặt đoạn này bên trong <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">Ghi chú phát hành, tháng Tám</a>
    <small rst-row-sub>Đăng ngày 2 tháng 8 · đọc trong 4 phút</small>
  </span>
  <span rst-status rst-tone="positive">Đã đăng</span>
  <a rst-row-action href="/posts/1/edit" aria-label="Sửa Ghi chú phát hành, tháng Tám">Sửa</a>
</div>

Đặt đoạn này bên trong <div rst-list>.

{{template "list-row-action" dict
    "Href" "/posts/1"
    "Main" "Ghi chú phát hành, tháng Tám"
    "Sub" "Đăng ngày 2 tháng 8 · đọc trong 4 phút"
    "ActionHref" "/posts/1/edit"
    "ActionLabel" "Sửa"
    "ActionAria" "Sửa Ghi chú phát hành, tháng Tám"
    "StatusTone" "positive"
    "StatusLabel" "Đã đăng"
    "Lead" "accent"
    "LeadInitial" "RN"}}

Chỉ có tên và dòng thông tin phụ

Máy tính Điện thoại HTML Template

Đặt đoạn này bên trong <div rst-list>.

<div rst-row>
  <span rst-row-main><a href="/posts/2">Vì sao chúng tôi bỏ trình chạy cũ</a>
    <small rst-row-sub>Bản nháp · đã lưu 20 phút trước</small>
  </span>
</div>

Đặt đoạn này bên trong <div rst-list>.

{{template "list-row-action" dict
    "Href" "/posts/2"
    "Main" "Vì sao chúng tôi bỏ trình chạy cũ"
    "Sub" "Bản nháp · đã lưu 20 phút trước"}}

row-menu

Các thao tác khác của một hàng, sau nút ⋮. Thao tác phá hủy liên kết tới trang xác nhận của nó.

Liên kết, một biểu mẫu và một mục phá hủy

Máy tính Điện thoại HTML Template

<details rst-row-menu name="rst-menus">
  <summary aria-label="Thao tác cho 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">Sửa</a>
    <form method="post" action="/orders/AB3PX/archive">
      <input type="hidden" name="state" value="archived">
      <button type="submit">Lưu trữ</button>
    </form>
    <hr>
    <a class="rst-danger" href="/orders/AB3PX/delete">Xóa đơn hàng…</a>
  </div>
</details>

{{template "row-menu" dict
    "Name" "Grace Hopper"
    "Items" (list
        (dict "Href" "/orders/AB3PX/edit" "Label" "Sửa")
        (dict "Action" "/orders/AB3PX/archive" "Hidden" (list (list "state" "archived")) "Label" "Lưu trữ")
        (dict "Danger" true "Href" "/orders/AB3PX/delete" "Label" "Xóa đơn hàng…"))}}

Đặt mục phá hủy ở cuối và kết thúc nhãn của nó bằng …. Nó mở một trang hỏi lại trước khi xóa bất cứ thứ gì.

Chỉ liên kết, cho danh sách nằm trong biểu mẫu chọn

Máy tính Điện thoại HTML Template

<details rst-row-menu name="rst-menus">
  <summary aria-label="Thao tác cho 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">Sửa</a>
    <hr>
    <a class="rst-danger" href="/orders/CD4QY/delete">Xóa đơn hàng…</a>
  </div>
</details>

{{template "row-menu" dict
    "Name" "Alan Turing"
    "Items" (list
        (dict "Href" "/orders/CD4QY/edit" "Label" "Sửa")
        (dict "Danger" true "Href" "/orders/CD4QY/delete" "Label" "Xóa đơn hàng…"))}}

Bên trong một biểu mẫu, mọi mục phải là liên kết. Thao tác gửi dữ liệu đi qua một trang riêng của nó.

seg-tabs

Một điều khiển phân đoạn gồm các liên kết dựng từ máy chủ. Tab hiện tại là aria-current trên một liên kết.

Hai mục

Máy tính Điện thoại HTML Template

<nav rst-seg-tabs aria-label="Các phần của bài viết">
  <a href="?tab=basics" aria-current="page">Cơ bản</a>
  <a href="?tab=advanced">Nâng cao</a>
</nav>

{{template "seg-tabs" dict
    "Label" "Các phần của bài viết"
    "Items" (list
        (dict "Current" true "Href" "?tab=basics" "Label" "Cơ bản")
        (dict "Href" "?tab=advanced" "Label" "Nâng cao"))}}

dropdown

Một khối bung mở không dùng chút JavaScript nào: một nút summary trên một bảng gồm các liên kết thường.

Trình đơn lọc đã áp dụng một lựa chọn

Máy tính Điện thoại HTML Template

<details rst-dropdown name="rst-menus">
  <summary rst-btn aria-label="Sắp xếp bài viết: mới nhất trước">
    Mới nhất
    <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">Mới nhất <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">Cũ nhất</a>
    <a href="/posts?sort=title">Theo tiêu đề</a>
  </div>
</details>

{{template "dropdown" dict
    "Label" "Mới nhất"
    "Aria" "Sắp xếp bài viết: mới nhất trước"
    "Items" (list
        (dict "Current" true "Href" "/posts?sort=newest" "Label" "Mới nhất")
        (dict "Href" "/posts?sort=oldest" "Label" "Cũ nhất")
        (dict "Href" "/posts?sort=title" "Label" "Theo tiêu đề"))}}

bulk-bar

Dải đầu của chế độ chọn, thay cho thanh danh sách: số lượng, một liên kết mở rộng lựa chọn, và trình đơn hành động.

Đã chọn ba hàng

Máy tính Điện thoại HTML Template

Đặt đoạn này bên trong <div rst-list>.

<div rst-bulkbar>
  <a rst-bulkbar-close href="/posts" aria-label="Chọn xong">
    <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>Đã chọn 3</span><a rst-bulkbar-escalate href="/posts?select=all">Chọn tất cả 412 mục khớp</a></span>
  <details rst-dropdown name="rst-menus">
    <summary>
      Thao tác
      <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">Xuất</button>
      <button type="submit" name="action" value="unpublish">Gỡ xuống</button>
      <button type="submit" name="action" value="delete" class="rst-danger">Xóa…</button>
    </div>
  </details>
</div>

Đặt đoạn này bên trong <div rst-list>.

{{template "bulk-bar" dict
    "DoneHref" "/posts"
    "Count" "Đã chọn 3"
    "EscalateHref" "/posts?select=all"
    "EscalateLabel" "Chọn tất cả 412 mục khớp"
    "Actions" (list
        (dict "Label" "Xuất" "Value" "export")
        (dict "Label" "Gỡ xuống" "Value" "unpublish")
        (dict "Danger" true "Label" "Xóa…" "Value" "delete"))
    "MenuLabel" "Thao tác"}}

Mục phá hủy nằm cuối cùng: mục đầu tiên mới là thứ biểu mẫu bao quanh chạy ngầm khi nhấn Enter.

media-grid

Một lưới các ô hình ảnh. Mỗi khung là 4:3, nên ảnh chụp màn hình cao và biểu ngữ rộng nằm gọn trong cùng một lưới đều.

Ảnh chụp màn hình, một logo và một biểu ngữ

Máy tính Điện thoại HTML Template

Đặt đoạn này bên trong <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">Thanh toán, bước 2</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="Thao tác cho Thanh toán, bước 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">Sửa</a>
            <hr>
            <a class="rst-danger" href="/images/1/delete">Xóa…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>Bước thanh toán, với biểu mẫu thẻ đang mở.</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">Trang giá</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="Thao tác cho Trang giá">
            <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">Sửa</a>
            <hr>
            <a class="rst-danger" href="/images/2/delete">Xóa…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc="none">Không có mô tả</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">Logo Harbour</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="Thao tác cho Logo 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">Sửa</a>
            <hr>
            <a class="rst-danger" href="/images/3/delete">Xóa…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>Biểu tượng riêng, dùng trên nền tối và nền sáng.</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">Biểu ngữ mùa xuân</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="Thao tác cho Biểu ngữ mùa xuân">
            <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">Sửa</a>
            <hr>
            <a class="rst-danger" href="/images/4/delete">Xóa…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>Dải ở đầu cửa hàng vào tháng Ba.</p>
      <p rst-media-meta>1200 × 200 · 64 KB</p>
    </div>
  </div>
</div>

Đặt đoạn này bên trong <div rst-list>.

{{template "media-grid" dict
    "Items" (list
        (dict "Desc" "Bước thanh toán, với biểu mẫu thẻ đang mở." "Height" 3200 "Href" "/images/1" "Menu" (list (dict "Href" "/images/1/edit" "Label" "Sửa") (dict "Danger" true "Href" "/images/1/delete" "Label" "Xóa…")) "Meta" "1280 × 3200 · 412 KB" "Name" "Thanh toán, bước 2" "Src" "/images/checkout.png" "Width" 1280)
        (dict "Desc" "" "Height" 2400 "Href" "/images/2" "Menu" (list (dict "Href" "/images/2/edit" "Label" "Sửa") (dict "Danger" true "Href" "/images/2/delete" "Label" "Xóa…")) "Meta" "1280 × 2400 · 318 KB" "Name" "Trang giá" "Src" "/images/pricing.png" "Width" 1280)
        (dict "Alt" "Harbour" "Desc" "Biểu tượng riêng, dùng trên nền tối và nền sáng." "Fit" "contain" "Height" 240 "Href" "/images/3" "Menu" (list (dict "Href" "/images/3/edit" "Label" "Sửa") (dict "Danger" true "Href" "/images/3/delete" "Label" "Xóa…")) "Meta" "240 × 240 · 3 KB" "Name" "Logo Harbour" "Src" "/images/logo.svg" "Width" 240)
        (dict "Desc" "Dải ở đầu cửa hàng vào tháng Ba." "Fit" "contain" "Height" 200 "Href" "/images/4" "Menu" (list (dict "Href" "/images/4/edit" "Label" "Sửa") (dict "Danger" true "Href" "/images/4/delete" "Label" "Xóa…")) "Meta" "1200 × 200 · 64 KB" "Name" "Biểu ngữ mùa xuân" "Src" "/images/banner.png" "Width" 1200))}}

Đặt Fit là "contain" cho logo hoặc biểu ngữ. Ảnh chụp màn hình giữ mặc định và hiện phần trên của nó. Ô không có Desc hiện "Không có mô tả".

Chế độ chọn, một ô được chọn

Máy tính Điện thoại HTML Template

Đặt đoạn này bên trong <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="Chọn Thanh toán, bước 2">
      </label>
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/1">Thanh toán, bước 2</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="Thao tác cho Thanh toán, bước 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">Sửa</a>
            <hr>
            <a class="rst-danger" href="/images/1/delete">Xóa…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>Bước thanh toán, với biểu mẫu thẻ đang mở.</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="Chọn Trang giá">
      </label>
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/2">Trang giá</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="Thao tác cho Trang giá">
            <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">Sửa</a>
            <hr>
            <a class="rst-danger" href="/images/2/delete">Xóa…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc="none">Không có mô tả</p>
      <p rst-media-meta>1280 × 2400 · 318 KB</p>
    </div>
  </div>
</div>

Đặt đoạn này bên trong <div rst-list>.

{{template "media-grid" dict
    "Items" (list
        (dict "Desc" "Bước thanh toán, với biểu mẫu thẻ đang mở." "Height" 3200 "Href" "/images/1" "Menu" (list (dict "Href" "/images/1/edit" "Label" "Sửa") (dict "Danger" true "Href" "/images/1/delete" "Label" "Xóa…")) "Meta" "1280 × 3200 · 412 KB" "Name" "Thanh toán, bước 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" "Sửa") (dict "Danger" true "Href" "/images/2/delete" "Label" "Xóa…")) "Meta" "1280 × 2400 · 318 KB" "Name" "Trang giá" "Select" "2" "Src" "/images/pricing.png" "Width" 1280))}}

Bọc lưới và một bulk-bar trong cùng một biểu mẫu. Mỗi hộp kiểm gửi giá trị Select của ô mình dưới tên "id"; đặt SelectName để đổi tên. Bên trong biểu mẫu, các mục menu phải là liên kết.

pagination

Một dải liên kết thường có đánh số, để việc phân trang vẫn chạy khi tắt JavaScript.

Giữa một danh sách dài

Máy tính Điện thoại HTML Template

<nav rst-pagination aria-label="Các trang bài viết">
  <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>Trước</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>Tiếp</span></a>
</nav>

{{template "pagination" dict
    "Items" (list
        (dict "Href" "/posts?page=3" "Label" "Trước" "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" "Tiếp" "Rel" "next"))
    "Label" "Các trang bài viết"}}

Trang đầu, tên trợ năng mặc định

Máy tính Điện thoại HTML Template

<nav rst-pagination aria-label="Phân trang">
  <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>Trước</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>Tiếp</span></a>
</nav>

{{template "pagination" dict
    "Items" (list
        (dict "Disabled" true "Label" "Trước" "Rel" "prev")
        (dict "Current" true "Label" "1")
        (dict "Href" "/posts?page=2" "Label" "2")
        (dict "Href" "/posts?page=2" "Label" "Tiếp" "Rel" "next"))}}

Không có Label, nên tên trợ năng của nav lấy từ danh mục.

empty-state

Thẻ trạng thái trống. Trạng thái trống kèm lối vào cho các bước bắt đầu.

Kèm một lời kêu gọi hành động bằng POST

Máy tính Điện thoại HTML Template

<div rst-empty>
  <h2 rst-empty-title>Chưa có gì ở đây</h2>
  <p rst-empty-body>Chưa có bài viết nào. Bài đầu tiên là điểm khởi đầu tốt.</p>
  <form rst-empty-cta method="post" action="/posts/seed">
    <input type="hidden" name="csrf" value="tok-123">
    <button rst-btn="primary" type="submit">Thêm bài viết mẫu</button>
  </form>
</div>

{{template "empty-state" dict
    "Body" "Chưa có bài viết nào. Bài đầu tiên là điểm khởi đầu tốt."
    "Title" "Chưa có gì ở đây"
    "ActionLabel" "Thêm bài viết mẫu"
    "PostAction" "/posts/seed"
    "Hidden" (list (list "csrf" "tok-123"))}}

Chỉ một câu

Máy tính Điện thoại HTML Template

<div rst-empty>
  <p rst-empty-body>Bài viết này chưa có bình luận.</p>
</div>

{{template "empty-state" dict "Body" "Bài viết này chưa có bình luận."}}