1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | <div class="bx--toolbar" data-toolbar>
|
9 | <div class="bx--search bx--search--sm bx--toolbar-search" role="search" data-search data-toolbar-search>
|
10 | <label for="search__input" class="bx--label">Search</label>
|
11 | <input type="text" class="bx--search-input" id="search__input" placeholder="Search">
|
12 | <button class="bx--toolbar-search__btn" aria-label="Toolbar search">
|
13 | <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 14.3L10.7 10c1.9-2.3 1.6-5.8-.7-7.7S4.2.7 2.3 3 .7 8.8 3 10.7c2 1.7 5 1.7 7 0l4.3 4.3.7-.7zM2 6.5C2 4 4 2 6.5 2S11 4 11 6.5 9 11 6.5 11 2 9 2 6.5z"></path></svg>
|
14 | </button>
|
15 | <button class="bx--search-close bx--search-close--hidden" title="Clear search
|
16 | input" aria-label="Clear search input">
|
17 | <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="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
|
18 | </button>
|
19 | </div>
|
20 | <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
|
21 | <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon bx--toolbar-filter-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 4h-2.1c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1h7.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15V4zm-4.5 2C9.7 6 9 5.3 9 4.5S9.7 3 10.5 3s1.5.7 1.5 1.5S11.3 6 10.5 6zM1 12h2.1c.2 1.1 1.2 2 2.4 2s2.2-.9 2.4-2H15v-1H7.9c-.2-1.1-1.2-2-2.4-2s-2.2.9-2.4 2H1v1zm4.5-2c.8 0 1.5.7 1.5 1.5S6.3 13 5.5 13 4 12.3 4 11.5 4.7 10 5.5 10z"></path></svg>
|
22 | <ul class="bx--overflow-menu-options">
|
23 | <li class="bx--toolbar-menu__title">FILTER BY</li>
|
24 | <li class="bx--toolbar-menu__option">
|
25 | <input id="filter-option-1" class="bx--checkbox" type="checkbox" value="filter-option-1" name="checkbox" data-floating-menu-primary-focus>
|
26 | <label for="filter-option-1" class="bx--checkbox-label">Filter option 1</label>
|
27 | </li>
|
28 | <li class="bx--toolbar-menu__option">
|
29 | <input id="filter-option-2" class="bx--checkbox" type="checkbox" value="filter-option-2" name="checkbox">
|
30 | <label for="filter-option-2" class="bx--checkbox-label">Filter option 2</label>
|
31 | </li>
|
32 | <li class="bx--toolbar-menu__option">
|
33 | <input id="filter-option-3" class="bx--checkbox" type="checkbox" value="filter-option-3" name="checkbox">
|
34 | <label for="filter-option-3" class="bx--checkbox-label">Filter option 3</label>
|
35 | </li>
|
36 | </ul>
|
37 | </div>
|
38 | <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
|
39 | <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>
|
40 | <ul class="bx--overflow-menu-options">
|
41 | <li class="bx--overflow-menu-options__option">
|
42 | <button type="button" class="bx--overflow-menu-options__btn">Refresh table</button>
|
43 | </li>
|
44 | <hr class="bx--toolbar-menu__divider" />
|
45 | <li class="bx--toolbar-menu__title">ROW HEIGHT</li>
|
46 | <fieldset data-row-height class="bx--radio-button-group">
|
47 | <legend class="bx--visually-hidden">Select table row height</legend>
|
48 | <li class="bx--toolbar-menu__option">
|
49 | <input id="short-rows" class="bx--radio-button" type="radio" value="short" name="radio" checked data-floating-menu-primary-focus>
|
50 | <label for="short-rows" class="bx--radio-button__label">
|
51 | <span class="bx--radio-button__appearance"></span>
|
52 | Short
|
53 | </label>
|
54 | </li>
|
55 | <li class="bx--toolbar-menu__option">
|
56 | <input id="tall-rows" class="bx--radio-button" type="radio" value="tall" name="radio">
|
57 | <label for="tall-rows" class="bx--radio-button__label">
|
58 | <span class="bx--radio-button__appearance"></span>
|
59 | Tall
|
60 | </label>
|
61 | </li>
|
62 | </fieldset>
|
63 | </ul>
|
64 | </div>
|
65 | </div>
|