Partystreusel

Tab 

<section class="tab js-tab">
    <ul role="tablist" class="tab__nav" data-tabs>
        <li role="presentation" class="tab__nav-item tab--active">
            <a class="tab__link tab--active" href="#panel0" role="tab" data-tab>Tab titel 1</a>
        </li>
        <li role="presentation" class="tab__nav-item ">
            <a class="tab__link " href="#panel1" role="tab" data-tab>Tab titel 2</a>
        </li>
        <li role="presentation" class="tab__nav-item ">
            <a class="tab__link " href="#panel2" role="tab" data-tab>Tab titel 3</a>
        </li>
        <li role="presentation" class="tab__nav-item ">
            <a class="tab__link " href="#panel3" role="tab" data-tab>Tab titel 4</a>
        </li>
        <li role="presentation" class="tab__nav-item ">
            <a class="tab__link " href="#panel4" role="tab" data-tab>Tab titel 5</a>
        </li>
    </ul>
    <div class="tab__panels" data-tabs-content>
        <section role="tabpanel" id="panel0" class="tab__panel tab--active" data-tabs-pane>
            Lorem ipsum 0
        </section>
        <section role="tabpanel" id="panel1" class="tab__panel " data-tabs-pane>
            Lorem ipsum 1
        </section>
        <section role="tabpanel" id="panel2" class="tab__panel " data-tabs-pane>
            Lorem ipsum 2
        </section>
        <section role="tabpanel" id="panel3" class="tab__panel " data-tabs-pane>
            Lorem ipsum 3
        </section>
        <section role="tabpanel" id="panel4" class="tab__panel " data-tabs-pane>
            Lorem ipsum 4
        </section>
    </div>
</section>
 
<section class="tab js-tab">
  <ul role="tablist" class="tab__nav" data-tabs>
    {{#each items}}
      <li role="presentation" class="tab__nav-item {{modifier}}">
        <a class="tab__link {{modifier}}" href="#panel{{@index}}" role="tab" data-tab>{{title}}</a>
      </li>
    {{/each}}
  </ul>
  <div class="tab__panels" data-tabs-content>
    {{#each items}}
      <section role="tabpanel" id="panel{{@index}}" class="tab__panel {{modifier}}" data-tabs-pane>
        Lorem ipsum {{@index}}
      </section>
    {{/each}}
  </div>
</section>
 
{
  "items": [
    {
      "title": "Tab titel 1",
      "modifier": "tab--active"
    },
    {
      "title": "Tab titel 2"
    },
    {
      "title": "Tab titel 3"
    },
    {
      "title": "Tab titel 4"
    },
    {
      "title": "Tab titel 5"
    }
  ]
}
  • Content: 
    .tab__nav {
  display: inline-flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 2px solid $color__cta;
}

.tab__nav-item {
  display: block;
  flex-grow: 1;
}

.tab__link {
  display: block;
  background-color: $color__bright;
  color: $color__cta;
  padding: rem(16);
  text-decoration: none;
  text-align: center;
  font-size: rem(16);
  font-weight: $font-weight--medium;
  line-height: 1.375;
  text-transform: uppercase;

  &:hover {
    background-color: $color__cta-hover;
    color: $color__bright;
  }

  &:active,
  &.tab--active {
    background-color: $color__cta;
    color: $color__bright;
  }
}

.tab__panel {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

  &:focus {
    outline: none;
  }

  &.tab--active {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
  }
}
  • URL: /components/raw/tab/_tab.scss
  • Filesystem Path: patterns/02-molecules/tab/_tab.scss
  • Size: 973 Bytes
  • Content: 
    import tabby from 'tabbyjs';
import Base from '../../_config/base';

class Tab extends Base {
  constructor(el) {
    super(el);

    tabby.init({
      selectorToggle: '[data-tab]', // Tab toggle selector
      selectorToggleGroup: '[data-tabs]', // Tab toggle group selector
      selectorContent: '[data-tabs-pane]', // Tab content selector
      selectorContentGroup: '[data-tabs-content]', // Tab content group selector
      toggleActiveClass: 'tab--active', // Class added to active toggle elements
      contentActiveClass: 'tab--active', // Class added to active tab content areas
      initClass: 'js-tabby', // Class added to <html> element when initiated
      stopVideo: true, // [Boolean] If true, stop videos when tab closes
    });
  }
}

Tab.className = 'Tab';
export default Tab;
  • URL: /components/raw/tab/tab.js
  • Filesystem Path: patterns/02-molecules/tab/tab.js
  • Size: 798 Bytes

There are no notes for this item.