Tổng quan mọi thứ hệ thống thiết kế cung cấp. Chủ đề: signal. Ngôn ngữ: Tiếng Việt.
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.
Các phần tử giao diện dựng sẵn, nhất quán với nhau, được kết xuất ở phía máy chủ.
Từ vựng của chính framework gọi chúng là partial: ui.Templates() trả về partial, và docs/site/templates.md ghi chúng dưới tên đó. Chữ trên trang này đã đổi; chữ trong mã thì không.
Liên kết không hoạt động, mã nguồn mẫu được cung cấp kèm.
Mỗi mẫu bên dưới nằm trong khung riêng của nó.
Nội dung mẫu để tiếng Anh. Phần vỏ mẫu thì được dịch.
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ữ.
Sắc thái mặc định (neutral)
<span rst-status rst-tone="neutral">Draft</span>neutral
<span rst-status rst-tone="neutral">Draft</span>positive
<span rst-status rst-tone="positive">Published</span>warning
<span rst-status rst-tone="warning">Scheduled</span>negative
<span rst-status rst-tone="negative">Failed</span>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.
Không có tông (mặc định trầm)
<span rst-badge>Draft</span>neutral
<span rst-badge="neutral">Internal</span>positive
<span rst-badge="positive">Live</span>warning
<span rst-badge="warning">Beta</span>negative
<span rst-badge="negative">Sold out</span>Thanh dung lượng kèm con số.
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>Phần tô được giới hạn ở 100% trong partial.
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
<div rst-stats><div rst-stat="lead"><span rst-stat-label>Revenue this month</span><span rst-stat-num>€48,210</span><span rst-stat-delta rst-tone="positive">+12%</span><span rst-stat-note>vs. last month</span></div></div>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
<div rst-stats><div rst-stat><span rst-stat-label>Unpaid invoices</span><span rst-stat-num>24</span></div></div>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
<div rst-stats><div rst-stat><span rst-stat-label>Time to first reply</span><span rst-stat-num>1h 12m</span><span rst-stat-delta rst-tone="positive">−38%</span><span rst-stat-note>vs. last week</span></div></div>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
<div rst-stats><div rst-stat><span rst-stat-label>Failed payments</span><span rst-stat-num>9</span><span rst-stat-delta rst-tone="negative">+3</span><span rst-stat-note>vs. last week</span></div></div>Ở đâ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
<div rst-stats><div rst-stat><span rst-stat-label>Average session length</span><span rst-stat-num>4m 12s</span><span rst-stat-delta rst-tone="neutral">+18s</span><span rst-stat-note>since Friday</span></div></div>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
<div rst-stats><div rst-stat><span rst-stat-label>Messages sent</span><span rst-stat-num><data value="4120">4.1k</data></span></div></div>Đ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ố.
Ả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
<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>Cỡ lớn, kích thước cho đầu trang xem
<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>Không có chữ đầu
<a rst-person href="/people/3"><span rst-person-av="empty" aria-hidden="true"></span><span rst-person-meta><span rst-person-name>Unclaimed invitation</span><span rst-person-email>invited@example.com</span></span></a>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.
Sắc thái mặc định (info), không tiêu đề
<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>Posts are visible to members only until the site is published.</p></div></div>info
<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>Posts are visible to members only until the site is published.</p></div></div>positive
<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>Payments are connected</strong><p>You can take payment for tickets now.</p></div></div>warning
<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>Connect payments to start selling</strong><p>Your event is live but cannot take payment yet.</p></div></div>negative
<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>The last import failed</strong><p>Nothing was changed. Fix row 91 and try again.</p></div></div>negative, được đọc lên như một cảnh báo
<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>The import stopped</strong><p>Nothing was changed. Fix row 91 and try again.</p></div></div>alert thêm role="alert" để hiển thị những thông báo quan trọng.
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
<section rst-box><dl rst-detail>
<dt>Audience</dt>
<dd>Members</dd>
<dt>Main page</dt>
<dd>No</dd>
<dt>Published</dt>
<dd><time datetime="2026-08-02">2 August 2026</time></dd>
<dt>Reference</dt>
<dd class="rst-mono">post_01H9ZQ</dd>
</dl></section>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
<p rst-notice role="status">Post saved.</p>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
<p rst-form-error role="alert">That title is already taken.</p>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
<div rst-job data-poll="/jobs/1/fragment" data-poll-every="2">
<span rst-spin aria-hidden="true"></span> <strong>Import</strong> is running — 128 of 400…
<progress rst-job-bar value="32" min="0" max="100" aria-hidden="true"></progress>
</div>
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
<div rst-job>
<strong>Import</strong> finished.
</div>
Thất bại
<div rst-job>
<strong>Import</strong> failed: row 91: no such column "published"
</div>