Chips (Tags) React 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 |
component | string | 'div' | Component's HTML Element |
deleteButton | boolean | false | Defines whether the Chip has additional "delete" button or not |
media | ReactNode | Content of the chip media area (e.g. icon) | |
outline | boolean | false | Makes chip outline |
onDelete | function(e) | Event will be triggered on Chip delete button click |
import React from 'react';import {Page,Navbar,NavbarBackLink,Chip,Block,BlockTitle,} from 'konsta/react';export default function ChipsPage() {return (<Page><Navbartitle="Chips"/><BlockTitle>Chips With Text</BlockTitle><Block strong><Chip className="m-0.5">Example Chip</Chip><Chip className="m-0.5">Another Chip</Chip><Chip className="m-0.5">One More Chip</Chip><Chip className="m-0.5">Fourth Chip</Chip><Chip className="m-0.5">Last One</Chip></Block><BlockTitle>Outline Chips</BlockTitle><Block strong><Chip outline className="m-0.5">Example Chip</Chip><Chip outline className="m-0.5">Another Chip</Chip><Chip outline className="m-0.5">One More Chip</Chip><Chip outline className="m-0.5">Fourth Chip</Chip><Chip outline className="m-0.5">Last One</Chip></Block><BlockTitle>Contact Chips</BlockTitle><Block strong><ChipclassName="m-0.5"media={<imgalt="avatar"className="h-7 rounded-full"src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"/>}>Jane Doe</Chip><ChipclassName="m-0.5"media={<imgalt="avatar"className="h-7 rounded-full"src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"/>}>John Doe</Chip><ChipclassName="m-0.5"media={<imgalt="avatar"className="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><ChipclassName="m-0.5"deleteButtononDelete={() => console.log('Delete Chip')}>Example Chip</Chip><ChipclassName="m-0.5"deleteButtononDelete={() => console.log('Delete Chip')}media={<imgalt="avatar"className="h-7 rounded-full"src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"/>}>Adam Smith</Chip></Block><BlockTitle className=" bg-b bg-b">Color Chips</BlockTitle><Block strong><ChipclassName="m-0.5"colors={{ bg: 'bg-red-500', text: 'text-white' }}>Red Chip</Chip><ChipclassName="m-0.5"colors={{ bg: 'bg-green-500', text: 'text-white' }}>Green Chip</Chip><ChipclassName="m-0.5"colors={{ bg: 'bg-blue-500', text: 'text-white' }}>Blue Chip</Chip><ChipclassName="m-0.5"colors={{ bg: 'bg-yellow-500', text: 'text-white' }}>Yellow Chip</Chip><ChipclassName="m-0.5"colors={{ bg: 'bg-pink-500', text: 'text-white' }}>Pink Chip</Chip><ChipclassName="m-0.5"outlinecolors={{ border: 'border-red-500', text: 'text-red-500' }}>Red Chip</Chip><ChipclassName="m-0.5"outlinecolors={{ border: 'border-green-500', text: 'text-green-500' }}>Green Chip</Chip><ChipclassName="m-0.5"outlinecolors={{ border: 'border-blue-500', text: 'text-blue-500' }}>Blue Chip</Chip><ChipclassName="m-0.5"outlinecolors={{ border: 'border-yellow-500', text: 'text-yellow-500' }}>Yellow Chip</Chip><ChipclassName="m-0.5"outlinecolors={{ border: 'border-pink-500', text: 'text-pink-500' }}>Pink Chip</Chip></Block></Page>);}