CSS: menu

.instui-menu — He mata taka-iho o ngā tūemi, ngā rōpū, me ngā wehenga.

Hangaia ngā tomokanga hei .item (tīmatahia te tiro ki te mema menu.item), tapaina tētahi wāhanga ki te .group (tīmatahia te tiro ki menu.group), ā, wehehia ngā wāhanga mā te .separator (tīmatahia te tiro ki menu.separator).

Source: group.css

Ngā Whakamahi

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

Ngā tauira

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

Hanganga

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

Ngā tohu i whakamahia

Token	Momo	Uara
--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

Ngā wāhanga-iti

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

Hono

• tree-browser — Both present nested, selectable entries.
• simple-select — A select's dropdown reuses this menu surface.