carbon-components
Version:
Carbon Components is a component library for IBM Cloud
60 lines (58 loc) • 3.23 kB
HTML
<div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
<svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
<g fill-rule="evenodd">
<circle cx="1.5" cy="1.5" r="1.5" />
<circle cx="1.5" cy="7.5" r="1.5" />
<circle cx="1.5" cy="13.5" r="1.5" />
</g>
</svg>
<ul class="bx--overflow-menu-options" tabindex="-1" data-floating-menu-direction="bottom">
<li class="bx--overflow-menu-options__option">
<button class="bx--overflow-menu-options__btn" title="An example option that is really long to show what should be done to handle long text" data-floating-menu-primary-focus>An example option that is really long to show what should be done to handle long text</button>
</li>
<li class="bx--overflow-menu-options__option">
<button class="bx--overflow-menu-options__btn">Option 2</button>
</li>
<li class="bx--overflow-menu-options__option">
<button class="bx--overflow-menu-options__btn">Option 3</button>
</li>
<li class="bx--overflow-menu-options__option">
<button class="bx--overflow-menu-options__btn">Option 4</button>
</li>
<li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled">
<button class="bx--overflow-menu-options__btn" tabindex="-1">Disabled</button>
</li>
<li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
<button class="bx--overflow-menu-options__btn">Danger option</button>
</li>
</ul>
</div>
<div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
<svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
<g fill-rule="evenodd">
<circle cx="1.5" cy="1.5" r="1.5" />
<circle cx="1.5" cy="7.5" r="1.5" />
<circle cx="1.5" cy="13.5" r="1.5" />
</g>
</svg>
<ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1" data-floating-menu-direction="bottom">
<li class="bx--overflow-menu-options__option">
<button class="bx--overflow-menu-options__btn" title="An example option that is really long to show what should be done to handle long text" data-floating-menu-primary-focus>An example option that is really long to show what should be done to handle long text</button>
</li>
<li class="bx--overflow-menu-options__option">
<button class="bx--overflow-menu-options__btn">Option 2</button>
</li>
<li class="bx--overflow-menu-options__option">
<button class="bx--overflow-menu-options__btn">Option 3</button>
</li>
<li class="bx--overflow-menu-options__option">
<button class="bx--overflow-menu-options__btn">Option 4</button>
</li>
<li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled">
<button class="bx--overflow-menu-options__btn" tabindex="-1">Disabled</button>
</li>
<li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
<button class="bx--overflow-menu-options__btn">Danger option</button>
</li>
</ul>
</div>