Svelma

Tag label Rounded tag label

<script>
    import { Tag } from 'svelma'
  </script>

  <Tag>Tag label</Tag>
  <Tag rounded>Rounded tag label</Tag>

Closable tags have a button that can be focused, it emits a close event when clicked or when delete key is pressed.

Closable

Colored closable tag label

Attached closable tag label

Colored attached closable tag label

<script>
    import { Tag } from 'svelma'
    
    let isTag1Active = true
    let isTag2Active = true
    let isTag3Active = true
  </script>

  <div class="field">
    {#if isTag1Active}
      <Tag  type="is-primary" 
            closable 
            on:close={e => isTag1Active = false}>
        Colored closable tag label
      </Tag>
    {/if}
  </div>

  <div class="field">
    {#if isTag2Active}
      <Tag  attached closable 
            on:close={e => isTag2Active = false}>
        Attached closable tag label
      </Tag>
    {/if}
  </div>

  <div class="field">
    {#if isTag3Active}
    <Tag  type="is-danger" 
          attached closable 
          on:close={e => isTag3Active = false}>
      Colored attached closable tag label
    </Tag>
    {/if} 
  </div>

Taglist

First Second Third Fourth Fifth

<script>
    import { Tag, Taglist } from 'svelma'
  </script>

  <Taglist>
    <Tag type='is-info'>First</Tag>
    <Tag type='is-info'>Second</Tag>
    <Tag type='is-info'>Third</Tag>
    <Tag type='is-info'>Fourth</Tag>
    <Tag type='is-info'>Fifth</Tag> 
  </Taglist>

Use the attached prop to attach tags together.

npm 0.2.1

<script>
    import { Tag, Taglist } from 'svelma'
  </script>

  <Taglist attached>
    <Tag type='is-dark'>npm</Tag>
    <Tag type='is-info'>0.2.1</Tag>
  </Taglist>

API

Tag

Name	Description	Type	Values	Default
`type`	Type (color) of the icon	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger`, `and any other colors you've set in the $colors list on Sass`	—
`size`	Size of the tab	String	`is-medium`, `is-large`	—
`rounded`	Tag border rounded, optional	Boolean	—	`false`
`closable`	Add close/delete button to the tag, optional	Boolean	—	`false`
`attached`	Close/delete button style equal to attached tags, optional	Boolean	—	`false`
`ellipsis`	Adds ellipsis to not overflow the text, optional	Boolean	—	`false`
`tabstop`	If should stop when using tab key, optional	Boolean	—	`true`
`disabled`	Disable delete button, optional	Boolean	—	`false`

Taglist

Name	Description	Type	Values	Default
`attached`	Tags inside are attached together, optional	Boolean	—	`false`