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

API management developer portal

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

    <!-- ko ifnot: working -->
    <div class="flex-item flex-grow animation-fade-in">
        <!-- ko if: api -->
        <h1>
            <span data-bind="text: api().displayName"></span>
            <!-- ko if: api().type === 'soap' -->
            <span class="badge badge-soap">SOAP</span>
            <!-- /ko -->
        </h1>

        <div class="form-inline">
            <div class="form-group">
                <!-- ko if: versionApis().length > 0 -->
                <label for="apiVersions">API version: </label>
                <select id="apiVersions" class="form-control"
                    data-bind="options: versionApis, optionsValue: 'name', optionsText: 'apiVersion', value: currentApiVersion">
                </select>
                <!-- /ko -->
                <select id="apiDefinitions" class="form-control" aria-label="API definitions" data-bind="value: downloadSelected">
                    <option value="" disabled="disabled" selected="selected">API definition</option>
                    <option value="openapi">Open API 3 (YAML)</option>
                    <option value="openapi+json">Open API 3 (JSON)</option>
                    <option value="swagger"> Open API 2 (JSON)</option>
                    <option value="wadl">WADL</option>
                    <!-- ko if: api().type === 'soap' -->
                    <option value="wsdl">WSDL</option>
                    <!-- /ko -->
                </select>
                <a href="#" class="nav-link text-truncate" data-bind="attr: { href: $component.getChangeLogUrl()} ">
                    Changelog
                </a>
            </div>
        </div>

        <!-- ko if: api().description  -->
        <p data-bind="markdown: api().description"></p>
        <!-- /ko -->

        <!-- /ko -->

        <!-- ko ifnot: api -->
        <p>No API selected</p>
        <!-- /ko -->
    </div>
    <!-- /ko -->


</div>