svelma-pro

Is cool

Is good

lol no

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

Name	Parameters	Description
`activeTabChanged`	序号	切换事件

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...`	—