BETA Hej! Denna webbplats är under utveckling. Bidra gärna med feedback!
Stilguide
Bidra

Tabs 

<div class="rh-tabs" role="tablist" aria-label="Förklaring av tabbgruppen - t.ex. 'Upphandlingar grupperat per område'">
    <a href="#" class="rh-tabs__item" role="tab" aria-selected="" aria-controls="[object Object]-tab" id="[object Object]">
        <p class="rh-tabs__item-text">Vidsträckt</p>
        <span class="rh-tabs__item-icon"></span>
    </a>
    <a href="#" class="rh-tabs__item rh-tabs__item--active" role="tab" aria-selected="" aria-controls="[object Object]-tab" id="[object Object]">
        <p class="rh-tabs__item-text">Smörgåsbord</p>
        <span class="rh-tabs__item-icon"></span>
    </a>
    <a href="#" class="rh-tabs__item" role="tab" aria-selected="" aria-controls="[object Object]-tab" id="[object Object]">
        <p class="rh-tabs__item-text">Dimma</p>
        <span class="rh-tabs__item-icon"></span>
    </a>
    <a href="#" class="rh-tabs__item" role="tab" aria-selected="" aria-controls="[object Object]-tab" id="[object Object]">
        <p class="rh-tabs__item-text">Löksås</p>
        <span class="rh-tabs__item-icon"></span>
    </a>
</div>
 
