CSS: menu ​

.instui-menu — Μια αναδυόμενη επιφάνεια με στοιχεία, ομάδες και διαχωριστικά.

Συνθέστε καταχωρίσεις ως .item (βλέπε το μέλος menu.item), επισημάνετε μια ενότητα με .group (βλέπε menu.group), και χωρίστε ενότητες με .separator (βλέπε menu.separator).

Source: group.css

Χρήση ​

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

Παραδείγματα ​

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>

Δομή ​

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;

Καταναλωμένα tokens ​

TokenΤύποςΤιμή
--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

Υποσυστατικά ​

Σχετιζόμενα ​