TODOvue Label

TvLabel is a lightweight and customizable label (chip) component designed to highlight statuses, categories, or tags within your UI.

Table of Contents

• Demo
• Installation
• Usage
• Props
• Events
• Development
• Changelog
• Contributing
• License

Installation

Install with npm or yarn

npm install @todovue/tv-label

yarn add @todovue/tv-label

Import

import TvLabel from '@todovue/tv-label'

You can also import it directly in the main.js file, so you don't have to import it in the pages

import { createApp } from "vue";
import App from "./App.vue";
import TvLabel from "@todovue/tv-label";

const app = createApp(App);
app.component("TvLabel", TvLabel);
app.mount("#app");

Usage

<template>
  <tv-label @click-label="clickHandler" color="#4FC08D">
    Vue
  </tv-label>
</template>

<script setup>
  import TvLabel from "@todovue/tv-label"; // Only if you have not imported it from main
  
   const clickHandler = () => {
    console.log("clicked");
  }
</script>

Props

Name	Type	Default	Description
color	String	''	label color in hexadecimal
textLabel	String	''	If you don't want to send the name by slot you can send it by property
isEdit	Boolean	false	If you want to show the edit icon
isRemove	Boolean	false	If you want to show the remove icon
iconPosition	String	right	If you want to show the icons on the left or right side of the label
textColor	String	'inherit'	Text color

Events

Name	Description
click-label	Event that is triggered when the label is clicked
click	Event that is triggered when the label is clicked

Development

Clone the repository and install the dependencies

git clone https://github.com/TODOvue/tv-label.git
cd tv-label
yarn install

---

License

MIT