Security News
Supply Chain Attack Detected in Solana's web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
@chakra-ui/tabs
Advanced tools
@chakra-ui/tabs is a component library for creating tabbed interfaces in React applications. It provides a set of accessible and customizable tab components that can be used to organize content into separate views, making it easier for users to navigate through different sections of an application.
Basic Tabs
This code demonstrates how to create a basic tabbed interface with three tabs, each containing different content.
```jsx
import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/tabs';
function BasicTabs() {
return (
<Tabs>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>Content for Tab 1</p>
</TabPanel>
<TabPanel>
<p>Content for Tab 2</p>
</TabPanel>
<TabPanel>
<p>Content for Tab 3</p>
</TabPanel>
</TabPanels>
</Tabs>
);
}
```
Vertical Tabs
This code demonstrates how to create a vertical tabbed interface, where the tabs are aligned vertically instead of horizontally.
```jsx
import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/tabs';
function VerticalTabs() {
return (
<Tabs orientation="vertical">
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>Content for Tab 1</p>
</TabPanel>
<TabPanel>
<p>Content for Tab 2</p>
</TabPanel>
<TabPanel>
<p>Content for Tab 3</p>
</TabPanel>
</TabPanels>
</Tabs>
);
}
```
Custom Tab Styling
This code demonstrates how to apply custom styles to the tabs and their content, including changing the background color and text color of the selected tab.
```jsx
import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/tabs';
import { Box } from '@chakra-ui/react';
function CustomStyledTabs() {
return (
<Tabs>
<TabList>
<Tab _selected={{ color: 'white', bg: 'blue.500' }}>Tab 1</Tab>
<Tab _selected={{ color: 'white', bg: 'blue.500' }}>Tab 2</Tab>
<Tab _selected={{ color: 'white', bg: 'blue.500' }}>Tab 3</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Box p={4} bg="gray.100">Content for Tab 1</Box>
</TabPanel>
<TabPanel>
<Box p={4} bg="gray.100">Content for Tab 2</Box>
</TabPanel>
<TabPanel>
<Box p={4} bg="gray.100">Content for Tab 3</Box>
</TabPanel>
</TabPanels>
</Tabs>
);
}
```
react-tabs is a lightweight and accessible React component for creating tabbed interfaces. It offers a simple API and is highly customizable. Compared to @chakra-ui/tabs, react-tabs is more minimalistic and may require additional styling to achieve the same level of polish.
Material-UI is a popular React component library that follows Google's Material Design guidelines. It includes a Tabs component that is highly customizable and comes with a wide range of features. Compared to @chakra-ui/tabs, Material-UI offers a more comprehensive set of components and design options, but it may be more complex to set up and use.
Semantic UI React is the official React integration for Semantic UI. It includes a Tab component that allows for the creation of tabbed interfaces. Compared to @chakra-ui/tabs, Semantic UI React provides a more extensive set of UI components and follows the Semantic UI design principles, which may appeal to developers looking for a specific design aesthetic.
An accessible tabs component.
The Tab
and TabPanel
elements are associated by their order in the tree.
None of the components are empty wrappers, each is associated with a real DOM
element in the document, giving you maximum control over styling and
composition.
yarn add @chakra-ui/tabs
# or
npm i @chakra-ui/tabs
import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react"
<Tabs>
<TabList>
<Tab>One</Tab>
<Tab>Two</Tab>
<Tab>Three</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>one!</p>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
<TabPanel>
<p>three!</p>
</TabPanel>
</TabPanels>
</Tabs>
Tabs come in 6 different variants to style the tabs: line
,enclosed
,
enclosed-colored
, soft-rounded
, solid-rounded
. Each variant comes it
different color schemes.
<Tabs variant="enclosed" colorScheme="red">
<TabList>
<Tab>One</Tab>
<Tab>Two</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>one!</p>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
</TabPanels>
</Tabs>
By default, Tabs
are activated automatically. This means when you use the
arrow keys to change tabs, the tab is activated and focused.
The content of a TabPanel
should ideally be preloaded. However, if switching
to a tab panel causes a network request and possibly a page refresh, there might
be some notable latency and this might affect the experience for keyboard and
screen reader users.
In this scenario, you should use a manually activated tab, it moves focus without activating the tabs. With focus on a specific tab, users can activate a tab by pressing Space or Enter.
<Tabs isManual variant="enclosed">
<TabList>
<Tab>One</Tab>
<Tab>Two</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>one!</p>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
</TabPanels>
</Tabs>
You can change the size of the tab by passing size
prop. We support 3 sizes
sm
, md
, lg
<Tabs size="md" variant="enclosed">
<TabList>
<Tab>One</Tab>
<Tab>Two</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>one!</p>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
</TabPanels>
</Tabs>
FAQs
Accessible Tabs component for React and Chakra UI
The npm package @chakra-ui/tabs receives a total of 349,963 weekly downloads. As such, @chakra-ui/tabs popularity was classified as popular.
We found that @chakra-ui/tabs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.