0.2.42 • Published 3 years ago

@kodiak-ui/tabs v0.2.42

Weekly downloads
119
License
MIT
Repository
github
Last release
3 years ago

Kodiak UI Tabs

Easily render fully composable and styleable tabs in your UI.

npm install @kodiak-ui/tabs
yarn add @kodiak-ui/tabs
function TabsExample() {
  const tabsData = React.useMemo(function generateTabs() {
    return [
      {
        tab: 'Tab 1',
        panel: (
          <div>
            <h3>Testing</h3>
          </div>
        ),
      },
      { tab: 'Tab 2', panel: 'Tab 2' },
      { tab: 'Tab 3', panel: 'Tab 3' },
      { tab: 'Tab 4', panel: 'Tab 4' },
    ]
  }, [])

  const { tabs, tabPanels, selectedIndex } = useTabs({
    tabs: tabsData,
  })

  return (
    <Tabs sx={{ border: '1px solid', borderColor: 'gray.2' }}>
      <TabList aria-label="Describes the tabs">
        {tabs.map((props, index) => (
          <Tab
            key={index}
            {...props}
            sx={{
              color: selectedIndex === index ? 'primary' : 'text',
              position: 'relative',
              '::after': {
                bg: selectedIndex === index ? 'primary' : 'muted',
                bottom: 0,
                content: '""',
                height: selectedIndex === index ? '2px' : '1px',
                left: 0,
                position: 'absolute',
                right: 0,
                width: '100%',
              },
            }}
          />
        ))}
      </TabList>
      {tabPanels.map((props, index) => (
        <TabPanel key={index} {...props} sx={{ p: 4 }} />
      ))}
    </Tabs>
  )
}
0.2.42

3 years ago

0.2.32

4 years ago

0.2.31

4 years ago

0.2.30

4 years ago

0.2.29

4 years ago

0.2.28

4 years ago

0.2.27

4 years ago

0.2.26

4 years ago

0.2.25

4 years ago

0.2.24

4 years ago

0.2.24-alpha.7

4 years ago

0.2.24-alpha.5

4 years ago

0.2.24-alpha.6

4 years ago

0.2.24-alpha.4

4 years ago

0.2.24-alpha.2

4 years ago

0.2.23

4 years ago

0.2.22

4 years ago

0.2.21

4 years ago

0.2.20

5 years ago

0.2.18

5 years ago

0.2.16

5 years ago

0.2.15

5 years ago

0.2.13

5 years ago

0.2.12

5 years ago

0.2.11

5 years ago

0.2.9

5 years ago

0.2.8

5 years ago

0.2.7

5 years ago

0.2.5

5 years ago

0.2.4

5 years ago

0.2.2

5 years ago

0.2.1

5 years ago

0.1.44

5 years ago

0.1.45

5 years ago

0.2.0

5 years ago

0.1.38

5 years ago

0.1.39

5 years ago

0.1.37

5 years ago

0.1.36

5 years ago

0.1.35

5 years ago

0.1.33

5 years ago

0.1.34

5 years ago

0.1.31

5 years ago

0.1.32

5 years ago

0.1.30

5 years ago

0.1.29

5 years ago

0.1.27

5 years ago

0.1.26

5 years ago

0.1.22

5 years ago

0.1.23

5 years ago

0.1.24

5 years ago

0.1.19

5 years ago

0.1.17

5 years ago

0.1.18

5 years ago

0.1.15

5 years ago

0.1.16

5 years ago

0.1.14

5 years ago

0.1.13

5 years ago

0.1.10

5 years ago

0.1.11

5 years ago

0.1.12

5 years ago

0.1.8

5 years ago

0.1.9

5 years ago

0.1.7

5 years ago

0.1.5

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago