@paperbits/core/workshops/navigation/ko/navigationItemSelector.html

Paperbits core components.

<div class="editor">
    <div class="flex flex-column list">
        <h1>Select navigation root</h1>
        <hr />

        <div class="flex flex-column">
            <!-- ko if: working -->
            <spinner></spinner>
            <!-- /ko -->

            <!-- ko ifnot: working -->

            <!-- ko if: root().nodes().length === 0 -->
            <p class="flex-item flex-item-grow text-center">It seems that you don't have navigation items yet.</p>
            <!-- /ko -->

            <div class="flex-item flex-item-grow list" role="list"
                data-bind="scrollable: true, focus: { childSelector: '.list-item' }">
                <!-- ko foreach: { data: root().nodes, as: 'node' } -->
                <!-- ko template: { name: 'node', data: node } -->
                <!-- /ko-->
                <!-- /ko-->
            </div>

            <!-- /ko -->
        </div>
    </div>
    <div class="flex-item btn-group">
        <button class="btn btn-default" data-bind="click: $component.selectNone">
            <i aria-hidden="true" class="paperbits-icon paperbits-ban"></i>
            None
        </button>
    </div>
</div>

<script id="node" type="text/html">
    <div class="list-item-group list-item-group-collapsible">
        <!-- ko if: node.nodes && node.nodes().length > 0 -->
        <div class="list-item-collapsible">
            <button role="button" aria-label="Toggle nested items" class="list-item-collapse" data-bind="click: node.toggleCollapsed">
                <i aria-hidden="true" class="paperbits-icon paperbits-circle-delete"
                    data-bind="css: { 'paperbits-circle-add': node.collapsed }"></i>
            </button>
            <div tabindex="0" role="listitem" class="list-item" data-bind="activate: $component.selectNavigationItem, attr: { 'aria-expanded': (!node.collapsed()).toString() }">
                <!-- <i aria-hidden="true" class="paperbits-icon paperbits-menu-34"></i> -->
                <span data-bind="text: node.label"></span>
            </div>
        </div>
        <!-- /ko -->

        <!-- ko ifnot: node.nodes && node.nodes().length > 0 -->
        <div tabindex="0" role="listitem" class="list-item" data-bind="activate: $component.selectNavigationItem">
            <!-- <i aria-hidden="true" class="paperbits-icon paperbits-menu-34"></i> -->
            <span data-bind="text: node.label"></span>
        </div>
        <!-- /ko -->

        <!-- ko ifnot: node.collapsed -->
        <div role="list">
        <!-- ko foreach: { data: node.nodes, as: 'node' } -->
        <!-- ko template: { name: 'node', data: node } --><!-- /ko-->
        <!-- /ko-->
        </div>
        <!-- /ko -->
    </div>
</script>