Tab

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


        
        
            <!-- Default -->
<a class="tab" href="#tab-sample-id" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="false">
    <span class="tab-label">Bezeichnung</span>
</a>


        
            <!-- Selected -->
<a class="tab" href="#tab-sample-id" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="true" tabindex="-1">
    <span class="tab-label">Bezeichnung</span>
</a>


        
            <!-- Disabled -->
<a class="tab" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="false" aria-disabled="true">
    <span class="tab-label">Bezeichnung</span>
</a>


        
            <!-- Doc Only -->
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Default</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <a class="tab" href="#tab-sample-id" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="false">
        <span class="tab-label">Bezeichnung</span>
    </a>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Selected</h2>

        <div class="doc-variant-configuration">
            <ul data-label="State">
                <li>[aria-selected]</li>
            </ul>
        </div>

    </header>

    <a class="tab" href="#tab-sample-id" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="true" tabindex="-1">
        <span class="tab-label">Bezeichnung</span>
    </a>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Disabled</h2>

        <div class="doc-variant-configuration">
            <ul data-label="State">
                <li>[aria-disabled]</li>
            </ul>
        </div>

    </header>

    <a class="tab" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="false" aria-disabled="true">
        <span class="tab-label">Bezeichnung</span>
    </a>

</section>

Handle: @tab
Preview:
- With layout
- Component only
Filesystem Path: components/02-elements/tab/tab.html
Referenced by (3): @tabbar, @tabbar--demo-only, @tab--doc-only


        <!-- Default -->
<a class="tab{{#modifier}} {{.}}{{/modifier}}"{{#controls-id}}{{#unless ../is-disabled}} href="#{{.}}"{{/unless}} id="{{.}}-contoller" aria-controls="{{.}}"{{/controls-id}}{{#onclick}} onclick="{{.}}"{{/onclick}} role="tab" aria-selected="{{#if is-selected}}true{{else}}false{{/if}}"{{#if is-disabled}} aria-disabled="true"{{/if}}{{#if is-selected}} tabindex="-1"{{/if}}>
    <span class="tab-label">{{{label}}}</span>
</a>

<!-- Selected -->
<a class="tab{{#modifier}} {{.}}{{/modifier}}"{{#controls-id}}{{#unless ../is-disabled}} href="#{{.}}"{{/unless}} id="{{.}}-contoller" aria-controls="{{.}}"{{/controls-id}}{{#onclick}} onclick="{{.}}"{{/onclick}} role="tab" aria-selected="{{#if is-selected}}true{{else}}false{{/if}}"{{#if is-disabled}} aria-disabled="true"{{/if}}{{#if is-selected}} tabindex="-1"{{/if}}>
    <span class="tab-label">{{{label}}}</span>
</a>

<!-- Disabled -->
<a class="tab{{#modifier}} {{.}}{{/modifier}}"{{#controls-id}}{{#unless ../is-disabled}} href="#{{.}}"{{/unless}} id="{{.}}-contoller" aria-controls="{{.}}"{{/controls-id}}{{#onclick}} onclick="{{.}}"{{/onclick}} role="tab" aria-selected="{{#if is-selected}}true{{else}}false{{/if}}"{{#if is-disabled}} aria-disabled="true"{{/if}}{{#if is-selected}} tabindex="-1"{{/if}}>
    <span class="tab-label">{{{label}}}</span>
</a>

<!-- Doc Only -->
{{#variants}}
<section class="doc-variant">

    <header class="doc-variant-header">

            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}

        <div class="doc-variant-configuration">
                {{#if states}}
            <ul data-label="State">
                    {{#states}}
                <li>{{{.}}}</li>
                    {{/states}}
            </ul>
                {{/if}}
        </div>

    </header>

    {{#samples}}
        {{render '@tab' (contextData '@tab' this) merge=true}}
    {{/samples}}

</section>
    {{/variants}}


        
        
            /* Default */
{
  "is-selected": false,
  "label": "Bezeichnung",
  "controls-id": "tab-sample-id"
}


        
            /* Selected */
{
  "is-selected": true,
  "label": "Bezeichnung",
  "controls-id": "tab-sample-id"
}


        
            /* Disabled */
{
  "is-selected": false,
  "label": "Bezeichnung",
  "controls-id": "tab-sample-id",
  "is-disabled": true
}


        
            /* Doc Only */
{
  "is-selected": false,
  "label": "Bezeichnung",
  "controls-id": "tab-sample-id",
  "variants": [
    {
      "title": "Default",
      "samples": {
        "is-selected": false,
        "label": "Bezeichnung",
        "controls-id": "tab-sample-id"
      }
    },
    {
      "title": "Selected",
      "states": "[aria-selected]",
      "samples": {
        "is-selected": true,
        "label": "Bezeichnung",
        "controls-id": "tab-sample-id"
      }
    },
    {
      "title": "Disabled",
      "states": "[aria-disabled]",
      "samples": {
        "is-selected": false,
        "label": "Bezeichnung",
        "controls-id": "tab-sample-id",
        "is-disabled": true
      }
    }
  ]
}

File:

Content:


                                $tab_backdrop-color: $_backdrop-color !default;

$tab_styles: (
    background-color: $_gray-200,
    color: $_text-color,
    border-radius: var(--br-small),
    font-weight: $_font-weight--bold,
    transition: $_transition-duration,
) !default;

$tab_states: (
    default: $tab_styles,
    selected: (
        background-color: $tab_backdrop-color,
    ),
    hover: (
        background-color: $_backdrop-color,
        transition: $_transition-duration--in,
    ),
    focus: (
        outline: transparent,
        box-shadow: 0 0 0 $_focus_border-width $_action-focus inset,
    ),
    active: (
        color: $_action-color--active,
    ),
    disabled: (
        color: $_disabled-color !important,
    ),
) !default;

$tab_gap: var(--bw-large) !default;

@import "_tab.settings";
@import "_tab.styles";

%tab {

    &[aria-selected="true"] {
        position: relative;

        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;

        &::after {
            content: "";

            position: absolute;
            top: 100%;
            left: 0;

            display: block;
            height: $tab_gap;
            width: 100%;

            background-color: $tab_backdrop-color;
        }

    }

}

URL: /components/raw/tab/_tab.scss
Filesystem Path: components/02-elements/tab/_tab.scss
Size: 1.2 KB

Content:


                                $tab_backdrop-color: $_backdrop-color !default;

$tab_styles: (
    border-radius: $_border-radius $_border-radius 0 0,
    color: $_action-color,
    transition: $_transition-duration,
) !default;

$tab_states: (
    default: $tab_styles,
    selected: (
        background-color: $tab_backdrop-color,
    ),
    hover: (
        color: $_action-color--hover,
        transition-duration: $_transition-duration--in,
    ),
    focus: (
        outline: transparent,
        box-shadow: 0 0 0 $_focus_border-width $_action-focus inset,
    ),
    active: (
        color: $_action-color--active,
    ),
    disabled: (
        color: $_disabled-color !important,
    ),
) !default;

URL: /components/raw/tab/_tab.settings.scss
Filesystem Path: components/02-elements/tab/_tab.settings.scss
Size: 682 Bytes

Content:


                                %tab {
    text-decoration: none;
    display: inline-block;
    user-select: none;

    @include stack-spacing();

    @include box-padding(default, (padding-left, padding-right));
    @include box-padding(default, (padding-top, padding-bottom), $factor: .5);

    @include state-styles($tab_states);

    @include action-states($tab_states);

    &[aria-selected="true"] {
        color: $_text-color;
        cursor: default;
        pointer-events: none;

        @include state-styles($tab_states, selected);
    }

}

.tab {
    @extend %tab;
}

URL: /components/raw/tab/_tab.styles.scss
Filesystem Path: components/02-elements/tab/_tab.styles.scss
Size: 551 Bytes