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
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) |
|
Name | Description |
---|---|
media | Content of the chip media area (e.g. icon) |
<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"><imgslot="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"><imgslot="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"><imgslot="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><Chipclass="m-0.5"deleteButtononDelete={() => console.log('Delete Chip')}>Example Chip</Chip><Chipclass="m-0.5"deleteButtononDelete={() => console.log('Delete Chip')}><imgslot="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><Chipclass="m-0.5"outlinecolors={{ border: 'border-red-500', text: 'text-red-500' }}>Red Chip</Chip><Chipclass="m-0.5"outlinecolors={{ border: 'border-green-500', text: 'text-green-500' }}>Green Chip</Chip><Chipclass="m-0.5"outlinecolors={{ border: 'border-blue-500', text: 'text-blue-500' }}>Blue Chip</Chip><Chipclass="m-0.5"outlinecolors={{ border: 'border-yellow-500', text: 'text-yellow-500' }}>Yellow Chip</Chip><Chipclass="m-0.5"outlinecolors={{ border: 'border-pink-500', text: 'text-pink-500' }}>Pink Chip</Chip></Block></Page>