Svelma

Is Cool

Is Good

Lol no

<script>
  import { Tabs, Tab } from 'svelma'
</script>

<Tabs>
  <Tab label="Svelte">
    Is cool
  </Tab>
  <Tab label="Vue">
    Is good
  </Tab>
  <Tab label="Angular">
    lol no
  </Tab>
</Tabs>

Active and Events

Use active on the tab which should be active initially. Use on:change on Tabs to listen to tab changes.

Change a tab to see the event in action

<script>
  import { Tabs, Tab } from 'svelma'
  let tabChangedTo
</script>

<Tabs on:change={(e) => tabChangedTo = e.detail.label + " (Index " + e.detail.index + ")"}>
  <Tab label="People" icon="users"></Tab>
  <Tab label="Places" icon="map-marker-alt" active></Tab>
  <Tab label="Things" icon="ellipsis-h"></Tab>
</Tabs>

{#if tabChangedTo}
  Tab Changed to: {tabChangedTo}
{:else}
  Change a tab to see the event in action
{/if}

Icons and Sizes

<script>
  import { Tabs, Tab } from 'svelma'
</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 'svelma'
</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 'svelma'
</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>

Dynamic Tabs

Tabs can be be added and removed dynamically. Make sure to specify a key for each tab when using each blocks. If you don't specify a key, by default, elements will be added/remove at the end of the block, and often, that might not be what you want.

Total tabs: 3

Active Tab Index: 0

<script>
  import { Tabs, Tab, Select, Button } from 'svelma'

  let tabs = ["Tab 1", "Tab 2", "Tab 3"]
  let active = 0
  let counter = tabs.length

  const addTab = () => tabs = [...tabs, "Tab " + ++counter]
  const removeTab = (index) => tabs = tabs.filter((t, i) => i !== index)
</script>

<div class="mb-5">
  <div class="is-flex is-align-items-center p-2"> 
    <div class="mr-3">Total tabs: {tabs.length}</div>
    <Button type="is-success" on:click={addTab}>Add Tab</Button>
  </div>
  <div class="is-flex is-align-items-center p-2">
    <div class="mr-3">Active Tab Index: {active}</div>
    <Select placeholder="Change Tab" bind:selected={active}>
      {#each tabs as tab, i}
        <option value={i}>{tab}</option>
      {/each}
    </Select>
  </div>
</div>
<Tabs style="is-fullwidth" on:change={(e) => active = e.detail.index}>
  {#each tabs as tab, i (tab)}
    <Tab label={tab} active={active === i}>
      <Button type="is-danger" on:click={() => removeTab(i)}>Remove {tab}</Button>
    </Tab>
  {/each}
</Tabs>

API

Tabs

Name	Description	Type	Values	Default
`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`	Icon to be shown on the left-side of the tab, optional	String	—	—
`iconPack`	Fontawesome icon pack to use. By default the `Icon` component uses `fas`, optional	String	`fas`, `fab`, `etc...`	—
`active`	Set this tab as active	Boolean	`true`, `false`	`false`