CSS: menu

.instui-menu — Egy legördülő felület elemekből, csoportokból és elválasztókból.

Állítsa össze a bejegyzéseket .item formájában (lásd a(z) menu.item tagot), lásson el egy szakaszt .group címkével (lásd: menu.group), a szakaszokat pedig válassza el .separator segítségével (lásd: menu.separator).

Forrás: group.css

Használat

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

Példák

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

Felépítés

.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;

Felhasznált tokenek

Token	Típus	Érték
--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

Alkomponensek

• menu.group
• menu.item
• menu.separator
• side-nav-bar.item

Kapcsolódó

• tree-browser — Mindkettő beágyazott, kiválasztható bejegyzéseket jelenít meg.
• simple-select — Egy kijelölés legördülő menüje újra felhasználja ezt a menüfelületet.