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;

उपयोग किये गए टोकन ​

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

सबकम्पोनेन्ट्स ​

संबंधित ​