apim-developer-portal4/src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.html

API management developer portal

<div class="dropdown-container collapsible">
    <div class="form-control" tabindex="0" role="button" aria-label="APIs" data-toggle="collapsible">
        <div class="input-group">
            <div class="input">
                <span data-bind="text: selection"></span>
                <!-- ko if: selectedApi() && selectedApi().type === 'soap' -->
                <span class="badge badge-soap">SOAP</span>
                <!-- /ko -->
            </div>
            <div class="input-group-append">
                <i class="icon icon-chevron-down"></i>
            </div>
        </div>
    </div>

    <div class="collapsible-dropdown collapsible-content">
        <div class="search-input">
            <div class="input-group">
                <input type="search" role="searchbox" aria-label="Search" placeholder="Search APIs"
                    data-bind="textInput: pattern" autofocus />
                <button type="button" class="search-button" aria-label="Search APIs">
                    <i class="icon icon-magnifier"></i>
                </button>
            </div>
        </div>
        <!-- <tag-input params="{ scope: 'apis', onChange: onTagsChange }"></tag-input> -->
        <div role="list">
            <!-- ko if: working -->
            <spinner role="presentation"></spinner>
            <!-- /ko -->

            <!-- ko ifnot: working -->
            <!-- ko foreach: { data: apiGroups, as: 'group' } -->
            <div class="collapsible">
                <div class="tag-group">
                    <span class="tag-item" role="group" data-bind="text: group.tag"></span>
                </div>
                <div class="collapsible-container">
                    <div class="menu menu-vertical" role="list">
                        <!-- ko foreach: { data: group.items, as: 'item' } -->
                        <a href="#" role="listitem" class="nav-link text-truncate"
                            data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedApiName() === item.name }">
                            <span data-bind="text: item.displayName"></span>
                            <!-- ko if: item.type === 'soap' -->
                            <span class="badge badge-soap">SOAP</span>
                            <!-- /ko -->
                            <!-- ko if: item.apiVersion -->
                            - <span data-bind="text: item.apiVersion"></span>
                            <!-- /ko -->
                        </a>
                        <!-- /ko -->
                    </div>
                </div>
            </div>
            <!-- /ko -->

            <!-- ko if: apiGroups().length === 0 -->
            <div class="list-item-empty">No APIs found</div>
            <!-- /ko -->

            <!-- ko if: hasPager -->
            <ul class="pagination justify-content-center" role="navigation" aria-label="Pagination">
                <!-- ko if: hasPrevPage -->
                <li class="page-item">
                    <a href="#" class="page-link" role="button" aria-label="Previous page"
                        data-bind="click: prevPage, enable: hasPrevPage">
                        <i class="icon icon-chevron-left"></i>
                    </a>
                </li>
                <!-- /ko -->
                <li class="page-item">
                    <span class="page-link" data-bind="text: page"></span>
                </li>
                <!-- ko if: hasNextPage -->
                <li class="page-item">
                    <a href="#" class="page-link" role="button" aria-label="Next page"
                        data-bind="click: nextPage, enable: hasNextPage">
                        <i class="icon icon-chevron-right"></i>
                    </a>
                </li>
                <!-- /ko -->
            </ul>
            <!-- /ko -->

            <!-- /ko -->
        </div>
    </div>
</div>