https://github.com/fouita/svelte-tw-chip

Chip component built with svelte and tailwindcss, can be used as alert
https://github.com/fouita/svelte-tw-chip

chip fouita svelte tailwindcss

Last synced: about 1 month ago
JSON representation

Chip component built with svelte and tailwindcss, can be used as alert

• Host: GitHub
• URL: https://github.com/fouita/svelte-tw-chip
• Owner: fouita
• Created: 2020-09-18T12:51:13.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-09-18T12:54:13.000Z (over 4 years ago)
• Last Synced: 2025-01-19T19:56:03.357Z (3 months ago)
• Topics: chip, fouita, svelte, tailwindcss
• Language: Svelte
• Homepage:
• Size: 4.88 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Svelte and Tailwindcss Chip component

Chip and alert component built with svelte and tailwindcss

# Installation

```bash

$npm i -D @fouita/chip

```

# Usage

You can use this component as a simple chip (label) or as an alert.

![fouita chip](https://cdn.fouita.com/assets/pics/template/chip/chip-simple.jpg)

```html

	import Chip from '@fouita/chip'



	Simple chip



```


## Changing size & color

To change size you can use tailwind size scale `xs, sm, md, lg, xl`, same goes for colors `red, blue, yellow, orange, indigo, pink, purple, gray, green, teal`.

You can use `outline` to change the background with lighter color and make the text darker 

![fouita chip](https://cdn.fouita.com/assets/pics/template/chip/chip-size-color.jpg)

```html



		

		Hello! 

		Hello! 

		Hello! 

		Hello! 

	



```


## Change rounding

You can use change the rounding of the Chip component by using the `rounded` prop and tailwindcss rounded options `none, sm, md, lg, full`

![fouita chip](https://cdn.fouita.com/assets/pics/template/chip/chip-rounded.jpg)

```html



		

		Hello! 

		Hello! 

		Hello! 

		Hello! 

		Hello! 

	



```


## Closing a Chip

To close a Chip you need to pass `onDelete` prop with close method, like the follwoing. You can also choose the fade duration (in ms) when closing by adding `tr_duration={N}` , `N=200` by default

![fouita chip](https://cdn.fouita.com/assets/pics/template/chip/chip-close.jpg)

```html

	import Chip from '@fouita/chip'

	let show_chip = true

	function removeChip(){

		show_chip = false

	}



	

	{#if show_chip}	

			

            Hello! 

        

	{/if}

	



```


## Add avatar or custom icon

To add an avatar we can use `@fouita/avatar` , see more on how to use [fouita avatar](https://dev.to/haynajjar/svelte-tailwindcss-avatar-component-33g8)

![fouita chip](https://cdn.fouita.com/assets/pics/template/chip/chip-avatar.jpg)

```html

	import Avatar from '@fouita/avatar'

	import Chip from '@fouita/chip'

	import {HeartIcon} from 'svelte-feather-icons'



		

		


			

		

		Hello! 

	

	

		

		


			

		

		Hello! 

	



```


## Alerts examples

To use the chip as alerts, here is an example on how you can achieve that!

![fouita chip](https://cdn.fouita.com/assets/pics/template/chip/chip-alert.jpg)

```html

  import Chip from "@fouita/chip";

  import {

    AlertOctagonIcon,

    InfoIcon,

    CheckCircleIcon

  } from "svelte-feather-icons";

  let alerts = {

    error1: true,

    error2: true,

    info1: true,

    info2: true,

    success1: true,

    success2: true

  };

  function remove(key) {

    alerts[key] = false;

  }



  {#if alerts['error1']}

     remove('error1')}

    >

      


        

      

      There is an error in your code

    

  {/if}


  {#if alerts['error2']}

     remove('error2')}

    >

      


        

      

      There is an error in your code

    

  {/if}


  


  {#if alerts['info1']}

     remove('info1')}

    >

      


        

      

      


        This is an info message

        


          More information about the message can be found

          here

        

      

    

  {/if}


  {#if alerts['info2']}

     remove('info2')}

    >

      


        

      

      This is an info message

    

  {/if}


  


  {#if alerts['success1']}

     remove('success1')}

    >

      


        

      

      This is a success messsage

    

  {/if}


  {#if alerts['success2']}

     remove('success2')}

    >

      


        

      

      


        This is a success messsage

        


          More information about the message can be found

          here

        

      

    

  {/if}




```

## About

[Fouita : UI framework for svelte + tailwind components](https://fouita.com)