UNPKG

carbon-components/html/overflow-menu/overflow-menu.html

Version:

1<!--
Copyright IBM Corp. 2016, 2018
3
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
6-->
7
8<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button"
aria-haspopup="true" aria-expanded="false">
<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>
<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  >
      <div class="bx--overflow-menu-options__option-content">
        An example option that is really long to show what should be done to handle long text
      </div>
    </button>
  </li>
  <li
    class="bx--overflow-menu-options__option  "
    role="presentation" >
    <button class="bx--overflow-menu-options__btn" role="menuitem"   >
      <div class="bx--overflow-menu-options__option-content">
        Option 2
      </div>
    </button>
  </li>
  <li
    class="bx--overflow-menu-options__option  "
    role="presentation" >
    <button class="bx--overflow-menu-options__btn" role="menuitem"   >
      <div class="bx--overflow-menu-options__option-content">
        Option 3
      </div>
    </button>
  </li>
  <li
    class="bx--overflow-menu-options__option  "
    role="presentation" >
    <button class="bx--overflow-menu-options__btn" role="menuitem"   >
      <div class="bx--overflow-menu-options__option-content">
        Option 4
      </div>
    </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" >
      <div class="bx--overflow-menu-options__option-content">
        Disabled
      </div>
    </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"   >
      <div class="bx--overflow-menu-options__option-content">
        Danger option
      </div>
    </button>
  </li>
  <li
    class="bx--overflow-menu-options__option  "
    role="presentation" >
    <button class="bx--overflow-menu-options__btn" role="menuitem"   >
      <div class="bx--overflow-menu-options__option-content">
        Add
      </div>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 7.5V3h-1v4.5H3v1h4.5V13h1V8.5H13v-1z"></path></svg>
    </button>
  </li>
</ul>
79</div>
80
81<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button"
aria-haspopup="true" aria-expanded="false">
<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>
<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  >
      <div class="bx--overflow-menu-options__option-content">
        An example option that is really long to show what should be done to handle long text
      </div>
    </button>
  </li>
  <li
    class="bx--overflow-menu-options__option  "
    role="presentation" >
    <button class="bx--overflow-menu-options__btn" role="menuitem"   >
      <div class="bx--overflow-menu-options__option-content">
        Option 2
      </div>
    </button>
  </li>
  <li
    class="bx--overflow-menu-options__option  "
    role="presentation" >
    <button class="bx--overflow-menu-options__btn" role="menuitem"   >
      <div class="bx--overflow-menu-options__option-content">
        Option 3
      </div>
    </button>
  </li>
  <li
    class="bx--overflow-menu-options__option  "
    role="presentation" >
    <button class="bx--overflow-menu-options__btn" role="menuitem"   >
      <div class="bx--overflow-menu-options__option-content">
        Option 4
      </div>
    </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" >
      <div class="bx--overflow-menu-options__option-content">
        Disabled
      </div>
    </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"   >
      <div class="bx--overflow-menu-options__option-content">
        Danger option
      </div>
    </button>
  </li>
  <li class="bx--overflow-menu-options__option" role="presentation">
    <button class="bx--overflow-menu-options__btn" role="menuitem">
      <div class="bx--overflow-menu-options__option-content">
        Add
      </div>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 7.5V3h-1v4.5H3v1h4.5V13h1V8.5H13v-1z"></path></svg>
    </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">
      <div class="bx--overflow-menu-options__option-content">
        Add
      </div>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 7.5V3h-1v4.5H3v1h4.5V13h1V8.5H13v-1z"></path></svg>
    </button>
  </li>
</ul>
160</div>
161
162<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button"
aria-haspopup="true" aria-expanded="false">
<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>
<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>
      <div class="bx--overflow-menu-options__option-content">
        An example option that is really long to show what should be done to handle long text
      </div>
    </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"  >
      <div class="bx--overflow-menu-options__option-content">
        Option 2
      </div>
    </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"  >
      <div class="bx--overflow-menu-options__option-content">
        Option 3
      </div>
    </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"  >
      <div class="bx--overflow-menu-options__option-content">
        Option 4
      </div>
    </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" >
      <div class="bx--overflow-menu-options__option-content">
        Disabled
      </div>
    </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"  >
      <div class="bx--overflow-menu-options__option-content">
        Danger option
      </div>
    </a>
  </li>
  <li class="bx--overflow-menu-options__option" role="presentation">
    <button class="bx--overflow-menu-options__btn" role="menuitem">
      <div class="bx--overflow-menu-options__option-content">
        Add
      </div>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 7.5V3h-1v4.5H3v1h4.5V13h1V8.5H13v-1z"></path></svg>
    </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">
      <div class="bx--overflow-menu-options__option-content">
        Add
      </div>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 7.5V3h-1v4.5H3v1h4.5V13h1V8.5H13v-1z"></path></svg>
    </button>
  </li>
