Hiển thị

Những mẩu từ vựng nhỏ dùng ráp nên một màn hình: trạng thái, danh tính, tiến độ, và hình dạng cảnh báo duy nhất.

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.

status-pill

Trạng thái bản ghi dưới dạng viên nhãn có màu, gồm màu và nhãn chữ.

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

neutral

<span rst-status rst-tone="neutral">Bản nháp</span>

positive

<span rst-status rst-tone="positive">Đã đăng</span>

warning

<span rst-status rst-tone="warning">Đã lên lịch</span>

negative

<span rst-status rst-tone="negative">Thất bại</span>

neutral

{{template "status-pill" dict "Label" "Bản nháp"}}

positive

{{template "status-pill" dict "Label" "Đã đăng" "Tone" "positive"}}

warning

{{template "status-pill" dict "Label" "Đã lên lịch" "Tone" "warning"}}

negative

{{template "status-pill" dict "Label" "Thất bại" "Tone" "negative"}}

neutral Tone mặc định là neutral, nên lời gọi này bỏ nó đi.

badge

Một chip có viền, chữ in hoa, dùng cho những dấu hiệu nhỏ và cố định. Khác với status-pill, vốn là trạng thái của bản ghi.

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

Không có tông (mặc định trầm)

<span rst-badge>Bản nháp</span>

neutral

<span rst-badge="neutral">Nội bộ</span>

positive

<span rst-badge="positive">Đang chạy</span>

warning

<span rst-badge="warning">Thử nghiệm</span>

negative

<span rst-badge="negative">Hết hàng</span>

Không có tông (mặc định trầm)

{{template "badge" dict "Label" "Bản nháp"}}

neutral

{{template "badge" dict "Label" "Nội bộ" "Tone" "neutral"}}

positive

{{template "badge" dict "Label" "Đang chạy" "Tone" "positive"}}

warning

{{template "badge" dict "Label" "Thử nghiệm" "Tone" "warning"}}

negative

{{template "badge" dict "Label" "Hết hàng" "Tone" "negative"}}

meter

Thanh dung lượng kèm con số.

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

Trống

<span rst-meter>
  <meter rst-meter-bar value="0" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>0/500</span>
</span>

Được một phần

<span rst-meter>
  <meter rst-meter-bar value="42" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>210/500</span>
</span>

Gần đầy

<span rst-meter>
  <meter rst-meter-bar value="82" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>412/500</span>
</span>

Đầy

<span rst-meter>
  <meter rst-meter-bar value="100" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>500/500</span>
</span>

Vượt hạn mức

<span rst-meter>
  <meter rst-meter-bar value="100" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>700/500</span>
</span>

Trống

{{template "meter" dict "Percent" 0 "Text" "0/500"}}

Được một phần

{{template "meter" dict "Percent" 42 "Text" "210/500"}}

Gần đầy

{{template "meter" dict "Percent" 82 "Text" "412/500"}}

Đầy

{{template "meter" dict "Percent" 100 "Text" "500/500"}}

Vượt hạn mức

{{template "meter" dict "Percent" 140 "Text" "700/500"}}

Vượt hạn mức Phần tô được giới hạn ở 100% trong partial.

stat

Một con số trên bảng điều khiển, kèm nhãn và mức thay đổi.

Con số lớn

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

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

<div rst-stat="lead">
  <span rst-stat-label>Doanh thu tháng này</span>
  <span rst-stat-num>€48,210</span>
  <span rst-stat-delta rst-tone="positive">&#43;12%</span>
  <span rst-stat-note>so với tháng trước</span>
</div>

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

{{template "stat" dict
    "Label" "Doanh thu tháng này"
    "Value" "€48,210"
    "Delta" "+12%"
    "Tone" "positive"
    "Note" "so với tháng trước"
    "Lead" true}}

Thêm Lead vào một chỉ số trong hàng để nó to lên. Vẫn là thành phần đó, chỉ lớn hơn.

