# svelma-pro
横向导航选项卡

# Tabs

## 横向导航选项卡

Codesandbox
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

Codesandbox

    <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

Codesandbox

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

Codesandbox

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