Chip Svelte Component

Chip Props
Chip Slots
Examples

Chips (Tags) Svelte component represent complex entities in small blocks, such as a contact. They can contain a photo, short title string, and brief information

Chip Components

There are following components included:

Chip

Chip Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.bg	string	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'	Chip bg color
colors.border	string	'border-black border-opacity-10 dark:border-white dark:border-opacity-10'	Chip border color
colors.text	string	'text-current'	Chip text color
deleteButton	boolean	false	Defines whether the Chip has additional "delete" button or not
outline	boolean	false	Makes chip outline
onDelete	function(e)		Event will be triggered on Chip delete button click
onClick	function(e)		`click` event handler

Chip Slots

Name	Description
media	Content of the chip media area (e.g. icon)

Examples

Chips.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Chip,
    Block,
    BlockTitle,
  } from 'konsta/svelte';

</script>

<Page>
  <Navbar title="Chips" />

  <BlockTitle>Chips With Text</BlockTitle>
  <Block strong>
    <Chip class="m-0.5">Example Chip</Chip>
    <Chip class="m-0.5">Another Chip</Chip>
    <Chip class="m-0.5">One More Chip</Chip>
    <Chip class="m-0.5">Fourth Chip</Chip>
    <Chip class="m-0.5">Last One</Chip>
  </Block>

  <BlockTitle>Outline Chips</BlockTitle>
  <Block strong>
    <Chip outline class="m-0.5">Example Chip</Chip>
    <Chip outline class="m-0.5">Another Chip</Chip>
    <Chip outline class="m-0.5">One More Chip</Chip>
    <Chip outline class="m-0.5">Fourth Chip</Chip>
    <Chip outline class="m-0.5">Last One</Chip>
  </Block>

  <BlockTitle>Contact Chips</BlockTitle>
  <Block strong>
    <Chip class="m-0.5">
      <img
        slot="media"
        alt="avatar"
        class="h-7 rounded-full"
        src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"
      />
      Jane Doe
    </Chip>
    <Chip class="m-0.5">
      <img
        slot="media"
        alt="avatar"
        class="h-7 rounded-full"
        src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"
      />
      John Doe
    </Chip>
    <Chip class="m-0.5">
      <img
        slot="media"
        alt="avatar"
        class="h-7 rounded-full"
        src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
      />
      Adam Smith
    </Chip>
  </Block>

  <BlockTitle>Deletable Chips / Tags</BlockTitle>
  <Block strong>
    <Chip
      class="m-0.5"
      deleteButton
      onDelete={() => console.log('Delete Chip')}
    >
      Example Chip
    </Chip>
    <Chip
      class="m-0.5"
      deleteButton
      onDelete={() => console.log('Delete Chip')}
    >
      <img
        slot="media"
        alt="avatar"
        class="h-7 rounded-full"
        src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
      />
      Adam Smith
    </Chip>
  </Block>
  <BlockTitle class=" bg-b bg-b">Color Chips</BlockTitle>
  <Block strong>
    <Chip class="m-0.5" colors={{ bg: 'bg-red-500', text: 'text-white' }}>
      Red Chip
    </Chip>
    <Chip class="m-0.5" colors={{ bg: 'bg-green-500', text: 'text-white' }}>
      Green Chip
    </Chip>
    <Chip class="m-0.5" colors={{ bg: 'bg-blue-500', text: 'text-white' }}>
      Blue Chip
    </Chip>
    <Chip class="m-0.5" colors={{ bg: 'bg-yellow-500', text: 'text-white' }}>
      Yellow Chip
    </Chip>
    <Chip class="m-0.5" colors={{ bg: 'bg-pink-500', text: 'text-white' }}>
      Pink Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{ border: 'border-red-500', text: 'text-red-500' }}
    >
      Red Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{ border: 'border-green-500', text: 'text-green-500' }}
    >
      Green Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{ border: 'border-blue-500', text: 'text-blue-500' }}
    >
      Blue Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{ border: 'border-yellow-500', text: 'text-yellow-500' }}
    >
      Yellow Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{ border: 'border-pink-500', text: 'text-pink-500' }}
    >
      Pink Chip
    </Chip>
  </Block>
</Page>