vue3-simple-chip

Vue3 simple chip is a simple component for vue 3 written in typescript and without dependencies.

Installation:

npm i -S vue3-simple-chip

Props:

Name	Description	Type	Required	Default
label	Label on the chip.	string	false	''
primary-color	The primary color is used for the background and border.	string	false	#e0e0e0
secondary-color	The secondary color is used for the label.	string	false	#000
dot-color	A colored round dot is displayed if you pass the color. The sizes are 6 x 6 px.	string or null	false	null
outlined	Changes the primary and secondary colors in places.	boolean	false	false
rounded	Changes the border-radius from 8px to 20px.	boolean	false	false
use-button	If the value is true, the button is displayed.	boolean	false	false
button-click-callback-data	Any data that will be transferred to emit on-button-click after clicking on the button.	any	false	undefined

Events:

Name	Description
on-button-click	The event is triggered by clicking on the button and emits data from the props buttonClickCallbackData. Props useButton should be true.

Slots:

left-icon:

If a slot is used, it will display an icon to the left of the label.

  <template #left-icon>
    <img src="path-to-icon" alt="">
  </template>

right-icon:

If a slot is used, it will display an icon to the right of the label.

  <template #right-icon>
    <img src="path-to-icon" alt="">
  </template>

button-icon:

If a slot is used, it will be displayed instead of the default icon on the button.

  <template #right-icon>
    <img src="path-to-icon" alt="">
  </template>

Example:

  import Vue3SimpleChip from 'vue3-simple-chip.vue'
  ...
  components: {
    Vue3SimpleChip
  }
  ...
  <vue3-simple-chip
    label="foo"
    primary-color="teal"
    secondary-color="white"
  />
  ...

An example can be found in the dev folder or you can run storybook.

License

MIT License