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 là mã đánh dấu mà ui.Styleguide trả về, với chữ bằng ngôn ngữ của bạn, và các bài kiểm tra của ui đối chiếu chính mã đánh dấu đó với tokens.css.

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.

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.

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

<div rst-box-head>
  <h2>Khoản chi trả</h2>
  <a rst-btn href="/payout/edit">Sửa</a>
</div>
<section rst-box>
  <p>Mọi thứ trên màn hình đều nằm trong các hộp.</p>
  <div rst-box-foot>Cập nhật 2 giờ trước</div>
</section>

button

Nút có bốn kiểu và ba cỡ, và một liên kết cũng có thể trông như nút. Về vòng quay mà biểu mẫu hiện khi đang gửi, xem form-foot.

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

<p>
  <button rst-btn type="button">Huỷ</button> <button rst-btn="primary" type="button">Lưu</button> <button rst-btn="ghost" type="button">Xem trước</button> <button rst-btn="danger" type="button">Xóa</button>
</p>
<p>
  <button rst-btn="primary sm" type="button">Nhỏ</button> <button rst-btn="primary" type="button">Mặc định</button> <button rst-btn="primary lg" type="button">Lớn</button> <a rst-btn href="/orders">Xem đơn hàng</a>
</p>
<p>
  <button rst-btn="primary block" type="button">Tiếp tục</button>
</p>
<p>
  <button rst-btn type="button" disabled>Đã lưu trữ</button>
</p>

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.

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

<details rst-dropdown name="rst-menus">
  <summary>
    Lọ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>
    <span class="rst-sr-only">Lọc đơn hàng: Đã thanh toán</span>
  </summary>
  <div rst-dropdown-menu>
    <a aria-current="true" href="/orders?status=paid">Đã thanh toán</a>
    <details rst-menu-group name="rst-menus-price" open>
      <summary>Giá</summary>
      <div>
        <a href="/orders?price=free">Miễn phí</a>
      </div>
    </details>
  </div>
</details>
<span rst-ftok>
  <span rst-ftok-k>Đã thanh toán</span>
  <a href="/orders" aria-label="Bỏ bộ lọc Đã thanh toán">✕</a>
</span>

form-layout

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.

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

<form rst-form-flow method="post" action="/settings">
  <div rst-field>
    <label rst-field-label for="name">Tên</label>
    <input rst-input type="text" id="name" name="name">
  </div>
  <div rst-field>
    <label rst-field-label for="email">Email</label>
    <input rst-input type="email" id="email" name="email">
  </div>
  <div rst-field-row>
    <div class="rst-grow" rst-field>
      <label rst-field-label for="city">Thành phố</label>
      <input rst-input type="text" id="city" name="city">
    </div>
    <div rst-field>
      <label rst-field-label for="zip">Mã bưu điện</label>
      <input rst-input="short" type="text" id="zip" name="zip">
    </div>
  </div>
  <div rst-form-bar>
    <span rst-form-bar-note>Thay đổi được lưu ngay.</span>
    <div rst-form-actions>
      <a rst-btn href="/settings">Huỷ</a>
      <button rst-btn="primary" type="submit">Lưu</button>
    </div>
  </div>
</form>

help

Một dấu hỏi có viền, dẫn tới bài trợ giúp. Chú giải CSS của nó chỉ là trang trí; bản thân liên kết mang nhãn là một câu đầy đủ.

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

<a rst-help rst-tip href="/help/orders" target="_blank" rel="noopener" aria-label="Trợ giúp: đơn hàng" data-tip="Về đơn hàng">
  <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.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
</a>

list-grid

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.

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

<div rst-card style="--rst-cols: 2fr 110px var(--rst-col-menu)">
  <div rst-lrow="head">
    <span>Đơn hàng</span>
    <span class="rst-m-hide">Trạng thái</span>
    <span></span>
  </div>
  <div rst-lrow>
    <a class="rst-nm" href="/orders/AB3PX"><bdi>Grace Hopper</bdi>
      <small>AB3PX · <bdi>grace@example.com</bdi></small>
    </a>
    <span class="rst-m-hide rst-cell-mut">Đã thanh toán</span>
    <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">Xem</a>
        <hr>
        <a class="rst-danger" href="/orders/AB3PX/refund">Hoàn tiền đơn hàng…</a>
      </div>
    </details>
  </div>
  <p rst-no-match>Không có đơn hàng nào khớp. <a href="/orders">Xóa bộ lọc</a></p>
</div>
<p rst-count-line>Đang hiển thị <strong>1–20</strong> trên <strong>412</strong></p>

modal

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.

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

<div rst-backdrop inert>
  <div rst-page>
    <h1>Cài đặt</h1>
  </div>
