Tabs
Tabs for switching content.
TabsBosons
Id
required
Id for tabs (important for mobile select)
type:
stringType
required
Type of tabs.
type:
stringvalues:
tabs, pill, fullItems
required
List of tabs.
type:
[]atoms.TabBosonsActive
required
Id of active tab.
type:
stringdefault:
falseWithIcon
If list is with icons.
type:
booldefault:
falseWithBadge
If list is with badges.
type:
booldefault:
falseExamples
Basic tabs
This is the example content for Linkedin.
This is the example content for Facebook.
This is the example content for Github.
1// Default tabs
2
3@molecules.Tabs(&molecules.TabsBosons{
4 Active: "linkedin",
5 Type: "tab",
6 Items: []atoms.TabBosons{
7 {
8 Id: "linkedin",
9 Title: "Linkedin",
10 },
11 {
12 Id: "facebook",
13 Title: "Facebook",
14 },
15 {
16 Id: "github",
17 Title: "Github",
18 },
19 },
20}) {
21 @molecules.TabsPanel("linkedin") {
22 <p class="py-4">This is the example content for Linkedin.</p>
23 }
24 @molecules.TabsPanel("facebook") {
25 <p class="py-4">This is the example content for Facebook.</p>
26 }
27 @molecules.TabsPanel("github") {
28 <p class="py-4">This is the example content for Github.</p>
29 }
30}Basic tabs with icons
This is the example content for Linkedin.
This is the example content for Facebook.
This is the example content for Github.
1// Tabs with icons
2
3@molecules.Tabs(&molecules.TabsBosons{
4 Active: "linkedin",
5 Type: "tab",
6 WithIcon: true,
7 Items: []atoms.TabBosons{
8 {
9 Id: "linkedin",
10 Title: "Linkedin",
11 Icon: icons.IconLinkedin(),
12 },
13 {
14 Id: "facebook",
15 Title: "Facebook",
16 Icon: icons.IconFacebook(),
17 },
18 {
19 Id: "github",
20 Title: "Github",
21 Icon: icons.IconGithub(),
22 },
23 },
24}) {
25 ... place for TabsPanel-s
26}Tabs with badges
This is the example content for Linkedin.
This is the example content for Facebook.
This is the example content for Github.
1// Tabs with badges
2
3@molecules.Tabs(&molecules.TabsBosons{
4 Active: "linkedin",
5 Type: "tab",
6 WithBadge: true,
7 Items: []atoms.TabBosons{
8 {
9 Id: "linkedin",
10 Title: "Linkedin",
11 Badge: "10",
12 },
13 {
14 Id: "facebook",
15 Title: "Facebook",
16 Badge: "12",
17 },
18 {
19 Id: "github",
20 Title: "Github",
21 Badge: "992",
22 },
23 },
24}) {
25 ... place for TabsPanel-s
26}Full width tabs
This is the example content for Linkedin.
This is the example content for Facebook.
This is the example content for Github.
1// Tabs with full width
2
3@molecules.Tabs(&molecules.TabsBosons{
4 Active: "linkedin",
5 Type: "full",
6 Items: []atoms.TabBosons{ ...items },
7}) {
8 ... place for TabsPanel-s
9}Pills tabs
This is the example content for Linkedin.
This is the example content for Facebook.
This is the example content for Github.
1// Tabs in pills wariant
2
3@molecules.Tabs(&molecules.TabsBosons{
4 Active: "linkedin",
5 Type: "pill",
6 Items: []atoms.TabBosons{ ...items },
7}) {
8 ... place for TabsPanel-s
9}TabsPanel
Tabs component is using internal component for adding content foe each Tab.
1// TabsPanel with argument - id of tab
2
3@molecules.TabsPanel("github") {
4 <p class="py-4">This is the example content for Github.</p>
5}