0.1.3 • Published 1 year ago
tag-search-view v0.1.3
Tag-Search-View
Vue Component to filter tags for Smartphones.
Demo
Installation
npm install --save tag-search-view
Usage
Use in Vue Single-File Components.
<script setup lang="ts">
import { ref } from "vue";
import { TagSearchView } from "tag-search-view";
import "tag-search-view/dist/tag-search-view.css";
const value = ref([
{
label: "apple",
value: "1"
}
]);
const options = ref([
{
label: "apple",
value: "1"
},
{
label: "apricot",
value: "2"
},
{
label: "avocado",
value: "3"
}
]);
</script>
<temlpates>
<TagSearchView :options="options" v-model="value" placeholder="Search..." />
</templates>
Props
Name | Type | Default | Description |
---|---|---|---|
v-model (required) | Item[] | - | two-way binding value. |
options | Item[] | - | choices in this component. |
placeholder | string | placeholder of text field. |
Interface
Item
Property | Type |
---|---|
label | string |
value | string |
Dependencies
Module | Version |
---|---|
vue | 3.3.4 |
material-symbols | 0.11.0 |
Setup
Development
Lint
npm run lint
Unit Test
npm run test
npm run test:watch
Launch Demo
npm run dev
Buld
Bundle the js and css to the dist
directory.
npm run build
Icons
- download svg files by Material Symbols and Icons
- convert to webfont by IcoMoon
Settings (Material Symbols)
Name | Fill | Weight | Grade | Optical Size |
---|---|---|---|---|
add | 0 | 400 | 0 | 24 |
check_circle | 1 | 400 | 0 | 24 |
circle | 0 | 200 | 0 | 24 |
close | 0 | 400 | 0 | 24 |
search | 0 | 400 | 0 | 24 |