Tabs

Tabs #

import { PTabs, PTab } from 'pearkit';

Basic #

PTabs consists of one or more PTab components.

Tab 1Tab 2Tab 3Tab 4Tab 5

Tab 1 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.

<PTabs color="orange">
    <PTab label="Tab 1">
        <p>Tab 1 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.</p>
    </PTab>
    <PTab label="Tab 2">
        <p>Tab 2 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.</p>
    </PTab>
    <PTab label="Tab 3">
        <p>Tab 3 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.</p>
    </PTab>
    <PTab label="Tab 4">
        <p>Tab 4 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.</p>
    </PTab>
    <PTab label="Tab 5">
        <p>Tab 5 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.</p>
    </PTab>
</PTabs>

Active Tab #

You can determine which tab will be selected when the component is first loaded with the activeTabIndex property. And you can control every index change by connecting it to a state.

Active Index : 3

Tab 1Tab 2Tab 3Tab 4Tab 5

Tab 4 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.

const [activeIndex,setActiveIndex] = useState(3);

<PTabs activeTabIndex={activeIndex} onChange={setActiveIndex}>
    <PTab label="Tab 1">
        <p>Tab 1 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.</p>
    </PTab>
    <PTab label="Tab 2">
        <p>Tab 2 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.</p>
    </PTab>
    <PTab label="Tab 3">
        <p>Tab 3 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.</p>
    </PTab>
    <PTab label="Tab 4">
        <p>Tab 4 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.</p>
    </PTab>
    <PTab label="Tab 5">
        <p>Tab 5 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.</p>
    </PTab>
</PTabs>

Colors #

Since we use the tailwind color palette in our design, you can use the names of all tailwind colors as props. For example : sky red indigo

Tab 1Tab 2Tab 3Tab 4Tab 5

Tab 1 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.

<PTabs color="orange">
    //other tab components
</PTabs>

Icon #

You can add a icon by passing an icon component to the icon property.

<PTabs>
    <PTab label="Register Form" icon={<Icon icon="mdi:user-plus"/>}>
        <p>Register Form</p>
    </PTab>
    <PTab label="Login Form" icon={<Icon icon="mdi:login"/>}>
        <p>Login Form</p>
    </PTab>
</PTabs>

Disabled #

You can disable the relevant tab by giving the component the disabled property.

Tab 1Tab 2Tab 3Tab 4Tab 5

Tab 1 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.

<PTabs>
    // other tabs
    <PTab label="Tab 3" disabled>
        <p>Tab 3 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.</p>
    </PTab>
    // other tabs
</PTabs>

Overflow #

If the component exceeds the size of its container, the scroll function is automatically activated and the relevant buttons appear.

Tab 1Tab 2Tab 3Tab 4Tab 5Tab 6Tab 7Tab 8Tab 9Tab 10Tab 11Tab 12Tab 13Tab 14Tab 15Tab 16Tab 17Tab 18Tab 19Tab 20Tab 21Tab 22Tab 23Tab 24Tab 25Tab 26Tab 27Tab 28Tab 29Tab 30Tab 31Tab 32Tab 33Tab 34Tab 35Tab 36Tab 37Tab 38Tab 39Tab 40Tab 41Tab 42Tab 43Tab 44Tab 45Tab 46Tab 47Tab 48Tab 49Tab 50Tab 51Tab 52Tab 53Tab 54Tab 55Tab 56Tab 57Tab 58Tab 59Tab 60Tab 61Tab 62Tab 63Tab 64Tab 65Tab 66Tab 67Tab 68Tab 69Tab 70Tab 71Tab 72Tab 73Tab 74Tab 75Tab 76Tab 77Tab 78Tab 79Tab 80Tab 81Tab 82Tab 83Tab 84Tab 85Tab 86Tab 87Tab 88Tab 89Tab 90Tab 91Tab 92Tab 93Tab 94Tab 95Tab 96Tab 97Tab 98Tab 99

Tab 1 = Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, expedita.

<PTabs>
    {
        Array.from({length:99},(_, index) => index + 1).map((i) => 
            <PTab key={i} label={'Tab ' + i}>
                <p>{'Tab ' + i} = Lorem ipsum dolor sit amet, 
                consectetur adipisicing elit. Cum, expedita.</p>
            </PTab>
        )
}
</PTabs>

Accessibility (Not Ready Yet) #

None

Api #

Here you can see all the working features for the tabs and tab component.

Name	Type	Default	Description
PTab \| label	string	null	Label of the PTab component
PTab \| disabled	boolean \| true \| false	false	Disabled status of the PTab component
PTab \| icon	ReactNode	null	Icon component of the PTab component
PTabs \| colors	TwColor \| All tailwind color names	blue	Colors of the PTabs component
PTabs \| activeIndexTab	number	0	Active Tab of the PTabs component
PTabs \| onChange	function	Tab Index Number	onChange method of the PTabs component

Switch

Tag