Tabs

import { Tabs } from "mates-ui";

Tabs({
  tabs: [{ id: "a", label: "Tab A" }],
  activeId: "a",
  onChange: () => {},
});

Line (default)

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

›

⌄

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { Tabs } from 'mates-ui';

import { BlockIcon, HomeIcon, InfoIcon, SettingsIcon, TimelineIcon } from 'mates-icons';

const TABS = [

{ id: "overview", label: "Overview", icon: HomeIcon() },

{ id: "details", label: "Details", icon: InfoIcon() },

{ id: "activity", label: "Activity", icon: TimelineIcon(), badge: 12 },

{ id: "settings", label: "Settings", icon: SettingsIcon() },

{ id: "disabled", label: "Disabled", icon: BlockIcon(), disabled: true },

];

const PANELS = [

{ id: "overview", content: html`<p style="color:var(--md-color-text-muted)">Overview panel content.</p>` },

{ id: "details", content: html`<p style="color:var(--md-color-text-muted)">Detailed information.</p>` },

{ id: "activity", content: html`<p style="color:var(--md-color-text-muted)">Recent activity — 12 unread events.</p>` },

{ id: "settings", content: html`<p style="color:var(--md-color-text-muted)">Configuration options.</p>` },

{ id: "disabled", content: html`` },

];

const App = () => {

const active = atom("overview");

return () => html`

<div style="width:100%;max-width:36rem;">

${Tabs({ tabs: TABS, activeId: active(), variant: "line", onChange: (id) => active.set(id), panels: PANELS })}

</div>

`;

};

renderApp(App, document.getElementById('app'));

Filled

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

›

⌄

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { Tabs } from 'mates-ui';

import { BlockIcon, HomeIcon, InfoIcon, SettingsIcon, TimelineIcon } from 'mates-icons';

const TABS = [

{ id: "overview", label: "Overview", icon: HomeIcon() },

{ id: "details", label: "Details", icon: InfoIcon() },

{ id: "activity", label: "Activity", icon: TimelineIcon(), badge: 12 },

{ id: "settings", label: "Settings", icon: SettingsIcon() },

{ id: "disabled", label: "Disabled", icon: BlockIcon(), disabled: true },

];

const PANELS = [

{ id: "overview", content: html`<p style="color:var(--md-color-text-muted)">Overview panel content.</p>` },

{ id: "details", content: html`<p style="color:var(--md-color-text-muted)">Detailed information.</p>` },

{ id: "activity", content: html`<p style="color:var(--md-color-text-muted)">Recent activity feed.</p>` },

{ id: "settings", content: html`<p style="color:var(--md-color-text-muted)">Configuration options.</p>` },

{ id: "disabled", content: html`` },

];

const App = () => {

const active = atom("details");

return () => html`

<div style="width:100%;max-width:36rem;">

${Tabs({ tabs: TABS, activeId: active(), variant: "filled", onChange: (id) => active.set(id), panels: PANELS })}

</div>

`;

};

renderApp(App, document.getElementById('app'));

Pill

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

›

⌄

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { Tabs } from 'mates-ui';

import { BlockIcon, HomeIcon, InfoIcon, SettingsIcon, TimelineIcon } from 'mates-icons';

const TABS = [

{ id: "overview", label: "Overview", icon: HomeIcon() },

{ id: "details", label: "Details", icon: InfoIcon() },

{ id: "activity", label: "Activity", icon: TimelineIcon(), badge: 12 },

{ id: "settings", label: "Settings", icon: SettingsIcon() },

{ id: "disabled", label: "Disabled", icon: BlockIcon(), disabled: true },

];

const PANELS = [

{ id: "overview", content: html`<p style="color:var(--md-color-text-muted)">Overview panel content.</p>` },

{ id: "details", content: html`<p style="color:var(--md-color-text-muted)">Detailed information.</p>` },

{ id: "activity", content: html`<p style="color:var(--md-color-text-muted)">Recent activity feed.</p>` },

{ id: "settings", content: html`<p style="color:var(--md-color-text-muted)">Configuration options.</p>` },

{ id: "disabled", content: html`` },

];

