CSS: menu ​

.instui-menu — Satu permukaan dropdown untuk item, kumpulan, dan pemisah.

Susun entri sebagai .item (lihat anggota menu.item), beri label pada bahagian dengan .group (lihat menu.group), dan bahagi bahagian dengan .separator (lihat menu.separator).

Source: group.css

Penggunaan ​

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

Contoh ​

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>

Struktur ​

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 digunakan ​

TokenJenisNilai
--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

Subkomponen ​

Berkaitan ​