Components
Tabs
Navigation elements which make it simple to switch between different views while staying on the main page.
Import Tabs
Tremor exports two components to create tabs:
TabList
: Wrapper component to declare tabsTab
: Children component representing a tab
import { TabList, Tab } from "@tremor/react";
Anatomy
How the basic component is pieced together displaying all properties with their default values.
import { TabList, Tab } from "@tremor/react"; export default () => ( <TabList defaultValue={undefined} value={undefined} onValueChange={undefined} color="blue" marginTop="mt-0"> <Tab text="" value={undefined} icon={undefined} /> </TabList> );
Usage example
Total Sales
$ 442,276
Product A
$ 100,838
(38%)
Product B
$ 90,224
(34%)
import { UserGroupIcon, UserIcon, } from '@heroicons/react/solid'; import { TabList, Tab, Card, ProgressBar, Flex, Text, Metric, } from "@tremor/react"; import { useState } from "react"; const LocationA = [ { name: "Product A", percentage: 38, stat: "$ 100,838", }, { name: "Product B", percentage: 34, stat: "$ 90,224", }, ]; const LocationB = [ { name: "Product Z", percentage: 82, stat: "$ 108,799", }, { name: "Product E", percentage: 10, stat: "$ 13,268", }, ]; export default () => { const [showCard, setShowCard] = useState(true); return ( <Card> <> <Text>Total Sales</Text> <Metric>$ 442,276</Metric> <TabList defaultValue={ 1 } handleSelect={ (value) => setShowCard(value === 1) } marginTop="mt-6" > <Tab value={ 1 } text="Peer performance" icon={ UserGroupIcon }/> <Tab value={ 2 } text="Individual performance" icon={ UserIcon }/> </TabList> </> { showCard === true ? ( <div className="mt-6"> { LocationA.map((item) => ( <div className="mt-4" key={ item.name }> <Flex marginTop="mt-4"> <Text>{ item.name }</Text> <Flex spaceX="space-x-2" justifyContent="justify-end"> <Text> { ' ' } { item.stat } { ' ' } </Text> <Text> { ' ' } ( { item.percentage } %) </Text> </Flex> </Flex> <ProgressBar percentageValue={ item.percentage } marginTop="mt-2" /> </div> )) } </div> ) : ( <div className="mt-6"> { LocationB.map((item) => ( <div className="mt-4" key={ item.name }> <Flex marginTop="mt-4"> <Flex> <Text> { ' ' } { item.name } { ' ' } </Text> </Flex> <Flex spaceX="space-x-2" justifyContent="justify-end"> <Text> { ' ' } { item.percentage } % { ' ' } </Text> <Text> { ' ' } ( { item.stat } ) { ' ' } </Text> </Flex> </Flex> <ProgressBar percentageValue={ item.percentage } marginTop="mt-2" /> </div> )) } </div> ) } </Card> ); };
Controlled state example
The example below shows a Tabs composition with a controlled state.
import { useState } from "react"; import { TabList, Tab } from "@tremor/react"; export default () => { const [value, setValue] = useState(null); return ( <TabList value={value} onValueChange={ setValue }> <Tab value={5} text={'Five'} /> <Tab value={3} text={'Three'} /> <Tab value={1} text={'One'} /> </TabList> ); }
API Reference: TabList
- defaultValueoptional
- Description
- Sets the default selected tab item in an uncontrolled setting.
- Type
- any
- Default
- -
- Values
- E.g. { 1 }
- valueoptional
- Description
- The controlled state of a Tab. Must be used in conjunction with onValueChange.
- Type
- any
- Default
- -
- Values
- E.g. { 1 }
- onValueChangeoptional
- Description
- Event handler called when the state of the TabList changes.
- Type
- function
- Default
- Values
- coloroptional
- Description
- Set the color of the selected tab.
- Type
- string
- Default
- blue
- Values
- See color sections
- marginTopoptional
API Reference: Tab
- text
- Description
- Sets the tab text.
- Type
- string
- Default
- -
- Values
- value
- Description
- Assign an identifier to the tab for reference in the TabList component.
- Type
- any
- Default
- -
- Values
- E.g. { 1 }
- iconoptional
- Description
- Set an optional icon for a Tab.
- Type
- React.ElementType
- Default
- undefined
- Values
- coloroptional
- Description
- Set the color indivdually of a selected tab.
- Type
- string
- Default
- blue
- Values
- See color sections
TableText