Sito MUI TabView

Tabs make it easy to explore and switch between different views.

How to use it?

import SitoMUITabView from "sito-mui-tab-view";

function App() {
    return {
        <SitoMUITabView
            tabs={["Hola", "Adiós"]}
            content={[<div>Hola</div>, <div>Adiós</div>]}
        />
    }
}

You can change the name of the tab view, if you don't like its name 😂

import SitoMUITabView as TabView from "sito-mui-tab-view";

function App() {
    return {
        <TabView
            tabs={["Hola", "Adiós"]}
            content={[<div>Hola</div>, <div>Adiós</div>]}
        />
    }
}

You can add your css rules, like sx prop for styled-component, style prop like inline css styles and classNames from your css files

import SitoMUITabView from "sito-mui-tab-view";

function App() {
    return {
        <SitoMUITabView
            sx={{ width: "350px", height: "350px" }}
            tabs={["Hola", "Adiós"]}
            content={[<div>Hola</div>, <div>Adiós</div>]}
        />
    }
}

Props

Name	Type	Default	Description
id	string		html identifier
name	string		html name
className	string		css class name
color	string	"primary"	color for the indicator and text of the tabs
tabsAtTop	boolean	true	show tabs row at top
tabsAtBottom	boolean	false	show tabs row at bottom
content	Array	[]	array of node children
tabs	Array	[]	array of labels of tabs
value	number		current tab
onChange	func (event, newTab)		tab event handler when change the current tab
sx	Array<func | object | bool> | func | object		The system prop that allows defining system overrides as well as additional CSS styles.
tabsContainerSx	Array<func | object | bool> | func | object		The system prop that allows defining system overrides as well as additional CSS styles for tabs row.
tabsSx	Array<func | object | bool> | func | object		The system prop that allows defining system overrides as well as additional CSS styles for each tab.
contentSx	Array<func | object | bool> | func | object		The system prop that allows defining system overrides as well as additional CSS styles for each content.
style	Array<func | object | bool> | func | object		inline css

🙌 Good luck out there my friend 🙌