Tabs

Components

Tabs

Events: tabChanged

Functions: open

$$props: class

Tab

Attributes: active disabled

$$props: class

TabContent

Attributes: lazy loadOnce

$$props: class

Internal css classes

Tab

nav-link, disabled, active

TabContent

active

Default Tabs

The default Tab Component loads all Content. Disabled Tabs won't be activated, but their content will be loaded regardless.

Content 1
Content 2
Content 3
Content 4

Content 1

Content 2

Content 3

Content 4


<Tabs>
	<ul>
		<Tab>Content 1</Tab>
		<Tab>Content 2</Tab>
		<Tab>Content 3</Tab>
		<Tab disabled>Content 4</Tab>
	</ul>
	<TabContent>
		<div>Content 1</div>
		<Counter />
	</TabContent>
	<TabContent>
		...
	</TabContent>
	...
</Tabs>

It's also possible to preselect the active Tab.

Content 1
Content 2
Content 3
Content 4

Content 1

Content 2

Content 3

Content 4


<Tabs>
	<ul>
		<Tab>Content 1</Tab>
		<Tab active>Content 2</Tab>
		...
	</ul>
	<TabContent>
		<div>Content 1</div>
		<Counter />
	</TabContent>
	<TabContent>
		...
	</TabContent>
	...
</Tabs>

If you preselected a disabled Tab, it won't be activated.

Content 1
Content 2
Content 3
Content 4

Content 1

Content 2

Content 3

Content 4


<Tabs>
	<ul>
		...
		<Tab>Content 3</Tab>
		<Tab active disabled>Content 4</Tab>
	</ul>
	...
	<TabContent>
		...
	</TabContent>
	<TabContent>
		...
	</TabContent>
</Tabs>

Lazy loading and persistent content

Under certain circumstances you only want to load your content, once your user selected the respective tab. To enable lazyload, add the lazy attribute to TabContent.

Keep in mind the content will be loaded every time the tab is activated. To only load it once, add loadOnce.

Regular

Lazy Content 1
Lazy Content 2
Lazy Content 3
Content 4
Content 5

Preselected

Lazy Content 1
Lazy Content 2
Lazy Content 3
Content 4
Content 5

Lazy Content 3 (Persistent)


<Tabs>
	<ul>
		...
	</ul>
	<TabContent lazy>
		..
	</TabContent>
	<TabContent lazy>
		..
	</TabContent>
	<TabContent lazy loadOnce>
		..
	</TabContent>
	...
</Tabs>

Nested Tabs

If neccessary, Tabs can be nested.

Content 1
Lazy Content 2
Lazy Content 3 (Persistend)
Content 4

Content 1
Lazy Content 2
Lazy Content 3 (Persistend)
Content 4

Content 1


<Tabs>
	<ul>
		<Tab>Lazy Content 1</Tab>
		...
	</ul>
	<TabContent>
		<Tabs>
			...
		</Tabs>
	</TabContent>
	...
</Tabs>

Using Controlable Buttons

If desired you can use the open() function to switch between tabs. The number indicates which Tab will be opened.

Content 1
Lazy Content 2
Lazy Content 3 (Persistend)
Content 4

Content 1


let tabs
...
<Tabs bind:this={tabs}>
	<ul>
		...
	</ul>
	<TabContent>
		<button on:click={tabs.open(2)}>Open 2</button>
	</TabContent>
	...
</Tabs>