Tabs View Source



The TabGroup component is used to allow the users to switch between views.



Imports



Import React and the TabGroup Component.


0
import * as React from "react";
1
import { TabGroup } from "slate-react-system";


Usage



Define the tab group values and labels.

0
const TAB_GROUP_TWO = [
1
  { value: "1", label: "Capricorn" },
2
  { value: "2", label: "Aquarius" },
3
];
4
5
const TAB_GROUP_THREE = [
6
  { value: "1", label: "Capricorn" },
7
  { value: "2", label: "Aquarius" },
8
  { value: "3", label: "Pisces" },
9
];

Declare the TabGroup component.

0
class ExampleOne extends React.Component {
1
  state = { exampleOne: "1" };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <TabGroup
8
        name="exampleOne"
9
        value={this.state.exampleOne}
10
        option={TAB_GROUP_TWO}
11
        onChange={this._handleChange}
12
      />
13
    );
14
  }
15
}
16
17
class ExampleTwo extends React.Component {
18
  state = { exampleTwo: "3" };
19
20
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
21
22
  render() {
23
    return (
24
      <TabGroup
25
        name="exampleTwo"
26
        value={this.state.exampleTwo}
27
        option={TAB_GROUP_THREE}
28
        onChange={this._handleChange}
29
      />
30
    );
31
  }
32
}


Output



Capricorn
Aquarius

Capricorn
Aquarius
Pisces



Accepted React Properties



Card Tabs
NameTypeDefaultDescription
onChange
function
null
Function called upon an onChange event
value
boolean
false
The value that is currently selected. Can be used to assign default values as well
options
Array
[]
An array of options, each of which has a value and a label
name
string
null
Input name
ExperiencesCreateFilecoinAddressCreateFilecoinStorageDealCreateTokenFilecoinBalancesListFilecoinDealsListFilecoinSettingsFriendsListPeersListSendAddressFilecoin

Components
Avatar GroupButtonsCard TabsCarouselCheckboxesColorsDatepickerDropdownsGlobeHover TileIconsInputsLine ChartList EditorLoadersModalsNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source