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>