CSS: menu ​

.instui-menu — Eine Dropdown-Oberfläche mit Elementen, Gruppen und Trennzeichen.

Gliedern Sie Einträge als .item (siehe Member menu.item), beschriften Sie einen Abschnitt mit .group (siehe menu.group) und trennen Sie Abschnitte mit .separator (siehe menu.separator).

Source: group.css

Verwendung ​

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

Beispiele ​

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;

Verbrauchte Tokens ​

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

Unterkomponenten ​

Verwandt ​