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>

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. active prop is bindable, bound to the active tab index. In cases where bind:active cannot be used or to execute any code after the active tab is changed, on:change event can be listened to. setActive(index) function is also exposed to change the active tab and can be called on the component reference.

Total tabs: 3

Active Tab Index: 0

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

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

  const addTab = () => tabs = [...tabs, "Tab " + (tabs.length + 1)]
  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 bind:active style="is-fullwidth">
    {#each tabs as tab, i}
      <Tab label={tab}>
        <Button type="is-danger" on:click={() => removeTab(i)}>Remove {tab}</Button>
      </Tab>
    {/each}
  </Tabs>
</script>

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	`fas`, `fab`, `etc...`	—