const App = () => {

const active = atom("overview");

return () => html`

<div style="width:100%;max-width:36rem;">

${Tabs({ tabs: TABS, activeId: active(), variant: "pill", onChange: (id) => active.set(id), panels: PANELS })}

</div>

`;

};

renderApp(App, document.getElementById('app'));

Sizes — sm / md / lg

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

›

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { Tabs } from 'mates-ui';

import { BlockIcon, HomeIcon, InfoIcon, SettingsIcon, TimelineIcon } from 'mates-icons';

const TABS = [

{ id: "overview", label: "Overview", icon: HomeIcon() },

{ id: "details", label: "Details", icon: InfoIcon() },

{ id: "activity", label: "Activity", icon: TimelineIcon() },

{ id: "settings", label: "Settings", icon: SettingsIcon() },

{ id: "disabled", label: "Disabled", icon: BlockIcon(), disabled: true },

];

const App = () => {

const sm = atom("overview");

const lg = atom("overview");

return () => html`

<x-col gap="var(--md-space-5)" style="width:100%;max-width:36rem;">

${Tabs({ tabs: TABS, activeId: sm(), size: "sm", variant: "line", onChange: (id) => sm.set(id) })}

${Tabs({ tabs: TABS, activeId: lg(), size: "lg", variant: "pill", onChange: (id) => lg.set(id) })}

</x-col>

`;

};

renderApp(App, document.getElementById('app'));

MD3 Ripple (enableRipple)

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

›

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { Tabs } from 'mates-ui';

import { BlockIcon, HomeIcon, InfoIcon, SettingsIcon, TimelineIcon } from 'mates-icons';

const TABS = [

{ id: "overview", label: "Overview", icon: HomeIcon() },

{ id: "details", label: "Details", icon: InfoIcon() },

{ id: "activity", label: "Activity", icon: TimelineIcon() },

{ id: "settings", label: "Settings", icon: SettingsIcon() },

{ id: "disabled", label: "Disabled", icon: BlockIcon(), disabled: true },

];

const App = () => {

const line = atom("overview");

const pill = atom("overview");

return () => html`

<x-col gap="var(--md-space-5)" style="width:100%;max-width:36rem;">

${Tabs({ tabs: TABS, activeId: line(), variant: "line", enableRipple: true, onChange: (id) => line.set(id) })}

${Tabs({ tabs: TABS, activeId: pill(), variant: "pill", enableRipple: true, onChange: (id) => pill.set(id) })}

</x-col>

`;

};

renderApp(App, document.getElementById('app'));

---

OverflowingTabs — line variant (resize window to collapse)

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

›

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { OverflowingTabs } from 'mates-ui';

import { AnalyticsIcon, BarChartIcon, CreditCardIcon, DashboardIcon, DescriptionIcon, ExtensionIcon, GroupIcon, HelpIcon, ReceiptLongIcon, SettingsIcon, ShieldIcon } from 'mates-icons';

const TABS = [

{ id: "dashboard", label: "Dashboard", icon: DashboardIcon() },

{ id: "analytics", label: "Analytics", icon: AnalyticsIcon() },

{ id: "reports", label: "Reports", icon: DescriptionIcon(), badge: 3 },

{ id: "users", label: "Users", icon: GroupIcon() },

{ id: "settings", label: "Settings", icon: SettingsIcon() },

{ id: "billing", label: "Billing", icon: CreditCardIcon() },

{ id: "integrations", label: "Integrations", icon: ExtensionIcon() },

{ id: "security", label: "Security", icon: ShieldIcon() },

{ id: "logs", label: "Logs", icon: ReceiptLongIcon() },

{ id: "help", label: "Help", icon: HelpIcon() },

];

const App = () => {

const active = atom("dashboard");

return () => html`

<div style="width:100%;max-width:40rem;">

${OverflowingTabs({ tabs: TABS, activeId: active(), variant: "line", onChange: (id) => active.set(id), moreLabel: "More" })}

</div>

`;

};

renderApp(App, document.getElementById('app'));

OverflowingTabs — filled variant

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

›

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { OverflowingTabs } from 'mates-ui';

import { AnalyticsIcon, BarChartIcon, CreditCardIcon, DashboardIcon, DescriptionIcon, ExtensionIcon, GroupIcon, HelpIcon, ReceiptLongIcon, SettingsIcon, ShieldIcon } from 'mates-icons';

