React Design System: component Tabs

Tabs

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

React

Angular

Ember

Design

React

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

Overview

API

Code

Component 'Tabs'

First, you need to import a component to your code (сheck component path is right):

import Tabs from "../../core/Tabs";

To use the component, copy and paste an example from the CODE tab.
Default props of component can be omitted, they are applied automatically. For example, you can skip the prop type='def', because 'def' is the default value of prop 'type'.

Tabs is the top-level component responsible for rendering the tab list and coordinating selection.
Children of the Tabs are rendered in order in the tab list, which is a flex container.
Tab children are managed by the component; clicking one will change selection.

import { Tab } from "@blueprintjs/core";

Tab API description:

id

string | number

Unique identifier for this Tabs container. This will be combined with the id of each Tab child to generate ARIA accessibility attributes. IDs are required and should be unique on the page to support server-side rendering.Required.

title

string | element

Content of tab title element, rendered in a list above the active panel.

panel

element

Panel content, rendered by the parent Tabs when this tab is active. If omitted, no panel will be rendered for this tab.

type

string = def

This prop set the shape of the component. Possible states: def . The default state is def.

view

string = filled

This prop set the view of the component. Possible states: filled | flat | smooth | outlined | raised . The default state is filled.

color

string = default

className

string

A space-delimited list of class names to pass along to a child element.

id

string | number

fill

boolean = false

Whether this component should expand to fill its container.