Tổng quan mọi thứ hệ thống thiết kế cung cấp. Chủ đề: signal. Ngôn ngữ: Tiếng Việt.
Nguyên thể giao diện
Những hình thù mà một thành phần không thể là, vì chúng bọc lấy một phần thân chỉ bên gọi mới biết: thẻ mục, lưới dữ liệu, menu bung ra, và khung riêng của các lớp vỏ. tokens.css cung cấp các lớp, còn ứng dụng viết mã đánh dấu. Mọi thứ bên dưới đúng là mẫu mà ui.Styleguide trả về, cũng là mẫu mà các bài kiểm tra của ui đối chiếu với tokens.css.
Các liên kết ở đây không hoạt động
Liên kết không hoạt động, mã nguồn mẫu được cung cấp kèm.
box
Thẻ mục có đệm, và tiêu đề nằm bên ngoài nó.
Thẻ nào là thẻ nào
rst-list và rst-card cố ý không có đệm: chúng chứa một chuỗi hàng, và mỗi hàng tự đệm cho mình. Nhét thẳng vào đó một biểu mẫu, một đoạn văn, một dải liên kết hay bất cứ thứ gì không phải hàng thì nó sẽ dựng sát vào đường viền — chữ chạm mép chính là dấu hiệu. Thẻ có đệm dành cho nội dung bất kỳ là rst-box, với tiêu đề của nó là rst-box-head anh em đặt ngay trước.
<div rst-box-head><h2>Payout</h2><a rst-btn href="/payout/edit">Edit</a></div>
<section rst-box><p>Everything on a screen sits inside boxes.</p><div rst-box-foot>Last updated 2 hours ago</div></section>
dropdown
Trình đơn details/summary nằm sau các trình đơn tràn ở đầu trang và bộ lọc của thanh danh sách, cùng một bộ lọc đã áp dụng dưới dạng chip gỡ được.
Những thuộc tính mang lại cho biểu mẫu nhịp điệu và thanh lưu của nó. Không mảnh nào phát ra chúng — chúng bọc quanh một chuỗi trường do bên gọi tự soạn.
Bộ từ vựng thật của bảng dữ liệu: thẻ định các cột một lần, các hàng chỉ chọn ô.
Màn hình xếp chồng theo chiều dọc
Một màn hình là một cột: page-header, rồi section-header cùng thẻ, rồi section-header và thẻ tiếp theo, theo thứ tự đọc. Cách xếp ngang chỉ dành cho những lối viết vốn mang sẵn nó: rst-box-head, rst-field-row, rst-lbar, các ô rst-lrow, rst-seg-tabs.
Hộp thoại là một URL riêng, không phải trạng thái phía trình duyệt: trang bên dưới được đánh dấu inert, tấm panel nằm trên, và đóng lại bằng một liên kết bình thường.
<div rst-backdrop inert>
<div rst-page><h1>Settings</h1></div>
</div>
<div rst-modal-overlay>
<dialog rst-modal-panel open aria-labelledby="modal-title">
<nav>
<a href="/settings/profile" aria-current="page">Profile</a>
<a href="/settings/billing">Billing</a>
<a href="/settings/notifications">Notifications</a>
</nav>
<section>
<a rst-modal-close href="/settings" aria-label="Close settings">✕</a>
<h2 id="modal-title">Profile</h2>
<p>Update the name and photo shown across the account.</p>
</section>
</dialog>
</div>
Một thẻ có viền, phần thân chỉ hiện khi công tắc của nó đang bật, qua :has(). Công tắc mới là trạng thái thật; việc hiện ra chỉ là tiện lợi khi hiển thị.
<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>Email notifications</span><span rst-tblock-desc>Sent for every reply to a thread you're in.</span></span>
</label>
<div rst-tblock-body>
<div rst-field>
<label rst-field-label for="notify-freq">Frequency</label>
<input rst-input type="text" id="notify-freq" name="notify_freq" value="Daily digest">
</div>
</div>
</div>