CSS: side-nav-bar

.instui-side-nav-bar — Một thanh điều hướng dọc gồm các mục có biểu tượng trên nhãn, với chế độ tối giản chỉ biểu tượng.

Đặt gap riêng giữa các mục điều hướng và padding riêng của nó; xâu nối một bộ sửa đổi tiện ích khoảng cách -gap-*/-p-*/-padding-* sẽ ghi đè các giá trị mặc định đó. Xem thành viên side-nav-bar.item để biết từng mục điều hướng.

Source: item.css

Khả năng truy cập

Gắn nhãn cho <nav> bằng aria-label để nó được thông báo như một cột mốc điều hướng có tên.

Sử dụng

@import "@pantoken/components/components.css";
@import "@pantoken/components/side-nav-bar.css";

Các ví dụ

<nav class="instui-side-nav-bar" aria-label="Primary">
  <a class="item -selected" href="#">
    <span class="instui-icon -icon-house"></span>
    <span class="label">Home</span>
  </a>
  <a class="item" href="#">
    <span class="instui-icon -icon-inbox"></span>
    <span class="label">Inbox</span>
  </a>
  <a class="item" href="#">
    <span class="instui-icon -icon-calendar"></span>
    <span class="label">Calendar</span>
  </a>
  <a class="item" href="#">
    <span class="instui-icon -icon-settings"></span>
    <span class="label">Settings</span>
  </a>
</nav>

Cấu trúc

.instui-side-nav-bar
  side-nav-bar.item (component, 1..n)

flowchart TD n0[".instui-side-nav-bar"]:::cssdoc-root n1(["side-nav-bar.item"]):::cssdoc-component n0 -->|1..n| n1 click n1 "/api/css/side-nav-bar.item.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Bộ sửa

Bộ sửa	Mô tả
.-icon-*	Hiển thị một biểu tượng glyph trong mỗi mục điều hướng.
.-minimized	Thu gọn chỉ còn biểu tượng (nhãn ẩn). @affects side-nav-bar.item — Ẩn nhãn của mục.

Phần

Phần	Mô tả
.label	Nhãn văn bản của mục điều hướng.

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-component-side-nav-bar-background-color	<color>	LightDarklight-dark(#ffffff, #273540)
--instui-component-side-nav-bar-content-gap	<length>	0.25rem
--instui-component-side-nav-bar-content-margin	<length>	0.375rem
--instui-component-side-nav-bar-font-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-side-nav-bar-item-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-side-nav-bar-minimized-width	<length>	3.75rem

Các thành phần phụ

• side-nav-bar.item