When the content needs to be grouped and displayed in different modules or pages, you could use Tabs to switch between different groups or pages
Demos
How to import
import { Tabs, TabPane } from '@douyinfe/semi-ui';
Basic Usage
Tbs supports three types of styles: line, button, and card. By default, the first tab is selected.
Tabs supports two declare ways, and the rendering process of the two is different:
Pass the array of objects through tabList, when using tabList, only render the currently passed node each time
Or use <TabPane> to explicitly pass in item by item. When using <TabPane>, all panels will be rendered by default. You can set keepDOM={false} to only render the current panel, and there will be no animation effect at this time .
Notice
1. When tabList and TabPane Children are used at the same time, the data passed in through tabList will be rendered first. It is not recommended to configure both 2. When using TabPane Children, TabPane must be a direct child element of Tabs, otherwise Tabs will not be able to correctly collect related attributes such as itemKey and other subcomponents
import React from 'react';
import { Tabs, TabPane } from '@douyinfe/semi-ui';
class App extends React.Component {
render() {
return (
<div>
<Tabs type="line">
<TabPane tab="Document" itemKey="1">
<h3>Document</h3>
<p style={{ lineHeight: 1.8 }}>
Semi Design is a design system developed and maintained by IES Front-end Team and UED Team
</p>
<p style={{ lineHeight: 1.8 }}>
Semi Design create a consistent, good-looking, easy-to-use, and efficient user experience
with a user-centric, content-first, and human-friendly design system.
</p>
<ul>
<li>
<p>Content-first</p>
</li>
<li>
<p>Customized theming</p>
</li>
<li>
<p>Internationalized</p>
</li>
<li>
<p>Humanism</p>
</li>
</ul>
</TabPane>
<TabPane tab="Quick Start" itemKey="2">
<h3>Quick Start</h3>
<p style={{ lineHeight: 1.8 }}>
If it is a new project, it is recommended that you use Eden to initialize the project and
initialize the project type to select the React direction.
</p>
<pre
style={{
margin: '24px 0',
padding: '20px',
border: 'none',
whiteSpace: 'normal',
borderRadius: 'var(--semi-border-radius-medium)',
color: 'var(--semi-color-text-1)',
backgroundColor: 'var(--semi-color-fill-0)',
}}
>
<code>
yarn add @douyinfe/semi-ui
</code>
</pre>
</TabPane>
<TabPane tab="Help" itemKey="3">
<h3>Help</h3>
<p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-0)', fontWeight: 600 }}>
Q: Who should I look for if there are new component requirements, or existing component does
not meet my needs?
</p>
<p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-1)' }}>
{`Give feedbacks in the upper right corner, submit an Issue, describe your needs as well as
the business scenario. We'll handle these issues with priorities.`}
</p>
<p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-0)', fontWeight: 600 }}>
Q: Have questions when using components?
</p>
<p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-1)' }}>
Welcome to ask anything in our Lark customer service group.
</p>
</TabPane>
</Tabs>
</div>
);
}
}
Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user
boolean
size
Size, providing three types of large, medium, and small, >=1.11.0, currently only supports linear Tabs
string
large
style
style object
CSSProperties
None
tabBarExtraContent
Used to extend the content of the tab bar
ReactNode
None
tabList
An array of tab page objects that supports itemKey (corresponding to activeKey, tab (tab page text) and icon (tab page icon)
TabPane[]
None
tabPaneMotion
Whether to use animation to switch tabs
boolean
true
tabPosition
The position of the tab, support top (horizontal), left (vertical), >=1.0.0
boolean
top
type
The style of the label bar, optional line, card, button
string
line
onChange
Callback function when switching tab pages
function(activeKey: string)
None
onTabClick
Click event
function(key: string, e: Event)
None
onTabClose
executed when tab closed by user, >=2.1.0
function(tabKey: string)
None
TabPane
Property
Description
Type
Default Value
className
class name
string
None
disabled
Whether the tab bar is disabled
boolean
None
icon
Tab bar icon
ReactNode
None
itemKey
corresponding to activeKey
string
None
style
style object
CSSProperties
None
tab
Tab page bar display text
ReactNode
None
closable
whether user can close the tab >=2.1.0
boolean
false
Accessibility
ARIA
About role
TabBar has a role of tablist
Tab in TabBar has a role of tab
TabPane has a role of tabpanel
aria-orientation: Indicates TabBar's orientation, can be vertical or horizontal. When tabPosition is left,aria-orientation will be vertical, when tabPosition is top, aria-orientation will be horizontal.
aria-disabled: When TabPane is disabled, the related Tab's aria-disabled will be set to true.
aria-selected: Indicates whether the Tab is selected.
aria-controls: Indicates the TabPane controlled by the Tab
aria-labelledby: Indicates the element labels the TabPane
Keyboard users can use the Tab key to move the focus to the tab panel of the selected tab element
Use left and right arrows to toggle options when focus is on a tab element in a horizontal tab list
Use up and down arrows to toggle options when focus is on a tab element in a vertical tab list
When the focus is on an inactive tab element in the tab list, the Space or Enter keys can be used to activate the tab
When keyboard users want to focus directly on the last tab element in the tab list:
Mac users: fn + right arrow
Windows users: End
When keyboard users want to focus directly on the first tab element in the tab list:
Mac users: fn + left arrow
Windows users: Home
When a tab is allowed to be deleted:
Users can use Delete keys to delete tab
After deletion, the focus is transferred to the next element of the deleted tab element; if the deleted element has no subsequent element, it is transferred to the previous element
Content Guidelines
Label copy needs to explain the label content accurately and clearly
Use short, easily distinguishable labels
try to stay within one word
Design Token
FAQ
Why typography with ellipses in Tabs doesn't work?
Because when Tabs renders TabPane, the default is to render display: none. At this point these components cannot get the correct width or height values. It is recommended to enable lazyRender in version 1.x, or disable keepDOM. Version 0.x needs to use tabList notation.
Why are the height or width values wrong when using components such as Collapse/Collapsible/Resizable Table in Tabs?
The reason is the same as above. In addition, if the collapse does not need animation, you can also turn off the animation effect by setting motion={false}. There is no need to get the height of the component at this point。