Tabs

Use the <Tabs /> component to display content within different tabs.

Example

To display tabs, provide the <Tabs> component with child <TabItem /> components:

<Tabs>
  <TabItem label="First Tab" value="first">👋 This is the content for the first tab.</TabItem>
  <TabItem label="Second Tab" value="second">...and this is the content for the second tab!</TabItem>
</Tabs>

Tabs Props

TabItem Props

Synchronizing Tabs

To synchronize the tabs across documentation, provide a unique groupId prop. Any tabs displayed across the documentation with this groupId will be synchronized. This state also persists across page reloads.

This is useful if you display content within tabs in multiple places with the same headings (e.g. examples of code snippets in different languages). If the user chooses a language, they don't have to keep selecting it everywhere.

<Tabs
  groupId="language"
>

Example

The below examples shows how to perform a network request to our API.

First, import the package:

npm i --save axios

import axios from 'axios';

flutter pub add dio

import 'package:dio/dio.dart';

Next, perform a network request to 'https://example.com':

const response = await axios.get('https://example.com');
console.log(response.data);

var dio = Dio();
final response = await dio.get('https://example.com');
print(response.data);