Siteselector
.Siteselector
Modifiers
Siteselector
Used as a standalone component
Site
Siteselector.Siteselector--dark
Used with other components,
.Bar
for example
Site
Markup
<div class="[modifier class]"> <span class="Siteselector-label">Site</span> <input type="text" class="Siteselector-input" value="atomia.com"> <button class="Btn Siteselector-btn Icon Icon--menu" title="View all"></button> </div>
Working example
This is a working example of the siteselector
Example
Site
Markup
<div style="position: relative; display:inline-block;"> <div class="Siteselector"> <span class="Siteselector-label">Site</span> <input type="text" class="Siteselector-input" data-bind="value: siteselector.selectedSite"> <button class="Btn Siteselector-btn Icon Icon--menu" title="View all" data-bind="click: siteselector.open"></button> </div> <div class="Siteselector-list" data-bind="dialog: { moveToBack: false, overlayInvisible: true, hasTransition: false }, isOpen: siteselector.isOpen"> <div class="dt-Actions dt-Actions--filter"> <input type="search" class="dt-Search" placeholder="Filter records"> </div> <div class="dt-Wrapper no-footer"> <table class="Table Table--datatable no-footer"> <tbody data-bind="foreach: siteselector.sitelist"> <tr> <td> <a href="#" data-bind="click: $parent.selectValue, text: $data"></a> </td> </tr> </tbody> </table> <div> <div class="Paginate full_numbers"> <a class="Paginate-button first is-disabled Icon--first" href="#">First</a> <a class="Paginate-button previous is-disabled Icon--previous" href="#">Previous</a> <a class="Paginate-button is-active Paginate-button--page" href="#">1</a> <a class="Paginate-button Paginate-button--page" href="#">2</a> <a class="Paginate-button next Icon--next" href="#">Next</a> <a class="Paginate-button last Icon--last" href="#">Last</a> </div> <div style="padding: 0 15px 15px; text-align: center; font-family: arial; font-size: 1rem;">Showing 1 to 5 (of 6 total)</div> </div> </div> </div> </div>