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>