Một con số nhỏ hơn

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

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

<div rst-stat>
  <span rst-stat-label>Hóa đơn chưa thanh toán</span>
  <span rst-stat-num>24</span>
</div>

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

{{template "stat" dict "Label" "Hóa đơn chưa thanh toán" "Value" "24"}}

Bạn chỉ cần một nhãn và một con số. Mọi thứ khác đều tùy chọn.

Khi giảm là tốt

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

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

<div rst-stat>
  <span rst-stat-label>Thời gian đến lần trả lời đầu</span>
  <span rst-stat-num>1 giờ 12 phút</span>
  <span rst-stat-delta rst-tone="positive">−38%</span>
  <span rst-stat-note>so với tuần trước</span>
</div>

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

{{template "stat" dict
    "Label" "Thời gian đến lần trả lời đầu"
    "Value" "1 giờ 12 phút"
    "Delta" "−38%"
    "Tone" "positive"
    "Note" "so với tuần trước"}}

Bạn đặt màu, không phải thành phần. Ở đây con số đã giảm và đó là tin tốt, nên mức thay đổi hiển thị màu xanh.

Khi tăng là xấu

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

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

<div rst-stat>
  <span rst-stat-label>Thanh toán thất bại</span>
  <span rst-stat-num>9</span>
  <span rst-stat-delta rst-tone="negative">&#43;3</span>
  <span rst-stat-note>so với tuần trước</span>
</div>

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

{{template "stat" dict
    "Label" "Thanh toán thất bại"
    "Value" "9"
    "Delta" "+3"
    "Tone" "negative"
    "Note" "so với tuần trước"}}

Ở đây con số đã tăng và đó là tin xấu, nên mức thay đổi hiển thị màu đỏ.

Khi không thể nói được

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

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

<div rst-stat>
  <span rst-stat-label>Thời lượng phiên trung bình</span>
  <span rst-stat-num>4 phút 12 giây</span>
  <span rst-stat-delta rst-tone="neutral">&#43;18 giây</span>
  <span rst-stat-note>từ thứ Sáu</span>
</div>

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

{{template "stat" dict
    "Label" "Thời lượng phiên trung bình"
    "Value" "4 phút 12 giây"
    "Delta" "+18 giây"
    "Note" "từ thứ Sáu"}}

Bỏ trống màu thì mức thay đổi sẽ là màu xám. Hãy làm vậy khi bạn không thể nói nó tốt hay xấu.

Một con số rút gọn

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

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

<div rst-stat>
  <span rst-stat-label>Tin nhắn đã gửi</span>
  <span rst-stat-num><data value="4120">4.1k</data></span>
</div>

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

{{template "stat" dict "Label" "Tin nhắn đã gửi" "Value" "4.1k" "Exact" "4120"}}

Đang hiển thị 4.1k thay vì 4120? Hãy đặt con số đầy đủ vào Exact. Trình đọc màn hình chỉ đọc những gì hiển thị, nên hãy giữ mọi thứ người dùng cần ngay trong con số.

person

Ảnh đại diện chữ cái đầu, tên và email. Giúp nhận ra nhanh các bản ghi về người.

Tên và email

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

<a rst-person href="/people/1">
  <span rst-person-av aria-hidden="true">G</span>
  <span rst-person-meta>
    <span rst-person-name>Grace Hopper</span>
    <span rst-person-email>grace@example.com</span>
  </span>
</a>

{{template "person" dict
    "Href" "/people/1"
    "Name" "Grace Hopper"
    "Email" "grace@example.com"
    "Initial" "G"}}

Cỡ lớn, kích thước cho đầu trang xem

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

<a rst-person="lg" href="/people/2">
  <span rst-person-av aria-hidden="true">A</span>
  <span rst-person-meta>
    <span rst-person-name>Ada Lovelace</span>
    <span rst-person-email>ada@example.com</span>
  </span>
</a>