const TABS = [

{ id: "dashboard", label: "Dashboard", icon: DashboardIcon() },

{ id: "analytics", label: "Analytics", icon: AnalyticsIcon() },

{ id: "reports", label: "Reports", icon: DescriptionIcon(), badge: 3 },

{ id: "users", label: "Users", icon: GroupIcon() },

{ id: "settings", label: "Settings", icon: SettingsIcon() },

{ id: "billing", label: "Billing", icon: CreditCardIcon() },

{ id: "integrations", label: "Integrations", icon: ExtensionIcon() },

{ id: "security", label: "Security", icon: ShieldIcon() },

{ id: "logs", label: "Logs", icon: ReceiptLongIcon() },

{ id: "help", label: "Help", icon: HelpIcon() },

];

const App = () => {

const active = atom("dashboard");

return () => html`

<div style="width:100%;max-width:40rem;">

${OverflowingTabs({ tabs: TABS, activeId: active(), variant: "filled", onChange: (id) => active.set(id), moreLabel: "More" })}

</div>

`;

};

renderApp(App, document.getElementById('app'));

OverflowingTabs — constrained to 380 px (always overflows)

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

›

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { OverflowingTabs } from 'mates-ui';

import { AnalyticsIcon, BarChartIcon, CreditCardIcon, DashboardIcon, DescriptionIcon, ExtensionIcon, GroupIcon, HelpIcon, ReceiptLongIcon, SettingsIcon, ShieldIcon } from 'mates-icons';

const TABS = [

{ id: "dashboard", label: "Dashboard", icon: DashboardIcon() },

{ id: "analytics", label: "Analytics", icon: AnalyticsIcon() },

{ id: "reports", label: "Reports", icon: DescriptionIcon(), badge: 3 },

{ id: "users", label: "Users", icon: GroupIcon() },

{ id: "settings", label: "Settings", icon: SettingsIcon() },

{ id: "billing", label: "Billing", icon: CreditCardIcon() },

{ id: "integrations", label: "Integrations", icon: ExtensionIcon() },

{ id: "security", label: "Security", icon: ShieldIcon() },

{ id: "logs", label: "Logs", icon: ReceiptLongIcon() },

{ id: "help", label: "Help", icon: HelpIcon() },

];

const App = () => {

const active = atom("dashboard");

return () => html`

<div style="max-width:380px;width:100%;">

${OverflowingTabs({ tabs: TABS, activeId: active(), variant: "line", onChange: (id) => active.set(id), moreLabel: "More tabs" })}

</div>

`;

};

renderApp(App, document.getElementById('app'));

OverflowingTabs — MD3 Ripple

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

›

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { OverflowingTabs } from 'mates-ui';

import { AnalyticsIcon, BarChartIcon, CreditCardIcon, DashboardIcon, DescriptionIcon, ExtensionIcon, GroupIcon, HelpIcon, ReceiptLongIcon, SettingsIcon, ShieldIcon } from 'mates-icons';

const TABS = [

{ id: "dashboard", label: "Dashboard", icon: DashboardIcon() },

{ id: "analytics", label: "Analytics", icon: AnalyticsIcon() },

{ id: "reports", label: "Reports", icon: DescriptionIcon(), badge: 3 },

{ id: "users", label: "Users", icon: GroupIcon() },

{ id: "settings", label: "Settings", icon: SettingsIcon() },

{ id: "billing", label: "Billing", icon: CreditCardIcon() },

{ id: "integrations", label: "Integrations", icon: ExtensionIcon() },

{ id: "security", label: "Security", icon: ShieldIcon() },

{ id: "logs", label: "Logs", icon: ReceiptLongIcon() },

{ id: "help", label: "Help", icon: HelpIcon() },

];

const App = () => {

const active = atom("dashboard");

return () => html`

<div style="width:100%;max-width:40rem;">

${OverflowingTabs({ tabs: TABS, activeId: active(), variant: "line", enableRipple: true, onChange: (id) => active.set(id), moreLabel: "More" })}

</div>

`;

};

renderApp(App, document.getElementById('app'));