Tabs

Organize content into switchable sections.

Live Demo

This is the overview panel. Each tab shows different content by toggling a single state value.

Details panel. The data-show attribute handles visibility. No CSS classes to manage.

Settings panel. The active tab style uses data-bind-class with a ternary expression.

Source

HTML + JavaScript 
<div data-component="my-tabs" data-cloak>
    <div class="tabs" data-list="tabs">
        <template>
            <button class="tab" data-bind="label" data-action="selectTab"
                    data-bind-class="name === activeTab ? 'active' : ''"></button>
        </template>
    </div>
    <div data-show="activeTab === 'overview'">Overview content here.</div>
    <div data-show="activeTab === 'details'">Details content here.</div>
    <div data-show="activeTab === 'settings'">Settings content here.</div>
</div>

<script>
wildflower.component('my-tabs', {
    state: {
        activeTab: 'overview',
        tabs: [
            { name: 'overview', label: 'Overview' },
            { name: 'details', label: 'Details' },
            { name: 'settings', label: 'Settings' }
        ]
    },
    selectTab(e, el, { index }) {
        this.activeTab = this.tabs[index].name;
    }
});
</script>

Key Points

  • Tab buttons are rendered from a tabs array with data-list: add or remove tabs by changing the array
  • data-bind-class preserves static classes and toggles active based on which tab matches
  • data-show toggles content panel visibility based on the active tab
  • data-cloak on the component prevents flash before bindings are processed; requires [data-cloak] { display: none; } in your CSS

Related documentation

Conditional Rendering →