# Tabs

When there is an excessive amount of information on a page, we can use tabs to categorize the content and allow users to quickly switch between different categories or topics. This helps organize the data and makes it easier for users to find the information they need.

[Design draft](https://www.figma.com/file/ODsctn1UVctS7TCZ1MlTHZ/%E2%98%81%EF%B8%8FMQloud_Design-Guidelines?type=design&node-id=610%3A36819&t=zgbh0eslLsDxOcDP-1)


<br>

## Types


1. **Primary tab**：Use this tab style as a priority when tabs are needed on the page.
2. **Secondary tab**：Use this tab style when a second-level tab is needed. It is generally not used frequently.
3. **Step tab**：Only used in form creation, when there is an excessive amount of content in the form, use step tabs to categorize the content.

<br>

## Status


<br>

## Usage


1. Single-level tab usage example.
2. When two-level tabs are needed, place the secondary tabs above and the primary tabs below.

<br>

## Layout





1. Each tab in the tab bar has a fixed width. The width of the tabs depends on the content length, typically set to a default size of 150 dp. However, the width can be adjusted freely when the content is too long.
2. **There is no spacing between the primary tabs**.

### Tab overflow


1. When the width of the tabs exceeds the screen size, allow horizontal scrolling of the tabs and display arrows to indicate to the user that there are more tabs on the left and right.
2. When a tab is clicked, the selected tab, except for the first and last tabs, **will automatically adjust to the center of the screen**.

<br>

## Responsive layout

### Small

###### breakpoints：**For screens below 800 dp**

- The dimensions have been slightly adjusted, please refer to [Design draft](https://www.figma.com/file/ODsctn1UVctS7TCZ1MlTHZ/%E2%98%81%EF%B8%8FMQloud_Design-Guidelines?type=design&node-id=610%3A36819&t=zgbh0eslLsDxOcDP-1) for detailed values.


<br>

---

###### tags: `en / Components`