</div>
<div rst-modal-overlay>
  <dialog rst-modal-panel open aria-labelledby="modal-title">
    <nav>
      <a href="/settings/profile" aria-current="page">Hồ sơ</a>
      <a href="/settings/billing">Thanh toán</a>
      <a href="/settings/notifications">Thông báo</a>
    </nav>
    <section>
      <a rst-modal-close href="/settings" aria-label="Đóng phần cài đặt">✕</a>
      <h2 id="modal-title">Hồ sơ</h2>
      <p>Cập nhật tên và ảnh hiển thị trên toàn bộ tài khoản.</p>
    </section>
  </dialog>
</div>

Xem nó chạy thật tại đúng URL của nó (mở trong tab mới).

selbox

Hộp kiểm chọn mà một hàng danh sách mang khi ở chế độ chọn. Nhãn của nó nhắc lại danh tính của hàng.

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

<label rst-selbox>
  <input type="checkbox" aria-label="Chọn đơn hàng AB3PX">
</label>

shell-sidebar

Bộ khung của shell sidebar trên một trang nội dung: trên điện thoại, đó là nút quay lại trang mục lục.

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

<div rst-shell-sidebar="page">
  <a rst-skip href="#main">Đi tới nội dung</a>
  <div rst-shell-back>
    <a href="/#nav-reports" rel="up" aria-label="Quay lại Mục">Mục</a>
  </div>
  <aside rst-shell-rail>
    <h1 rst-shell-title>
      <span><a rst-shell-brand href="/">Notes</a></span><span>Báo cáo</span>
    </h1>
    <a rst-shell-brand href="/">Notes</a>
    <nav rst-shell-nav>
      <span rst-shell-group>Công việc</span>
      <a id="nav-dashboard" href="/dashboard">Bảng tổng quan</a>
      <a id="nav-reports" href="/reports" aria-current="page">Báo cáo</a>
    </nav>
    <div rst-shell-rail-foot>
      <details rst-dropdown rst-shell-profile name="rst-shell-menu">
        <summary>
          <span rst-shell-avatar>
            <span rst-person-av aria-hidden="true">A</span>
            <span rst-person-name>Ada Lovelace</span>
          </span>
        </summary>
        <div rst-dropdown-menu>
          <div rst-shell-who>
            <span rst-person-av aria-hidden="true">A</span>
            <span rst-person-name>Ada Lovelace</span>
            <span rst-person-email>ada@example.com</span>
          </div>
          <a href="/settings">Cài đặt</a>
        </div>
      </details>
    </div>
  </aside>
  <main rst-shell-main id="main">
    <div rst-page>Nội dung.</div>
  </main>
</div>

Mở bản trình diễn khung có thanh bên, một trang xem trước riêng. (mở trong tab mới).

shell-topbar

Khung riêng của vỏ có thanh trên, dưới dạng mã đánh dấu. Layout cung cấp nó như một mẫu hoàn chỉnh.

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

<div rst-shell-topbar>
  <a rst-skip href="#main">Đi tới nội dung</a>
  <header rst-shell-bar>
    <a rst-shell-brand href="/">Notes</a>
    <details rst-shell-menu name="rst-shell-menu">
      <summary>
        <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="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg>Trình đơn</summary>
    </details>
    <div rst-shell-tail>
      <nav rst-shell-nav>
        <a href="/" aria-current="page">Trang chủ</a>
        <a href="/archive">Lưu trữ</a>
      </nav>
      <details rst-dropdown rst-shell-account name="rst-menus">
        <summary>
          Tài khoản
          <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>
          <a href="/settings">Cài đặt</a>
        </div>
      </details>
    </div>
  </header>
  <main rst-page id="main">Nội dung.</main>
  <footer rst-shell-foot>Làm bằng rastrillo</footer>
</div>

Mở bản trình diễn khung có thanh trên, một trang xem trước riêng cho nó. (mở trong tab mới).

stat-band

Một hàng chỉ số chạy ngang phía trên bảng điều khiển.

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

<div rst-stats>
  <div rst-stat="lead">
    <span rst-stat-label>Doanh thu tháng này</span>
    <span rst-stat-num>&euro;48,210</span>
    <span rst-stat-delta rst-tone="positive">+12%</span>
    <span rst-stat-note>so với tháng trước</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>Đơn hàng hôm nay</span>
    <span rst-stat-num>318</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>Giá trị đơn trung bình</span>
    <span rst-stat-num>&euro;41.20</span>
    <span rst-stat-delta rst-tone="negative">&minus;3%</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>Hoàn tiền</span>
    <span rst-stat-num>7</span>
  </div>
</div>

tblock

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ị.

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

<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>Thông báo qua email</span>
      <span rst-tblock-desc>Gửi cho mỗi trả lời trong chuỗi thảo luận bạn tham gia.</span>
    </span>
  </label>
  <div rst-tblock-body>
    <div rst-field>
      <label rst-field-label for="notify-freq">Tần suất</label>
      <input rst-input type="text" id="notify-freq" name="notify_freq" value="Bản tóm tắt hằng ngày">
    </div>
  </div>
</div>