carbon-components
Version:
Carbon Components is a component library for IBM Cloud
179 lines (174 loc) • 6.69 kB
HTML
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button"
aria-haspopup="true" aria-expanded="false">
<svg aria-hidden="true" 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" role="menu" aria-label="Overflow"
data-floating-menu-direction="bottom">
<li
class="bx--overflow-menu-options__option "
role="presentation" >
<button class="bx--overflow-menu-options__btn" role="menuitem" 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 "
role="presentation" >
<button class="bx--overflow-menu-options__btn" role="menuitem" >
Option 2
</button>
</li>
<li
class="bx--overflow-menu-options__option "
role="presentation" >
<button class="bx--overflow-menu-options__btn" role="menuitem" >
Option 3
</button>
</li>
<li
class="bx--overflow-menu-options__option "
role="presentation" >
<button class="bx--overflow-menu-options__btn" role="menuitem" >
Option 4
</button>
</li>
<li
class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled "
role="presentation" aria-disabled="true" >
<button class="bx--overflow-menu-options__btn" role="menuitem" tabindex="-1" >
Disabled
</button>
</li>
<li
class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger "
role="presentation" >
<button class="bx--overflow-menu-options__btn" role="menuitem" >
Danger option
</button>
</li>
</ul>
</div>
<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button"
aria-haspopup="true" aria-expanded="false">
<svg aria-hidden="true" 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" role="menu" aria-label="Overflow">
<li
class="bx--overflow-menu-options__option "
role="presentation" >
<button class="bx--overflow-menu-options__btn" role="menuitem" 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 "
role="presentation" >
<button class="bx--overflow-menu-options__btn" role="menuitem" >
Option 2
</button>
</li>
<li
class="bx--overflow-menu-options__option "
role="presentation" >
<button class="bx--overflow-menu-options__btn" role="menuitem" >
Option 3
</button>
</li>
<li
class="bx--overflow-menu-options__option "
role="presentation" >
<button class="bx--overflow-menu-options__btn" role="menuitem" >
Option 4
</button>
</li>
<li
class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled "
role="presentation" aria-disabled="true" >
<button class="bx--overflow-menu-options__btn" role="menuitem" tabindex="-1" >
Disabled
</button>
</li>
<li
class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger "
role="presentation" >
<button class="bx--overflow-menu-options__btn" role="menuitem" >
Danger option
</button>
</li>
</ul>
</div>
<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button"
aria-haspopup="true" aria-expanded="false">
<svg aria-hidden="true" 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" role="menu" aria-label="Overflow">
<li
class="bx--overflow-menu-options__option"
role="presentation">
<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"
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
</a>
</li>
<li
class="bx--overflow-menu-options__option"
role="presentation">
<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem" >
Option 2
</a>
</li>
<li
class="bx--overflow-menu-options__option"
role="presentation">
<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem" >
Option 3
</a>
</li>
<li
class="bx--overflow-menu-options__option"
role="presentation">
<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem" >
Option 4
</a>
</li>
<li
class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled"
role="presentation">
<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"
tabindex="-1" >
Disabled
</a>
</li>
<li
class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger"
role="presentation">
<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem" >
Danger option
</a>
</li>
</ul>
</div>