Vue Simple Tag

🗃 A simple vue tag. Perfect for all your tag scenarios.

A light weight vue plugin built groundup.

📺 Live Demo

Demo: Link

🛠 Install

npm i @vuesimple/vs-tag

🚀 Usage

<template>
  <vs-tag variant="primary"> Primary </vs-tag>
</template>

<script>
  import VsTag from '@vuesimple/vs-tag';

  export default {
    components: {
      VsTag,
    },
  };
</script>

🌎 CDN

<script src="https://unpkg.com/@vuesimple/vs-tag@<version>/dist/vs-tag.min.js"></script>

// Main/Entry file
app.use(VsTag.plugin);

<template>
  <vs-tag variant="primary"> Primary </vs-tag>
</template>

⚙ Props

| Name | Type | Default | Description | | ---------- | ------- | -------- | ---------------------------------------------------------------------- | | variant | String | - | Type of tag to be shown. (primary, secondary, warning, danger) | | size | String | medium | Size of tag. (small, medium, large) | | is-bold | Boolean | true | Bold text for tag. | | is-pill | Boolean | medium | Applies pill styling | | is-round | Boolean | medium | Applies styles to round the tag | | bg-color | String | - | Applies hex/rgb/text color to tags background color | | text-color | String | - | Applies hex/rgb/text color to tags text color | | is-close | Boolean | false | Show close button |

🔥 Events

| Name | Description | | ----- | -------------------------------------------------------- | | click | On close button click (only available if is-close set) |

📎 Slots

You can define own item markup via slots:

| Name | Description | | --------- | ------------------------------------------- | | (default) | Holds the tag content and can contain HTML. |