{{template "person" dict
    "Href" "/people/2"
    "Name" "Ada Lovelace"
    "Email" "ada@example.com"
    "Initial" "A"
    "Large" true}}

Không có chữ đầu

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

<a rst-person href="/people/3">
  <span rst-person-av="empty" aria-hidden="true"></span>
  <span rst-person-meta>
    <span rst-person-name>Lời mời chưa nhận</span>
    <span rst-person-email>invited@example.com</span>
  </span>
</a>

{{template "person" dict
    "Href" "/people/3"
    "Name" "Lời mời chưa nhận"
    "Email" "invited@example.com"}}

actor

Ai đã làm gì, bằng chữ: tên một người, hoặc tác tử và người mà nó thay mặt. Không huy hiệu, không biểu tượng.

Một tác tử thay mặt một người

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

<span rst-actor>Claude thay mặt Grace Hopper</span>

{{template "actor" dict "Actor" .Actor}}

Đặt ui.ActorName một lần khi khởi động để đổi một chủ thể thành tên. Chính ứng dụng, Actor rỗng, không hiển thị gì.

Một người

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

<span rst-actor>Grace Hopper</span>

{{template "actor" dict "Actor" .Actor}}

callout

Bộ từ vựng cảnh báo duy nhất: dải có màu, biểu tượng sắc thái, tiêu đề in đậm tùy chọn, và một đoạn nội dung.

info

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

<div rst-callout rst-tone="info">
  <span rst-callout-ic 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"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
  </span>
  <div rst-callout-body>
    <p>Bài viết chỉ thành viên mới xem được cho đến khi trang được xuất bản.</p>
  </div>
</div>

{{template "callout" dict
    "Body" "Bài viết chỉ thành viên mới xem được cho đến khi trang được xuất bản."
    "Tone" "info"}}

positive

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

<div rst-callout rst-tone="positive">
  <span rst-callout-ic 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"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
  </span>
  <div rst-callout-body>
    <strong>Đã kết nối thanh toán</strong>
    <p>Giờ bạn có thể nhận thanh toán cho vé.</p>
  </div>
</div>

{{template "callout" dict
    "Body" "Giờ bạn có thể nhận thanh toán cho vé."
    "Title" "Đã kết nối thanh toán"
    "Tone" "positive"}}

warning

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

<div rst-callout rst-tone="warning">
  <span rst-callout-ic 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="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
  </span>
  <div rst-callout-body>
    <strong>Kết nối thanh toán để bắt đầu bán</strong>
    <p>Sự kiện của bạn đã mở nhưng chưa thể nhận thanh toán.</p>
  </div>
</div>

{{template "callout" dict
    "Body" "Sự kiện của bạn đã mở nhưng chưa thể nhận thanh toán."
    "Title" "Kết nối thanh toán để bắt đầu bán"
    "Tone" "warning"}}

negative

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

<div rst-callout rst-tone="negative">
  <span rst-callout-ic 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"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
  </span>
  <div rst-callout-body>
    <strong>Lần nhập gần nhất đã thất bại</strong>
    <p>Không có gì bị thay đổi. Sửa dòng 91 rồi thử lại.</p>
  </div>
</div>

{{template "callout" dict
    "Body" "Không có gì bị thay đổi. Sửa dòng 91 rồi thử lại."
    "Title" "Lần nhập gần nhất đã thất bại"
    "Tone" "negative"}}

negative, được đọc lên như một cảnh báo

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

<div rst-callout rst-tone="negative" role="alert">
  <span rst-callout-ic 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"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
  </span>
  <div rst-callout-body>
    <strong>Quá trình nhập đã dừng</strong>
    <p>Không có gì bị thay đổi. Sửa dòng 91 rồi thử lại.</p>
  </div>
</div>

{{template "callout" dict
    "Body" "Không có gì bị thay đổi. Sửa dòng 91 rồi thử lại."
    "Title" "Quá trình nhập đã dừng"
    "Tone" "negative"
    "Alert" true}}

