Tabs

1import {
2Tabs,
3TabsList,
4TabsTrigger,
5TabsContent,
6} from "@ecos/ui";
7
8<Tabs defaultValue="account">
9  <TabsList>
10    <TabsTrigger value="account">
11      Account
12    </TabsTrigger>
13
14    <TabsTrigger value="security">
15      Security
16    </TabsTrigger>
17  </TabsList>
18
19  <TabsContent value="account">
20    Account content
21  </TabsContent>
22
23  <TabsContent value="security">
24    Security content
25  </TabsContent>
26</Tabs>

1<Tabs defaultValue="overview">
2  <TabsList>
3    <TabsTrigger value="overview">
4      Overview
5    </TabsTrigger>
6
7    <TabsTrigger value="products">
8      Products
9    </TabsTrigger>
10
11    <TabsTrigger value="pricing">
12      Pricing
13    </TabsTrigger>
14  </TabsList>
15
16  <TabsContent value="overview">
17    Overview content
18  </TabsContent>
19
20  <TabsContent value="products">
21    Products content
22  </TabsContent>
23
24  <TabsContent value="pricing">
25    Pricing content
26  </TabsContent>
27</Tabs>

1const [value, setValue] = useState("account");
2
3<Tabs
4  value={value}
5  onValueChange={setValue}
6>
7  <TabsList>
8    <TabsTrigger value="account">
9      Account
10    </TabsTrigger>
11
12    <TabsTrigger value="security">
13      Security
14    </TabsTrigger>
15  </TabsList>
16
17  <TabsContent value="account">
18    Account content
19  </TabsContent>
20
21  <TabsContent value="security">
22    Security content
23  </TabsContent>
24</Tabs>

1<Tabs defaultValue="account">
2  <TabsList>
3    <TabsTrigger value="account">
4      <User />
5      Account
6    </TabsTrigger>
7
8    <TabsTrigger value="security">
9      <Shield />
10      Security
11    </TabsTrigger>
12  </TabsList>
13
14  <TabsContent value="account">
15    Account content
16  </TabsContent>
17
18  <TabsContent value="security">
19    Security content
20  </TabsContent>
21</Tabs>

1<Tabs defaultValue="account">
2  <TabsList>
3    <TabsTrigger value="account">
4      Account
5    </TabsTrigger>
6
7    <TabsTrigger
8      value="security"
9      disabled
10    >
11      Security
12    </TabsTrigger>
13  </TabsList>
14
15  <TabsContent value="account">
16    Account content
17  </TabsContent>
18
19  <TabsContent value="security">
20    Security content
21  </TabsContent>
22</Tabs>

1<Tabs defaultValue="overview">
2  <TabsList>
3    <TabsTrigger value="overview">
4      Overview
5    </TabsTrigger>
6
7    <TabsTrigger value="products">
8      Products
9    </TabsTrigger>
10
11    <TabsTrigger value="pricing">
12      Pricing
13    </TabsTrigger>
14
15    <TabsTrigger value="support">
16      Support
17    </TabsTrigger>
18
19    <TabsTrigger value="billing">
20      Billing
21    </TabsTrigger>
22
23    <TabsTrigger value="settings">
24      Settings
25    </TabsTrigger>
26  </TabsList>
27
28  <TabsContent value="overview">
29    Overview content
30  </TabsContent>
31  <TabsContent value="products">
32    Products content
33  </TabsContent>
34  <TabsContent value="pricing">
35    Pricing content
36  </TabsContent>
37  <TabsContent value="support">
38    Support content
39  </TabsContent>
40  <TabsContent value="billing">
41    Billing content
42  </TabsContent>
43  <TabsContent value="settings">
44    Settings content
45  </TabsContent>
46</Tabs>

1<Tabs
2  orientation="vertical"
3  defaultValue="account"
4>
5  <TabsList>
6    <TabsTrigger value="account">
7      Account
8    </TabsTrigger>
9
10    <TabsTrigger value="security">
11      Security
12    </TabsTrigger>
13
14    <TabsTrigger value="notifications">
15      Notifications
16    </TabsTrigger>
17
18    <TabsTrigger value="billing">
19      Billing
20    </TabsTrigger>
21  </TabsList>
22
23  <TabsContent value="account">
24    Account content
25  </TabsContent>
26
27  <TabsContent value="security">
28    Security content
29  </TabsContent>
30
31  <TabsContent value="notifications">
32    Notifications content
33  </TabsContent>
34
35  <TabsContent value="billing">
36    Billing content
37  </TabsContent>
38</Tabs>

1<Tabs defaultValue="account">
2  <TabsList>
3    <TabsTrigger value="account">
4      Account Settings and Preferences
5    </TabsTrigger>
6
7    <TabsTrigger value="notifications">
8      Notification Preferences and Alerts
9    </TabsTrigger>
10  </TabsList>
11
12  <TabsContent value="account">
13    Content
14  </TabsContent>
15
16  <TabsContent value="notifications">
17    Content
18  </TabsContent>
19</Tabs>