CapsuleTabs
Navigate between content groups.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
Navigate between content groups.
When to Use
Another style for tabs, used in lists or modules in presentational interfaces.
Demos
CapsuleTabs
Props
| Name | Description | Type | Default |
|---|---|---|---|
| activeKey | The key of the currently active tab panel | string | null | - |
| defaultActiveKey | The initialized key of the selected panel, if the activeKey is not set | string | null | the key of the 1st pannel |
| onChange | Callback when switching panel | (key: string) => void | - |
CapsuleTabs.Tab
Props
| Name | Description | Type | Default |
|---|---|---|---|
| destroyOnClose | Destroy dom when not visible | boolean | false |
| disabled | Whether to disable the tab | boolean | false |
| forceRender | Whether to render the DOM structure when hidden | boolean | false |
| key | Corresponding to activeKey | string | - |
| title | The displayed text of the tab header | ReactNode | - |
The usage of CapsuleTabs is very similar to that of Tabs, so see the documentation for Tabs for more usage guidelines.