alert thêm role="alert" để hiển thị những thông báo quan trọng.

detail-list

Danh sách định nghĩa về một bản ghi trên màn hình chi tiết. Dấu mono dành cho các giá trị thiên về máy.

Bốn thông tin, một cái thiên về máy

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

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

<dl rst-detail>
  <dt>Đối tượng</dt>
  <dd>Thành viên</dd>
  <dt>Trang chính</dt>
  <dd>Không</dd>
  <dt>Đã đăng</dt>
  <dd>
    <time datetime="2026-08-02">2 tháng 8, 2026</time>
  </dd>
  <dt>Mã tham chiếu</dt>
  <dd class="rst-mono">post_01H9ZQ</dd>
</dl>

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

{{template "detail-list" dict
    "Items" (list
        (dict "Label" "Đối tượng" "Value" "Thành viên")
        (dict "Label" "Trang chính" "Value" "Không")
        (dict "DateTime" "2026-08-02" "Label" "Đã đăng" "Value" "2 tháng 8, 2026")
        (dict "Label" "Mã tham chiếu" "Mono" true "Value" "post_01H9ZQ"))}}

notice

Một dòng xác nhận sau khi chuyển hướng. Nhận một chuỗi thường chứ không phải dict, và không vẽ gì khi chuỗi rỗng.

Một thông báo đã lưu

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

<p rst-notice role="status">Đã lưu bài viết.</p>

{{template "notice" "Đã lưu bài viết."}}

region:notice

Thông báo mà mọi khung giữ trên trang, hiển thị Notice trong dữ liệu trang, để trình đọc màn hình nghe được tin nhắn và live.js có thể điền tại chỗ.

Một thông báo đã lưu

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

<div id="notice" role="status">
  <p rst-notice>Đã lưu bài viết.</p>
</div>

{{template "region:notice" dict "Notice" "Đã lưu bài viết."}}

form-error

Dòng tóm tắt lỗi của biểu mẫu, role="alert". Nhận một chuỗi thường; không vẽ gì khi không có lỗi.

Một lần gửi bị từ chối

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

<p rst-form-error role="alert">Tiêu đề đó đã được dùng.</p>

{{template "form-error" "Tiêu đề đó đã được dùng."}}

job-status

Mảnh giao diện được thăm dò của một tác vụ nền. Thuộc tính data-poll chỉ xuất hiện khi tác vụ còn chạy: bỏ nó đi chính là cách dừng thăm dò.

Đang chạy

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


<div rst-job data-poll="/jobs/1/fragment" data-poll-every="2">
  <span rst-spin aria-hidden="true"></span> <bdi><strong>Nhập dữ liệu</strong></bdi> đang chạy: <bdi>128 trên 400</bdi>…
  <progress rst-job-bar value="32" min="0" max="100" aria-hidden="true"></progress>
</div>

{{template "job-status" dict
    "Name" "Nhập dữ liệu"
    "Percent" 32
    "PollSeconds" 2
    "PollURL" "/jobs/1/fragment"
    "Progress" "128 trên 400"
    "Status" "running"}}

Cái này có thăm dò: nó là mẫu duy nhất trên trang hỏi mạng lấy thứ gì đó, và trên một trang tĩnh thì chẳng bao giờ có hồi đáp.

Đã xong

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


<div rst-job>
  <bdi><strong>Nhập dữ liệu</strong></bdi> đã hoàn tất.
</div>

{{template "job-status" dict "Name" "Nhập dữ liệu" "Status" "done"}}

Thất bại

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


<div rst-job>
  <bdi><strong>Nhập dữ liệu</strong></bdi> không thành công: <bdi>row 91: no such column &#34;published&#34;</bdi>
</div>

{{template "job-status" dict
    "Err" "row 91: no such column \"published\""
    "Name" "Nhập dữ liệu"
    "Status" "failed"}}