Tabs

Универсальные табы Посмотреть как работает

Варианты использования (примеры jsx ниже)

• 1й вариант: <Tabs> + data[] данные для построения табов - внутри массива data

Пропсы <Tabs>

• void function onClick(String tab, Number index, Object item) клик по любому <Tab> (в случае 1-го варианта использования) item - содержимое выбранного объекта из массива data, index - порядковый индекс <Tab> onClick вызывается автоматически при вызове внешнего метода $setTab

Пропсы <Tab>

• String tab, default = undefined метка блока, которую получим при клике по текущему <Tab>

Пропсы <TabContent>

• String tab, default = undefined метка блока, который хотим ассоциировать с соответствующим табом

Внешние вызовы <Tabs>

• void $setTab (String tab) ! использовать только в 1-м варианте (требует наличие массива data) делает указанный <Tab> принудительно активным (присваивает css класс .active_true) здесь tab - метка блока При вызове $setTab, метод, установленный через onClick, вызывается принудительно, даже если установлено свойство disableClicking=true
• Nubmer $getActiveIndex() возвращает номер активного таба
• Number $getTraceIndex() возвращает максимальный номер того таба, до которого дошла активность (это число не уменьшается, не сбрасывается)

CSS-свойства

• .Tab:hover свойства при наведении

Подключение и использование

• Импортируем

import {Tabs, Tab, TabContent} from "yb-tabs";

• Пример jsx

// 1й вариант - <Tabs> + data
this.data = [
    {tab: 1, label: <b>jsx 1</b>},
    {tab: 2, label: "tab 2"},
    {tab: 3, label: "tab 3"},
];
this.click(item, index) {}
<Tabs
    data={this.data}
    uniqueKey="tab"
    labelKey="label"
    onClick={this.click}
/>


// 2й вариант - <Tabs> + <Tab>
<Tabs activeTab={this.state.activeTab} onClick={this.click}>
    <Tab tab="tab 1">
        tab 1
    </Tab>
    <Tab tab="tab 2">
        tab 2
    </Tab>
    <Tab tab="tab 3">
        tab 3
    </Tab>
</Tabs>


// Отображение выбранных табов <TabContent>
<TabContent tab="tab 1" activeTab={this.state.activeTab}>
    Контент для tab 1
</TabContent>
<TabContent tab="tab 2" activeTab={this.state.activeTab}>
    Контент для tab 2
</TabContent>
<TabContent tab="tab 3" activeTab={this.state.activeTab}>
    Контент для tab 3
</TabContent>


// Отображение выбранных табов <Tabs> + <TabContent>
<Tabs activeTab={this.state.activeTab}>
    {this.data.map((item, index)=>{
        return  <TabContent tab={item.tab}>
            Контент 1 для tab={item.tab} index={index}
        </TabContent>
    })}
</Tabs>


// Вариант с callbacks
<Tabs
    activeTab={this.state.activeTab}
    data={this.data}
    onClick={this.click}
    callbacks={this.callbacks}
/>
<div onClick={()=>this.callbacks.$setTab("tab 1")}>Button 1</div>
<div onClick={()=>this.callbacks.$setTab("tab 2")}>Button 2</div>
<div onClick={()=>this.callbacks.$setTab("tab 3")}>Button 3</div>