<div class="rh-tabs" role="tablist" aria-label="Förklaring av tabbgruppen - t.ex. 'Upphandlingar grupperat per område'">
    {{#each tabs}}
        <a href="#" class="rh-tabs__item{{#if active}} rh-tabs__item--active{{/if}}" role="tab"  aria-selected="" aria-controls="{{this}}-tab" id="{{this}}">
            <p class="rh-tabs__item-text">{{this.name}}</p>
            <span class="rh-tabs__item-icon"></span>
        </a>
    {{/each}}
</div>
 
{
  "caption": "",
  "name": "",
  "tabs": [
    {
      "name": "Vidsträckt"
    },
    {
      "name": "Smörgåsbord",
      "active": "true"
    },
    {
      "name": "Dimma"
    },
    {
      "name": "Löksås"
    }
  ]
}
  • Content: 
    .rh-tabs {
    display: $RH-TABS--DISPLAY;

    &__item {
        display: $TABS__ITEM--DISPLAY;
        align-content: $TABS__ITEM--ALIGN-CONTENT;
        width: $TABS__ITEM--WIDTH;
        padding: $TABS__ITEM--PADDING;
        background-color: $TABS__ITEM--BACKGROUND-COLOR;
        border-top: $TABS__ITEM--BORDER-TOP;
        border-left: $TABS__ITEM--BORDER-LEFT;
        border-bottom: $TABS__ITEM--BORDER-BOTTOM;
        border-right: $TABS__ITEM--BORDER-RIGHT;
        cursor: $TABS__ITEM--CURSOR;
        font-size: $TABS__ITEM--FONT-SIZE;
        text-decoration: $TABS__ITEM--TEXT-DECORATION;

        &:last-child{
            border-right: $TABS__ITEM--LAST-CHILD--BORDER-RIGHT;
        }
        &-text {
            margin-bottom:$TABS__ITEM-TEXT--MARGIN-BOTTOM;
            color: $TABS__ITEM-TEXT--COLOR;
            font-size: $TABS__ITEM-TEXT--FONT-SIZE;
            @include medium {
                font-size: $TABS__ITEM-TEXT--MEDIUM--FONT-SIZE;
                margin-right: $TABS__ITEM-TEXT--MEDIUM--MARGIN-RIGHT;
            }
            @include large {font-size: $TABS__ITEM-TEXT--LARGE--FONT-SIZE;}
        }

        &-text .rh-labels {
            display: $TABS__ITEM-TEXT--RH-LABELS--DISPLAY;
            @include medium {
                display: $TABS__ITEM-TEXT--RH-LABELS--MEDIUM--DISPLAY;
            }
        }

        &-icon {
            margin-left: $TABS__ITEM-ICON--MARGIN-LEFT;
            &:after {
                padding: $TABS__ITEM-ICON--AFTER--PADDING;
                background: $TABS__ITEM-ICON--AFTER--BACKGROUND;
                border-radius: $TABS__ITEM-ICON--AFTER--BORDER-RADIUS;
                font-family: $TABS__ITEM-ICON--AFTER--FONT-FAMILY;
                content: $TABS__ITEM-ICON--AFTER--CONTENT;
                font-size: $TABS__ITEM-ICON--AFTER--FONT-SIZE;
                @include medium { font-size: $TABS__ITEM-ICON--AFTER--MEDIUM--FONT-SIZE;}
                @include large { font-size: $TABS__ITEM-ICON--AFTER--LARGE--FONT-SIZE;}
            }
        }

        &:hover, &:active, &:focus {
            background-color: $TABS__ITEM--HOVER-ACTIVE-FOCUS--BACKGROUND-COLOR;
            border-top: $TABS__ITEM--HOVER-ACTIVE-FOCUS--BORDER-TOP;
            outline: $TABS__ITEM--HOVER-ACTIVE-FOCUS--OUTLINE;
            .rh-tabs__item-icon{
                &:after {
                    background: $TABS__ITEM--HOVER-ACTIVE-FOCUS--AFTER--BACKGROUND;
                    font-family: $TABS__ITEM--HOVER-ACTIVE-FOCUS--AFTER--FONT-FAMILY;
                    content: $TABS__ITEM--HOVER-ACTIVE-FOCUS--AFTER--CONTENT;
                }
            }
        }

        &--active {
            background-color: $TABS__ITEM--ACTIVE--BACKGROUND-COLOR;
            border-top:  $TABS__ITEM--ACTIVE--BORDER-TOP;
            .rh-tabs__item-icon{
                &:after {
                    background:  $TABS__ITEM--ACTIVE--ITEM-ICON--AFTER--BACKGROUND;
                    font-family:  $TABS__ITEM--ACTIVE--ITEM-ICON--AFTER--FONT-FAMILY;
                    content: $TABS__ITEM--ACTIVE--ITEM-ICON--AFTER--CONTENT;
                }
            }
        }
    }
}
  • URL: /components/raw/tabs/_tabs.scss
  • Filesystem Path: components/Molecules/tabs/_tabs.scss
  • Size: 3.1 KB
  • Content: 
    {
    "name": "regionhalland/tabs",
    "description": "tabs",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/tabs/composer.json
  • Filesystem Path: components/Molecules/tabs/composer.json
  • Size: 277 Bytes
  • Content: 
    $(".rh-tabs__item").keydown(function() {
    //console.log(event.which);
    switch (event.which) {
        case 39:
            if($(this).next().length == 0) {
                $(this).siblings().first().focus();
            } else {
                $(this).next().focus();
            }
            break;
        case 37:
            if($(this).prev().length == 0) {
                $(this).siblings().last().focus();
            } else {
                $(this).prev().focus();
            }
            break;
    }
});
  • URL: /components/raw/tabs/tabs.js
  • Filesystem Path: components/Molecules/tabs/tabs.js
  • Size: 524 Bytes
  • Content: 
    /* ******************* */
/*   Moleylen "Tabs"   */
/* ******************* */

$RH-TABS--DISPLAY: flex;

// Tabs item - grundinställningar
$TABS__ITEM--DISPLAY: flex;
$TABS__ITEM--ALIGN-CONTENT: flex-start;
$TABS__ITEM--WIDTH: 100%;
$TABS__ITEM--PADDING: $space-4; //em(15);
$TABS__ITEM--BACKGROUND-COLOR: $grey-lightest;
$TABS__ITEM--BORDER-TOP: $border-thin--xl $grey-light;
$TABS__ITEM--BORDER-LEFT: $border-thin--standard $grey-lighter;
$TABS__ITEM--BORDER-BOTTOM: 0;
$TABS__ITEM--BORDER-RIGHT: 0;
$TABS__ITEM--CURSOR: pointer;
$TABS__ITEM--FONT-SIZE: 100%;
$TABS__ITEM--TEXT-DECORATION: none;
$TABS__ITEM--LAST-CHILD--BORDER-RIGHT: $border-thin--standard $grey-lighter;

// Hover, active och focus
$TABS__ITEM--HOVER-ACTIVE-FOCUS--BACKGROUND-COLOR: $white;
$TABS__ITEM--HOVER-ACTIVE-FOCUS--BORDER-TOP: $border-thin--xl $complementary2;
$TABS__ITEM--HOVER-ACTIVE-FOCUS--OUTLINE: 0;
$TABS__ITEM--HOVER-ACTIVE-FOCUS--AFTER--BACKGROUND: $complementary2-light;
$TABS__ITEM--HOVER-ACTIVE-FOCUS--AFTER--FONT-FAMILY: $icon--font-family;
$TABS__ITEM--HOVER-ACTIVE-FOCUS--AFTER--CONTENT: "\e8f6";

// Active state
$TABS__ITEM--ACTIVE--BACKGROUND-COLOR: $white;
$TABS__ITEM--ACTIVE--BORDER-TOP: $border-thin--xl $complementary2;
$TABS__ITEM--ACTIVE--ITEM-ICON--AFTER--BACKGROUND: $complementary2-light;
$TABS__ITEM--ACTIVE--ITEM-ICON--AFTER--FONT-FAMILY: $icon--font-family;
$TABS__ITEM--ACTIVE--ITEM-ICON--AFTER--CONTENT: "\e8f6";

$TABS__ITEM-TEXT--MARGIN-BOTTOM: 0;
$TABS__ITEM-TEXT--COLOR: $black;
$TABS__ITEM-TEXT--FONT-SIZE: $p-small;

$TABS__ITEM-TEXT--MEDIUM--FONT-SIZE: $p-medium; // Medium
$TABS__ITEM-TEXT--MEDIUM--MARGIN-RIGHT: $space-5; //em(20); // Medium
$TABS__ITEM-TEXT--LARGE--FONT-SIZE: $p-large;   // Large
$TABS__ITEM-TEXT--RH-LABELS--DISPLAY: none;             // inbäddade labels
$TABS__ITEM-TEXT--RH-LABELS--MEDIUM--DISPLAY: inline;   // inbäddade labels

$TABS__ITEM-ICON--MARGIN-LEFT: auto;
$TABS__ITEM-ICON--AFTER--PADDING: $space-2; //em(8);
$TABS__ITEM-ICON--AFTER--BACKGROUND: $base2-light;
$TABS__ITEM-ICON--AFTER--BORDER-RADIUS: 50%;
$TABS__ITEM-ICON--AFTER--FONT-FAMILY: $icon--font-family;
$TABS__ITEM-ICON--AFTER--CONTENT: "\e89b";
$TABS__ITEM-ICON--AFTER--FONT-SIZE: $font-size--4xs; //em(10);
$TABS__ITEM-ICON--AFTER--MEDIUM--FONT-SIZE: $font-size--2xs; //em(12);
$TABS__ITEM-ICON--AFTER--LARGE--FONT-SIZE: $font-size--xs; //em(13);
  • URL: /components/raw/tabs/tabs.settings.scss
  • Filesystem Path: components/Molecules/tabs/tabs.settings.scss
  • Size: 2.4 KB

Molekylen “Tabs”

Versionshistorik

  • 1.0.0.20200203 Globala variabler används
  • 1.0.0.20200109 Refaktorering.
    • ny markup
    • klassnamn enligt BEM
    • tweakad css
    • kompatibilitet med WAI-aria authoring practices
    • ny config
    • skapat js-fil som hanterar keybindings för focusbeteende
    • settingsfil skapad
  • 1.0.0.20191122 Flyttat till gitrepo