2.3.0 • Published 3 years ago
todovue-label v2.3.0
TODOvue Label
TvLabel is a custom label component for web applications.
Table of Contents
Installation
Install with npm or yarn
npm install todovue-labelyarn add todovue-labelImport
import { TvLabel } from 'todovue-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-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>
import TvLabel from "todovue-label"; // Only if you have not imported it from main
export default {
components: {
TvLabel // Only if you have not imported it from main
},
setup() {
const clickHandler = () => {
console.log("clicked");
}
return {
clickHandler
}
}
}
</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 |
Events
| Name | Description |
|---|---|
| click-label | Event that is triggered when the label is clicked |
Development
Clone the repository and install the dependencies
git https://github.com/TODOvue/todovue-label.gitcd todovue-labelInstall the dependencies
yarn installRun the project
yarn demoRun the tests
yarn test:unitRun the linter
yarn lintRun the build It is not necessary to generate build, since it is generated when you do PR to the master branch
yarn build