_activeComponentId = 'demoTabStrip';

TabStrip

A row of tabs for switching between views. A tab can also be a split button, combining its own click action with a separate submenu, as the Friday tab below does.

Try it

Component demos show every property used in the settings panel, even at default values, so you can see exactly what's being configured. Bindary's data binding updates the component live when a setting changes; that mechanism isn't covered here, see Bindary for how it works.

Monday

Usage

The HTML and JavaScript tabs build the identical TabStrip and split-button submenu shown above, declaratively via attributes or imperatively via the JS API.

<a id="tabButton" ui-type="Button" ui-action="render"
   ui-primary="false" ui-transparent="true" ui-transparent-border="false" ui-decoration="2"></a>

<div id="fridayMenu" ui-type="Menu" ui-visible-root="false" ui-horizontal-root="false" ui-collapse-on-select="true"
     ui-events='{ "onItemSelect": "$bindary.controller.tabStrip.selectFriday" }'
     ui-item-list='[
        { "id": "friday_morning", "type": 2, "radioGroupId": "time", "text": "Morning", "selected": true },
        { "id": "friday_afternoon", "type": 2, "radioGroupId": "time", "text": "Afternoon" },
        { "id": "friday_evening", "type": 2, "radioGroupId": "time", "text": "Evening" }
     ]'></div>

<div id="tabStrip" ui-type="TabStrip" ui-button-id="tabButton" ui-alignment="0"
     ui-events='{ "onItemSelect": "$bindary.controller.tabStrip.select" }'
     ui-item-list='[
        { "id": "monday", "text": "Monday", "selected": true },
        { "id": "tuesday", "text": "Tuesday" },
        { "id": "wednesday", "text": "Wednesday" },
        { "id": "thursday", "text": "Thursday" },
        { 
            "id": "friday", "text": "Friday", "hasIcon": true,
            "cssClassIcon": "ico-time", "split": true, "menuId": "fridayMenu" 
        }
     ]'></div>

<div id="tabContent">
    <h3>Monday</h3>
    <div id="scheduleMonday" style="display: none">Training at 6:00 PM</div>
    <div id="scheduleTuesday" style="display: none">Training at 7:00 PM</div>
    <div id="scheduleWednesday" style="display: none">Training at 8:00 PM</div>
    <div id="scheduleThursday" style="display: none">Training at 6:00 PM</div>
    <div id="scheduleFridayMorning" style="display: none">Training at 9:00 AM</div>
    <div id="scheduleFridayAfternoon" style="display: none">Training at 3:00 PM</div>
    <div id="scheduleFridayEvening" style="display: none">Training at 8:00 PM</div>
</div>

The functions referenced above by name live on this demo's Bindary controller:

$bindary.controller.tabStrip =
{
    select: (tabStrip, args) =>
    {
        const h3 = document.querySelector('#tabContent h3');
        let time = '';

        h3.textContent = args.item.text;

        if (args.item.id === 'friday')
        {
            const selected = $UI.store[args.item.menuId].getSelectedItem('time');
            time = selected ? selected.text : 'Morning';
            h3.textContent += ' ' + time;
        }

        document.querySelectorAll('#tabContent > div').forEach(el => el.style.display = 'none');
        document.getElementById('schedule' + args.item.text + time).style.display = '';
    },

    // Re-selecting Friday re-fires onItemSelect above, which recomputes the
    // schedule based on whichever time of day is now selected in the menu.
    selectFriday: (menu, args) =>
    {
        const fridayTab = $UI.store['tabStrip_friday'];

        if (!fridayTab)
            return;

        fridayTab.deselect();
        fridayTab.select();
    }
};

const tabButton = $UI.createComponent(componyx.UI.Button, {
    id: 'tabButton',
    action: componyx.UI.Button.ActionOption.RENDER,
    primary: false,
    transparent: true,
    transparentBorder: false,
    decoration: componyx.UI.Button.DecorationOption.OVERLINE,
    containerElement: document.body
});
tabButton.show();

const fridayMenu = $UI.createComponent(componyx.UI.Menu, {
    id: 'fridayMenu',
    visibleRoot: false,
    horizontalRoot: false,
    collapseOnSelect: true,
    itemList: [
        { id: 'friday_morning', type: 2, radioGroupId: 'time', text: 'Morning', selected: true },
        { id: 'friday_afternoon', type: 2, radioGroupId: 'time', text: 'Afternoon' },
        { id: 'friday_evening', type: 2, radioGroupId: 'time', text: 'Evening' }
    ],
    containerElement: document.body
});
fridayMenu.events.onItemSelect.add($bindary.controller.tabStrip.selectFriday);
fridayMenu.show();

const tabStrip = $UI.createComponent(componyx.UI.TabStrip, {
    id: 'tabStrip',
    buttonId: tabButton.id,
    alignment: componyx.UI.TabStrip.AlignmentOption.TOP,
    itemList: [
        { id: 'monday', text: 'Monday', selected: true },
        { id: 'tuesday', text: 'Tuesday' },
        { id: 'wednesday', text: 'Wednesday' },
        { id: 'thursday', text: 'Thursday' },
        { 
            id: 'friday', text: 'Friday', hasIcon: true, 
            cssClassIcon: 'ico-time', split: true, menuId: fridayMenu.id 
        }
    ],
    containerElement: document.body
});
tabStrip.events.onItemSelect.add($bindary.controller.tabStrip.select);
tabStrip.show();

alignment accepts the numeric componyx.UI.TabStrip.AlignmentOption enum: 0 Top, 1 Bottom. primary, transparent, transparentBorder and decoration are Button properties, not TabStrip properties: reference a Button via buttonId, as shown above, to apply them to every tab at once. To make one tab look different from the rest, set the same properties directly on that item in itemList instead, an item's own value takes precedence over the shared button. Either way, changing these after render doesn't update the tabs on its own, set the new values then re-render: