lomer-ui

Component

Tabs

Switch between views with ease.

Installation

Usage

Preview

Svelte Code

1 
<script>
2 
  import TabsItem from '$lib/components/base/tabs-item.svelte';
3 
  import Tabs from '$lib/components/base/tabs.svelte';
4
5 
  let active = $state('home');
6 
</script>
7
8 
<Tabs>
9 
  <TabsItem bind:active value="home">Home</TabsItem>
10 
  <TabsItem bind:active value="about">About</TabsItem>
11 
  <TabsItem bind:active value="service">Service</TabsItem>
12 
  <TabsItem disabled>Disabled</TabsItem>
13 
  <TabsItem bind:active value="settings">Settings</TabsItem>
14 
  <TabsItem bind:active value="monitoring">Monitoring</TabsItem>
15 
  <TabsItem bind:active value="profile">Profile</TabsItem>
16 
  <TabsItem bind:active value="dashboard">Dashboard</TabsItem>
17 
  <TabsItem bind:active value="gis">GIS</TabsItem>
18 
  <TabsItem bind:active value="ai">AI</TabsItem>
19 
  <TabsItem bind:active value="map">Map</TabsItem>
20 
  <TabsItem bind:active value="time">Real-time</TabsItem>
21 
</Tabs>
22

Content

Get the component

npx lomer-ui get tabs-content
Source code

Preview

Home

Svelte Code

1 
<script>
2 
  import TabsContent from '$lib/components/base/tabs-content.svelte';
3 
  import TabsItem from '$lib/components/base/tabs-item.svelte';
4 
  import Tabs from '$lib/components/base/tabs.svelte';
5
6 
  let active = $state('home');
7 
</script>
8
9 
<Tabs>
10 
  <TabsItem bind:active value="home">Home</TabsItem>
11 
  <TabsItem bind:active value="about">About</TabsItem>
12 
  <TabsItem bind:active value="service">Service</TabsItem>
13 
  <TabsItem disabled>Disabled</TabsItem>
14 
</Tabs>
15 
<TabsContent {active} value="home">Home</TabsContent>
16 
<TabsContent {active} value="about">About</TabsContent>
17 
<TabsContent {active} value="service">Service</TabsContent>
18