<script>
import { Tabs, Tab } from 'svelma2'
</script>
<Tabs>
<Tab label="Svelte">
Is cool
</Tab>
<Tab label="Vue">
Is good
</Tab>
<Tab label="Angular">
lol no
</Tab>
</Tabs>
Icons and Sizes
<script>
import { Tabs, Tab } from 'svelma2'
</script>
<Tabs>
<Tab label="People" icon="users"></Tab>
<Tab label="Places" icon="map-marker-alt"></Tab>
<Tab label="Things" icon="ellipsis-h"></Tab>
</Tabs>
<Tabs size="is-medium">
<Tab label="People" icon="users"></Tab>
<Tab label="Places" icon="map-marker-alt"></Tab>
<Tab label="Things" icon="ellipsis-h"></Tab>
</Tabs>
<Tabs size="is-large">
<Tab label="People" icon="users"></Tab>
<Tab label="Places" icon="map-marker-alt"></Tab>
<Tab label="Things" icon="ellipsis-h"></Tab>
</Tabs>
Position
<script>
import { Tabs, Tab } from 'svelma2'
</script>
<Tabs position="is-centered">
<Tab label="People" icon="users"></Tab>
<Tab label="Places" icon="map-marker-alt"></Tab>
<Tab label="Things" icon="ellipsis-h"></Tab>
</Tabs>
<Tabs position="is-right">
<Tab label="People" icon="users"></Tab>
<Tab label="Places" icon="map-marker-alt"></Tab>
<Tab label="Things" icon="ellipsis-h"></Tab>
</Tabs>
Style
Use is-boxed, is-toggle, is-toggle and is-toggle-rounded, or is-fullwidth to alter to style of your tabs.
<script>
import { Tabs, Tab } from 'svelma2'
</script>
<Tabs style="is-boxed">
<Tab label="People" icon="users"></Tab>
<Tab label="Places" icon="map-marker-alt"></Tab>
<Tab label="Things" icon="ellipsis-h"></Tab>
</Tabs>
<Tabs style="is-toggle">
<Tab label="People" icon="users"></Tab>
<Tab label="Places" icon="map-marker-alt"></Tab>
<Tab label="Things" icon="ellipsis-h"></Tab>
</Tabs>
<Tabs style="is-toggle is-toggle-rounded">
<Tab label="People" icon="users"></Tab>
<Tab label="Places" icon="map-marker-alt"></Tab>
<Tab label="Things" icon="ellipsis-h"></Tab>
</Tabs>
<Tabs style="is-fullwidth">
<Tab label="People" icon="users"></Tab>
<Tab label="Places" icon="map-marker-alt"></Tab>
<Tab label="Things" icon="ellipsis-h"></Tab>
</Tabs>
API
Tabs
| Name | Description | Type | Values | Default |
|---|
value | Index of the active tab (zero-based), optional | Number | — | 0 |
size | Size of tabs, optional | String | is-small, is-medium, is-large | — |
position | Position of tabs list, horizontally. By default they're positioned to the left, optional | String | is-centered, is-right | — |
style | Style of tabs, optional | String | is-boxed, is-toggle, is-toggle-rounded, is-fullwidth | — |
Tab
| Name | Description | Type | Values | Default |
|---|
label | Label for tab | String | — | — |
icon | Show this icon on left-side of the tab, optional | String | — | — |
iconPack | Fontawesome icon pack to use. By default the Icon component uses fas, optional | String | fasfabetc... | — |