Tabs

1
() => (
2
  <Tabs>
3
    <Tab label="One" key="one">
4
      one
5
    </Tab>
6
    <Tab label="Two" key="two">
7
      Two
8
    </Tab>
9
    <Tab label="Three" key="three">
10
      Three
11
    </Tab>
12
  </Tabs>
13
)

1
() => (
2
  <>
3
    <Tabs variant="line">
4
      <Tab label="One" key="one">
5
        one
6
      </Tab>
7
      <Tab label="Two" key="two">
8
        Two
9
      </Tab>
10
      <Tab label="Three" key="three">
11
        Three
12
      </Tab>
13
    </Tabs>
14

15
    <Tabs variant="outline" style={{ marginTop: '50px' }}>
16
      <Tab label="One" key="one">
17
        one
18
      </Tab>
19
      <Tab label="Two" key="two">
20
        Two
21
      </Tab>
22
      <Tab label="Three" key="three">
23
        Three
24
      </Tab>
25
    </Tabs>
26
  </>
27
)

1
() => (
2
  <>
3
    <Tabs variant="line" direction="vertical">
4
      <Tab label="One" key="one">
5
        one
6
      </Tab>
7
      <Tab label="Two" key="two">
8
        Two
9
      </Tab>
10
      <Tab label="Three" key="three">
11
        Three
12
      </Tab>
13
    </Tabs>
14

15
    <Tabs variant="outline" direction="vertical" style={{ marginTop: '50px' }}>
16
      <Tab label="One" key="one">
17
        one
18
      </Tab>
19
      <Tab label="Two" key="two">
20
        Two
21
      </Tab>
22
      <Tab label="Three" key="three">
23
        Three
24
      </Tab>
25
    </Tabs>
26
  </>
27
)

1
() => (
2
  <>
3
    <Tabs variant="line" position="center">
4
      <Tab label="One" key="one">
5
        one
6
      </Tab>
7
      <Tab label="Two" key="two">
8
        Two
9
      </Tab>
10
      <Tab label="Three" key="three">
11
        Three
12
      </Tab>
13
    </Tabs>
14

15
    <Tabs variant="outline" position="right" style={{ marginTop: '50px' }}>
16
      <Tab label="One" key="one">
17
        one
18
      </Tab>
19
      <Tab label="Two" key="two">
20
        Two
21
      </Tab>
22
      <Tab label="Three" key="three">
23
        Three
24
      </Tab>
25
    </Tabs>
26
  </>
27
)

1
() => (
2
  <Tabs grow variant="line">
3
    <Tab label="One" key="one">
4
      one
5
    </Tab>
6
    <Tab label="Two" key="two">
7
      Two
8
    </Tab>
9
    <Tab label="Three" key="three">
10
      Three
11
    </Tab>
12
  </Tabs>
13
)