Chip Svelte Component

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

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.bgstring'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'

Chip bg color

colors.borderstring'border-black border-opacity-10 dark:border-white dark:border-opacity-10'

Chip border color

colors.textstring'text-current'

Chip text color

deleteButtonbooleanfalse

Defines whether the Chip has additional "delete" button or not

outlinebooleanfalse

Makes chip outline

onDeletefunction(e)

Event will be triggered on Chip delete button click

onClickfunction(e)

click event handler

Chip Slots

NameDescription
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>
Code licensed under MIT.
2021 © Konsta UI by nolimits4web.