CSS: menu ​

.instui-menu — Một giao diện dropdown chứa các mục, nhóm và dấu phân cách.

Tạo các mục dưới dạng .item (xem thành viên menu.item), gán nhãn cho một phần bằng .group (xem menu.group), và chia các phần bằng .separator (xem menu.separator).

Source: group.css

Sử dụng ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/menu.css";

Các ví dụ ​

html
<div class="instui-menu">
  <div class="group">Actions</div>
  <div class="item">Edit</div>
  <div class="item -active">Duplicate</div>
  <div class="separator"></div>
  <div class="item">Delete</div>
</div>

Cấu trúc ​

text
.instui-menu
  menu.group (component, 0..1)
  side-nav-bar.item (component, 0..n)
  menu.separator (component, 0..1)
flowchart TD n0[".instui-menu"]:::cssdoc-root n1(["menu.group"]):::cssdoc-component n2(["side-nav-bar.item"]):::cssdoc-component n3(["menu.separator"]):::cssdoc-component n0 -.->|0..1| n1 n0 -->|0..n| n2 n0 -.->|0..1| n3 click n1 "/api/css/menu.group.md" click n2 "/api/css/side-nav-bar.item.md" click n3 "/api/css/menu.separator.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;

Token tiêu thụ ​

TokenKiểuGiá trị
--instui-border-radius-md<length>0.5rem
--instui-border-width-sm<length>0.0625rem
--instui-color-stroke-base<color>LightDarklight-dark(#8D959F, #6A7883)
--instui-component-menu-item-background<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-menu-max-width<length>16em
--instui-component-menu-min-width<length>8em
--instui-spacing-space-xs<length>0.25rem

Các thành phần phụ ​

Liên quan ​