graycoreio/daffodil

View on GitHub
libs/design/tabs/examples/src/initially-select-tab/initially-select-tab.component.html

Summary

Maintainability
Test Coverage
<daff-tabs aria-label="List of tabs" [initiallySelected]="'tab-4'">
    <daff-tab>
        <daff-tab-label>
            <fa-icon [icon]="faInfoCircle" daffPrefix></fa-icon>
            Tab 1
        </daff-tab-label>
        <daff-tab-panel>
            Tab 1 Panel
        </daff-tab-panel>
    </daff-tab>

    <daff-tab>
        <daff-tab-label>
            Tab 2
            <fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
        </daff-tab-label>
        <daff-tab-panel>
            Tab 2 Panel
        </daff-tab-panel>
    </daff-tab>

    <daff-tab>
        <daff-tab-label>
            <fa-icon [icon]="faInfoCircle" daffPrefix></fa-icon>
            Tab 3
            <fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
        </daff-tab-label>
        <daff-tab-panel>
            Tab 3 Panel
        </daff-tab-panel>
    </daff-tab>

    <daff-tab id="tab-4">
        <daff-tab-label>
            Tab 4
            <fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
        </daff-tab-label>
        <daff-tab-panel>
            Tab 4 Panel
        </daff-tab-panel>
    </daff-tab>

    <daff-tab>
        <daff-tab-label>
            Tab 5
            <fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
        </daff-tab-label>
        <daff-tab-panel>
            Tab 5 Panel
        </daff-tab-panel>
    </daff-tab>
    
</daff-tabs>