Tổng quan mọi thứ hệ thống thiết kế cung cấp. Chủ đề: day. Ngôn ngữ: Tiếng Việt.
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.
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.
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.
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.
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.
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 đó.
<div rst-list><div rst-row>
<span rst-row-main><a href="/posts/2">Why we moved off the old runner</a><small rst-row-sub>Draft · saved 20 minutes ago</small></span>
</div></div>
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.
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
<div rst-empty>
<h2 rst-empty-title>Nothing here yet</h2>
<p rst-empty-body>No posts yet. Your first one is a good place to start.</p>
<form rst-empty-cta method="post" action="/posts/seed">
<input type="hidden" name="csrf" value="tok-123">
<button rst-btn="primary" type="submit">Add sample posts</button>
</form>
</div>
Chỉ một câu
<div rst-empty>
<p rst-empty-body>No comments on this post yet.</p>
</div>