yb-tabs v2.0.2

Tabs

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

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

• 1й вариант: \<Tabs> + data[] данные для построения табов - внутри массива data
• 2й вариант: \<Tabs> + \<Tab> табы строятся из элементов \<Tab>, обернутых в общий элемент \<Tabs>

Пропсы \<Tabs>

• void function onClick(String tab, Number index, Object item) клик по любому \<Tab> (в случае 1-го варианта использования) item - содержимое выбранного объекта из массива data, index - порядковый индекс \<Tab> onClick вызывается автоматически при вызове внешнего метода $setTab
• void function onClick(String tab, Number index) клик по любому \<Tab> (в случае 2-го варианта использования) tab - метка блока \<Tab>, index - порядковый индекс \<Tab> onClick вызывается автоматически при вызове внешнего метода $setTab
• Array data, default = undefined данные для построения \<Tab>-ов (в случае 1-го варианта использования) Формат: {String/Nubmer tab, String/JSX label} Могут применяться другие ключи, которые указываются в uniqueKey, labelKey
• String uniqueKey, default="tab" уникальный ключ в массиве data, по которому будут разделяться active-табы (в случае 1-го варианта использования)
• String labelKey, default="label" ключ в массиве data, вывод содержимого, надписи (в случае 1-го варианта использования)
• String activeTab, default = undefined tab у \<Tab>, в котором на старте сразу выставится css класс .active_true (\<Tab>, который подсвечивается на старте, как активный)
• Nubmer activeIndex, default = undefined index у \<Tab>, аналогично activeTab (activeTab приоритетней)
• Boolean disableClicking, default=false При =true запрещает клик по табу Callbacks
• Object callbacks Для внешнего вызова внутренних методов Trace
• Boolean traceClicking, default=false При =true запрещает кликать по тем табам, которые ни разу не были левее активного запрет на клик по табам ПОСЛЕ активного (после самого правого, который хоть раз был активным) Запоминает номер самого правого-активного таба Вынуждает активировать табы через методы внешнего вызова (через $setTab) Пример: Если активным табом стал таб_3, то доступны для клика таб_1 и таб_2. При клике по табу_1 - он становится активным, при этом таб_2 и таб_3 остаются доступными для клика, а таб_4 - недоступный (до него клик не дошёл)
• Number startIndexToTrace default=0 Устанавливает начальный индекс для traceClicking
• Boolean traceMark, default=false При =true позволяет подсвечивать все предыдущие табы ДО активного (добавляет каждому табу ДО активного css класс .trace_true) При traceClicking=true подсвечивает все trace-табы

Пропсы \<Tab>

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

Пропсы \<TabContent>

• String tab, default = undefined метка блока, который хотим ассоциировать с соответствующим табом
• String activeTab, default = undefined метка tab, которая в данный момент активна при выборе одного из \<Tab>
• Number index, default = undefined индекс блока, который хотим ассоциировать с соответствующим табом
• Number activeIndex, default = undefined индекс активного \<Tab>. (activeTab приоритетнее activeIndex)

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

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

CSS-свойства

• .Tab:hover свойства при наведении
• .Tab.active_true свойства при выборе - активный таб
• .Tab.trace_true свойства при подсветке всех табов ДО активного

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

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

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>