Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atif0075/v3-tag-input
This is a simple input field for entering tags in an input. It is written in vue 3 and has no dependencies. It is totally unstyled and can be used in any project. It is highly customizable and can be used in any project.
https://github.com/atif0075/v3-tag-input
Last synced: 29 days ago
JSON representation
This is a simple input field for entering tags in an input. It is written in vue 3 and has no dependencies. It is totally unstyled and can be used in any project. It is highly customizable and can be used in any project.
- Host: GitHub
- URL: https://github.com/atif0075/v3-tag-input
- Owner: atif0075
- Created: 2023-09-20T05:29:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-27T20:55:19.000Z (about 1 year ago)
- Last Synced: 2024-11-19T22:21:12.384Z (about 1 month ago)
- Language: Vue
- Homepage: https://v3-tag-input.vercel.app
- Size: 229 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# V3TagInput
This is a simple input field for entering tags in an input. It is written in vue 3 and has no dependencies. It is totally unstyled and can be used in any project. It is highly customizable and can be used in any project.
## Installation
```bash
npm install v3-tag-input
```
## Import
```javascript
import v3TagInput from "v3-tag-input";
```
## Usage
```vue
import { ref } from "vue";
import v3TagInput from "v3-tag-input";
const tags = ref([]);
console.log('Duplicate!')"
@onRemove="() => console.log('Removed!')"
@getTags="($event) => (tags = $event)"
/>
```
## Props
| Name | Type | Default | Description |
| --------------- | -------- | ------- | -------------------------------------------------------------- |
| placeholder | String | "" | Placeholder text |
| removeAble | Boolean | false | If true, tags can be removed by clicking on the x |
| allowDuplicates | Boolean | false | If true, duplicate tags can be added |
| allowEmpty | Boolean | false | If true, empty tags can be added |
| onDuplicate | Function | null | Callback function that is called when a duplicate tag is added |
| onRemove | Function | null | Callback function that is called when a tag is removed |
| getTags | Function | null | Callback function that is called when tags are changed |
## Events
| Name | Description |
| ----------- | -------------------------------------------------------------- |
| onDuplicate | Callback function that is called when a duplicate tag is added |
| onRemove | Callback function that is called when a tag is removed |
| getTags | Callback function that is called when tags are changed |
## Styling
The component is totally unstyled. You can style it by using the following classes:
```css
/* .tagInputContainer */
.tagInputContainer {
padding: 1rem 1rem;
background-color: #fff;
border: 1px solid #e2e8f0;
border-radius: 1.5rem;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.25rem;
flex-wrap: wrap;
}
/* .tags */
.tags {
display: inline-flex;
align-items: center;
padding: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: #333;
background-color: #f3f4f6;
border-radius: 9999px;
}
/* .tagRemoveIconWrap */
.tagRemoveIconWrap {
display: inline-flex;
align-items: center;
padding: 0.25rem;
margin-left: 0.5rem;
font-size: 0.875rem;
color: #718096;
background-color: transparent;
border-radius: 9999px;
transition: background-color 0.2s, color 0.2s;
border: none;
}
.tagRemoveIconWrap:hover {
background-color: #e2e8f0;
color: #1a202c;
}
/* .tagRemoveIcon */
.tagRemoveIcon {
width: 0.5rem;
height: 0.5rem;
}
/* .tagInput */
.tagInput {
outline: none;
height: 100%;
width: auto;
border: none;
}
```