@paperbits/core/workshops/tray/tray.html

Paperbits core components.

<div class="toolbox toolbox-position-left-bottom" role="listbox" aria-label="Tray"
    data-bind="listbox: {}, visible: viewManager.primaryToolboxVisible">
    <div role="presentation" class="toolbox-btn">
        <a role="option"
            data-bind="tooltip: '<h1>Screen sizes</h1><p>See and adjust the content for<br/> devices of different sizes.</p>', balloon: { component: { name: 'viewport-selector' }, position: 'top' }"
            aria-label="Screen sizes">
            <i aria-hidden="true" class="paperbits-icon paperbits-mirror-2"></i>
        </a>
    </div>

    <!-- ko if: localizationEnabled -->
    <div role="presentation" class="toolbox-btn">
        <a role="option"
            data-bind="tooltip: '<h1>Locales</h1><p>See and adjust the content for<br/> specific languages and locales.</p>', balloon: { component: { name: 'locale-selector' }, position: 'top' }"
            aria-label="Locale selection">
            <i aria-hidden="true" class="paperbits-icon paperbits-world"></i>
        </a>
    </div>
    <!-- /ko -->

    <!-- ko foreach: { data: buttons, as: 'button' } -->
    <div role="presentation" class="toolbox-btn" data-bind="attr: { disabled: button.disabled() ? 'disabled' : null }">
        <!-- ko ifnot: button.component-->
        <a role="option"
            data-bind="tooltip: button.tooltip, activate: button.onActivate, disable: button.disabled, attr: { 'aria-label': button.title, disabled: button.disabled() ? 'disabled' : null }">
            <i data-bind="css: button.iconClass"></i>
        </a>
        <!-- /ko -->
        <!-- ko if: button.component-->
        <a role="option"
            data-bind="tooltip: button.tooltip, activate: button.onActivate, disable: button.disabled, attr: { 'aria-label': button.title, disabled: button.disabled() ? 'disabled' : null }, balloon: { component: button.component, position: 'top' }">
            <i data-bind="css: button.iconClass"></i>
        </a>
        <!-- /ko -->
    </div>
    <!-- /ko -->
</div>