</ul>
242</div>

1	`<!--`
2	`Copyright IBM Corp. 2016, 2018`
3
4	`This source code is licensed under the Apache-2.0 license found in the`
5	`LICENSE file in the root directory of this source tree.`
6	`-->`
7
8	`<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button"`
9	`aria-haspopup="true" aria-expanded="false">`
10	`<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>`
11	`<ul class="bx--overflow-menu-options" tabindex="-1" role="menu" aria-label="Overflow"`
12	`data-floating-menu-direction="bottom">`
13	`<li`
14	`class="bx--overflow-menu-options__option "`
15	`role="presentation" >`
16	`<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"`
17	`data-floating-menu-primary-focus >`
18	`<div class="bx--overflow-menu-options__option-content">`
19	`An example option that is really long to show what should be done to handle long text`
20	`</div>`
21	`</button>`
22	`</li>`
23	`<li`
24	`class="bx--overflow-menu-options__option "`
25	`role="presentation" >`
26	`<button class="bx--overflow-menu-options__btn" role="menuitem" >`
27	`<div class="bx--overflow-menu-options__option-content">`
28	`Option 2`
29	`</div>`
30	`</button>`
31	`</li>`
32	`<li`
33	`class="bx--overflow-menu-options__option "`
34	`role="presentation" >`
35	`<button class="bx--overflow-menu-options__btn" role="menuitem" >`
36	`<div class="bx--overflow-menu-options__option-content">`
37	`Option 3`
38	`</div>`
39	`</button>`
40	`</li>`
41	`<li`
42	`class="bx--overflow-menu-options__option "`
43	`role="presentation" >`
44	`<button class="bx--overflow-menu-options__btn" role="menuitem" >`
45	`<div class="bx--overflow-menu-options__option-content">`
46	`Option 4`
47	`</div>`
48	`</button>`
49	`</li>`
50	`<li`
51	`class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled "`
52	`role="presentation" aria-disabled="true" >`
53	`<button class="bx--overflow-menu-options__btn" role="menuitem" tabindex="-1" >`
54	`<div class="bx--overflow-menu-options__option-content">`
55	`Disabled`
56	`</div>`
57	`</button>`
58	`</li>`
59	`<li`
60	`class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger "`
61	`role="presentation" >`
62	`<button class="bx--overflow-menu-options__btn" role="menuitem" >`
63	`<div class="bx--overflow-menu-options__option-content">`
64	`Danger option`
65	`</div>`
66	`</button>`
67	`</li>`
68	`<li`
69	`class="bx--overflow-menu-options__option "`
70	`role="presentation" >`
71	`<button class="bx--overflow-menu-options__btn" role="menuitem" >`
72	`<div class="bx--overflow-menu-options__option-content">`
73	`Add`
74	`</div>`
75	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 7.5V3h-1v4.5H3v1h4.5V13h1V8.5H13v-1z"></path></svg>`
76	`</button>`
77	`</li>`
78	`</ul>`
79	`</div>`
80
81	`<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button"`
82	`aria-haspopup="true" aria-expanded="false">`
83	`<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>`
84	`<ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"`
85	`data-floating-menu-direction="bottom" role="menu" aria-label="Overflow">`
86	`<li`
87	`class="bx--overflow-menu-options__option "`
88	`role="presentation" >`
89	`<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"`
90	`data-floating-menu-primary-focus >`
91	`<div class="bx--overflow-menu-options__option-content">`
92	`An example option that is really long to show what should be done to handle long text`
93	`</div>`
94	`</button>`
95	`</li>`
96	`<li`
97	`class="bx--overflow-menu-options__option "`
98	`role="presentation" >`
99	`<button class="bx--overflow-menu-options__btn" role="menuitem" >`
100	`<div class="bx--overflow-menu-options__option-content">`
101	`Option 2`
102	`</div>`
103	`</button>`
104	`</li>`
105	`<li`
106	`class="bx--overflow-menu-options__option "`
107	`role="presentation" >`
108	`<button class="bx--overflow-menu-options__btn" role="menuitem" >`
109	`<div class="bx--overflow-menu-options__option-content">`
110	`Option 3`
111	`</div>`
112	`</button>`
113	`</li>`
114	`<li`
115	`class="bx--overflow-menu-options__option "`
116	`role="presentation" >`
117	`<button class="bx--overflow-menu-options__btn" role="menuitem" >`
118	`<div class="bx--overflow-menu-options__option-content">`
119	`Option 4`
120	`</div>`
121	`</button>`
122	`</li>`
123	`<li`
124	`class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled "`
125	`role="presentation" aria-disabled="true" >`
126	`<button class="bx--overflow-menu-options__btn" role="menuitem" tabindex="-1" >`
127	`<div class="bx--overflow-menu-options__option-content">`
128	`Disabled`
129	`</div>`
130	`</button>`
131	`</li>`
132	`<li`
133	`class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger "`
134	`role="presentation" >`
135	`<button class="bx--overflow-menu-options__btn" role="menuitem" >`
136	`<div class="bx--overflow-menu-options__option-content">`
137	`Danger option`
138	`</div>`
139	`</button>`
140	`</li>`
141	`<li class="bx--overflow-menu-options__option" role="presentation">`
142	`<button class="bx--overflow-menu-options__btn" role="menuitem">`
143	`<div class="bx--overflow-menu-options__option-content">`
144	`Add`
145	`</div>`
146	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 7.5V3h-1v4.5H3v1h4.5V13h1V8.5H13v-1z"></path></svg>`
147	`</button>`
148	`</li>`
149	`<li`
150	`class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled"`
151	`role="presentation" aria-disabled="true" }>`
152	`<button class="bx--overflow-menu-options__btn" role="menuitem" tabindex="-1">`
153	`<div class="bx--overflow-menu-options__option-content">`
154	`Add`
155	`</div>`
156	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 7.5V3h-1v4.5H3v1h4.5V13h1V8.5H13v-1z"></path></svg>`
157	`</button>`
158	`</li>`
159	`</ul>`
160	`</div>`
161
162	`<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button"`
163	`aria-haspopup="true" aria-expanded="false">`
164	`<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>`
165	`<ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"`
166	`data-floating-menu-direction="bottom" role="menu" aria-label="Overflow">`
167	`<li`
168	`class="bx--overflow-menu-options__option"`
169	`role="presentation">`
170	`<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"`
171	`title="An example option that is really long to show what should be done to handle long text" data-floating-menu-primary-focus>`
172	`<div class="bx--overflow-menu-options__option-content">`
173	`An example option that is really long to show what should be done to handle long text`
174	`</div>`
175	`</a>`
176	`</li>`
177	`<li`
178	`class="bx--overflow-menu-options__option"`
179	`role="presentation">`
180	`<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem" >`
181	`<div class="bx--overflow-menu-options__option-content">`
182	`Option 2`
183	`</div>`
184	`</a>`
185	`</li>`
186	`<li`
187	`class="bx--overflow-menu-options__option"`
188	`role="presentation">`
189	`<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem" >`
190	`<div class="bx--overflow-menu-options__option-content">`
191	`Option 3`
192	`</div>`
193	`</a>`
194	`</li>`
195	`<li`
196	`class="bx--overflow-menu-options__option"`
197	`role="presentation">`
198	`<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem" >`
199	`<div class="bx--overflow-menu-options__option-content">`
200	`Option 4`
201	`</div>`
202	`</a>`
203	`</li>`
204	`<li`
205	`class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled"`
206	`role="presentation">`
207	`<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"`
208	`tabindex="-1" >`
209	`<div class="bx--overflow-menu-options__option-content">`
210	`Disabled`
211	`</div>`
212	`</a>`
213	`</li>`
214	`<li`
215	`class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger"`
216	`role="presentation">`
217	`<a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem" >`
218	`<div class="bx--overflow-menu-options__option-content">`
219	`Danger option`
220	`</div>`
221	`</a>`
222	`</li>`
223	`<li class="bx--overflow-menu-options__option" role="presentation">`
224	`<button class="bx--overflow-menu-options__btn" role="menuitem">`
225	`<div class="bx--overflow-menu-options__option-content">`
226	`Add`
227	`</div>`
228	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 7.5V3h-1v4.5H3v1h4.5V13h1V8.5H13v-1z"></path></svg>`
229	`</button>`
230	`</li>`
231	`<li`
232	`class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled"`
233	`role="presentation" aria-disabled="true" }>`
234	`<button class="bx--overflow-menu-options__btn" role="menuitem" tabindex="-1">`
235	`<div class="bx--overflow-menu-options__option-content">`
236	`Add`
237	`</div>`
238	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 7.5V3h-1v4.5H3v1h4.5V13h1V8.5H13v-1z"></path></svg>`
239	`</button>`
240	`</li>`
241	`</ul>`
242	`</div>`