ant-design
  1. ant-design-tabs
PreviousNext

Ant Design Tabs

Ant Design Tabs is a versatile component that allows you to create a set of customizable tabs on your application or website.

Syntax

Here is the syntax for creating Ant Design Tabs:

import { Tabs } from 'antd';

const { TabPane } = Tabs;

function callback(key) {
  console.log(key);
}

function App() {
  return (
    <Tabs defaultActiveKey="1" onChange={callback}>
      <TabPane tab="Tab 1" key="1">
        Content of Tab Pane 1
      </TabPane>
      <TabPane tab="Tab 2" key="2">
        Content of Tab Pane 2
      </TabPane>
      <TabPane tab="Tab 3" key="3">
        Content of Tab Pane 3
      </TabPane>
    </Tabs>
  );
}

ReactDOM.render(<App />, mountNode);

Use

Ant Design Tabs are commonly used in applications and websites to display multiple content sections within a single view. Tabs allow users to quickly switch between content sections, making it easy for them to navigate through information and find what they are looking for.

Tabs can be used for a variety of purposes, such as:

  • Organizing product catalogs
  • Displaying different types of content within a single page
  • Creating a navigation menu for a dashboard
  • Grouping related information within a single view

Importance

Ant Design Tabs are an important component for any application or website that needs to organize multiple sections of content within a single view. They provide an intuitive and visually appealing way to display information and make it easy for users to navigate between sections.

Ant Design Tabs are highly customizable, allowing you to tailor them to fit the specific needs of your application or website. You can customize the look and feel of the tabs, as well as the behavior when a user interacts with them.

Example

Here is an example of how Ant Design Tabs can be used in a product catalog:

import { Tabs } from 'antd';
import ProductList from './ProductList';

const { TabPane } = Tabs;

function ProductCatalog() {
  return (
    <Tabs defaultActiveKey="1">
      <TabPane tab="All Products" key="1">
        <ProductList />
      </TabPane>
      <TabPane tab="Men's Apparel" key="2">
        <ProductList category="mens-apparel" />
      </TabPane>
      <TabPane tab="Women's Apparel" key="3">
        <ProductList category="womens-apparel" />
      </TabPane>
      <TabPane tab="Accessories" key="4">
        <ProductList category="accessories" />
      </TabPane>
    </Tabs>
  );
}

export default ProductCatalog;

In this example, the Ant Design Tabs component is used to create a product catalog with multiple categories. Each category is displayed within a separate tab, and the user can switch between tabs to view different product collections.

Summary

Ant Design Tabs are a powerful component that make it easy to organize and display multiple content sections within a single view. They are highly customizable, allowing you to tailor them to fit the specific needs of your application or website.

Whether you are creating a product catalog, a dashboard navigation menu, or any other type of content display, Ant Design Tabs can help you create a clean and organized user experience that your users will appreciate.

TableTag
Published on: