CSS: menu

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

Állítson össze bejegyzéseket .item-ként, jelöljön meg egy szakaszt .group fejléccel, és ossza fel a szakaszokat .separator-vel. Egy .item-info vonal másodlagos szöveget ad egy elem belsejéhez.

Forrás: menu.css

Akadálymentesség

Jelöljön meg egy bejelölt elemet a aria-checked="true"-vel (ugyanaz a stílus, mint a -active).

Használat

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

Demó

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>

Actions

Edit

Duplicate

Delete

Felépítés

.instui-menu
  .group
  .item
  .separator

flowchart TD n0[".instui-menu"]:::cssdoc-root n1(".group"):::cssdoc-part n2(".item"):::cssdoc-part n3(".separator"):::cssdoc-part n0 --> n1 n0 --> n2 n0 --> n3 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Részek

Rész	Leírás
.group	Egy címkézett csoport fejléce.
.item	Egy menübejegyzés; add -disabled, -highlighted, vagy -active/[aria-checked].
.item-info	Másodlagos információs szöveg egy menüelemen belül.
.separator	Elválasztó vonal az elemek között.

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>	light-dark(#8D959F, #6A7883)LightDark
--instui-component-menu-group-background	<color>	light-dark(#ffffff, #171B21)LightDark
--instui-component-menu-group-color	<color>	light-dark(#273540, #ffffff)LightDark
--instui-component-menu-group-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-menu-group-font-size	<length>	1rem
--instui-component-menu-group-font-weight	<integer>	600
--instui-component-menu-group-padding-horizontal	<length>	0.75rem
--instui-component-menu-group-padding-vertical	<length>	0.5rem
--instui-component-menu-item-active-background	<color>	light-dark(#1D354F, #EEF4FD)LightDark
--instui-component-menu-item-active-label-color	<color>	light-dark(#ffffff, #1D354F)LightDark
--instui-component-menu-item-background	<color>	light-dark(#ffffff, #171B21)LightDark
--instui-component-menu-item-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-menu-item-font-size	<length>	1rem
--instui-component-menu-item-font-weight	<integer>	400
--instui-component-menu-item-highlighted-background	<color>	light-dark(#EEF4FD, #2E5177)LightDark
--instui-component-menu-item-highlighted-label-color	<color>	light-dark(#273540, #F2F4F5)LightDark
--instui-component-menu-item-highlighted-label-info-color	<color>	light-dark(#273540, #F2F4F5)LightDark
--instui-component-menu-item-label-color	<color>	light-dark(#273540, #ffffff)LightDark
--instui-component-menu-item-label-info-color	<color>	light-dark(#576773, #AAB0B5)LightDark
--instui-component-menu-item-line-height	<length>	1.25rem
--instui-component-menu-item-padding-horizontal	<length>	0.75rem
--instui-component-menu-item-padding-vertical	<length>	0.5rem
--instui-component-menu-item-selected-highlighted-background	<color>	light-dark(#234465, #ffffff)LightDark
--instui-component-menu-max-width	<length>	16em
--instui-component-menu-min-width	<length>	8em
--instui-component-menu-separator-background	<color>	light-dark(#E8EAEC, #2D3D49)LightDark
--instui-component-menu-separator-height	<length>	0.0625rem
--instui-component-menu-separator-margin-horizontal	<length>	0.75rem
--instui-component-menu-separator-margin-vertical	<length>	0rem
--instui-opacity-disabled	<number>	0.5
--instui-spacing-space-xs	<length>	0.25rem

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.