@carbon/charts
Version:
Carbon charting components
193 lines (189 loc) • 8.65 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 class="bx--overflow-menu">
<button
class="bx--overflow-menu__trigger bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--right bx--tooltip--align-start"
aria-haspopup="true" aria-expanded="false" id="example-6b2de2vj3z7-trigger" aria-controls="example-6b2de2vj3z7">
<span class="bx--assistive-text">Overflow</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
</button>
<ul class="bx--overflow-menu-options" tabindex="-1" role="menu"
aria-labelledby="example-6b2de2vj3z7-trigger" data-floating-menu-direction="bottom"
id="example-6b2de2vj3z7">
<li
class="bx--overflow-menu-options__option ">
<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 >
<span class="bx--overflow-menu-options__option-content">
An example option that is really long to show what should be done to handle long text
</span>
</button>
</li>
<li
class="bx--overflow-menu-options__option ">
<button class="bx--overflow-menu-options__btn" role="menuitem" >
<span class="bx--overflow-menu-options__option-content">
Option 2
</span>
</button>
</li>
<li
class="bx--overflow-menu-options__option ">
<button class="bx--overflow-menu-options__btn" role="menuitem" >
<span class="bx--overflow-menu-options__option-content">
Option 3
</span>
</button>
</li>
<li
class="bx--overflow-menu-options__option ">
<button class="bx--overflow-menu-options__btn" role="menuitem" >
<span class="bx--overflow-menu-options__option-content">
Option 4
</span>
</button>
</li>
<li
class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled ">
<button class="bx--overflow-menu-options__btn" role="menuitem" disabled >
<span class="bx--overflow-menu-options__option-content">
Disabled
</span>
</button>
</li>
<li
class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger ">
<button class="bx--overflow-menu-options__btn" role="menuitem" >
<span class="bx--overflow-menu-options__option-content">
Danger option
</span>
</button>
</li>
</ul>
</div>
<div data-overflow-menu class="bx--overflow-menu">
<button
class="bx--overflow-menu__trigger bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--left bx--tooltip--align-start"
aria-haspopup="true" aria-expanded="false" id="example-q1mi3g7fjjp-trigger" aria-controls="example-q1mi3g7fjjp">
<span class="bx--assistive-text">Overflow</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
</button>
<ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"
data-floating-menu-direction="bottom" role="menu" aria-labelledby="example-q1mi3g7fjjp-trigger"
id="example-q1mi3g7fjjp">
<li
class="bx--overflow-menu-options__option ">
<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 >
<span class="bx--overflow-menu-options__option-content">
An example option that is really long to show what should be done to handle long text
</span>
</button>
</li>
<li
class="bx--overflow-menu-options__option ">
<button class="bx--overflow-menu-options__btn" role="menuitem" >
<span class="bx--overflow-menu-options__option-content">
Option 2
</span>
</button>
</li>
<li
class="bx--overflow-menu-options__option ">
<button class="bx--overflow-menu-options__btn" role="menuitem" >
<span class="bx--overflow-menu-options__option-content">
Option 3
</span>
</button>
</li>
<li
class="bx--overflow-menu-options__option ">
<button class="bx--overflow-menu-options__btn" role="menuitem" >
<span class="bx--overflow-menu-options__option-content">
Option 4
</span>
</button>
</li>
<li
class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled ">
<button class="bx--overflow-menu-options__btn" role="menuitem" disabled >
<span class="bx--overflow-menu-options__option-content">
Disabled
</span>
</button>
</li>
<li
class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger ">
<button class="bx--overflow-menu-options__btn" role="menuitem" >
<span class="bx--overflow-menu-options__option-content">
Danger option
</span>
</button>
</li>
</ul>
</div>
<div data-overflow-menu class="bx--overflow-menu">
<button
class="bx--overflow-menu__trigger bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--left bx--tooltip--align-start"
aria-haspopup="true" aria-expanded="false" id="example-3lyjvfopxeh-trigger" aria-controls="example-3lyjvfopxeh">
<span class="bx--assistive-text">Overflow</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
</button>
<ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"
data-floating-menu-direction="bottom" role="menu" aria-labelledby="example-3lyjvfopxeh-trigger"
id="example-3lyjvfopxeh">
<li
class="bx--overflow-menu-options__option">
<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>
<span class="bx--overflow-menu-options__option-content">
An example option that is really long to show what should be done to handle long text
</span>
</a>
</li>
<li
class="bx--overflow-menu-options__option">
<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem" >
<span class="bx--overflow-menu-options__option-content">
Option 2
</span>
</a>
</li>
<li
class="bx--overflow-menu-options__option">
<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem" >
<span class="bx--overflow-menu-options__option-content">
Option 3
</span>
</a>
</li>
<li
class="bx--overflow-menu-options__option">
<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem" >
<span class="bx--overflow-menu-options__option-content">
Option 4
</span>
</a>
</li>
<li
class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled">
<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"
tabindex="-1" aria-disabled="true" >
<span class="bx--overflow-menu-options__option-content">
Disabled
</span>
</a>
</li>
<li
class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem" >
<span class="bx--overflow-menu-options__option-content">
Danger option
</span>
</a>
</li>
</ul>
</div>