mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 04:32:22 +09:00
first
This commit is contained in:
@@ -0,0 +1,87 @@
|
||||
---
|
||||
optionsSingle:
|
||||
- batman
|
||||
- robin
|
||||
- joker
|
||||
state:
|
||||
valueSingle:
|
||||
---
|
||||
|
||||
### Autocomplete
|
||||
|
||||
Vuero is integrated with `Vue Multiselect`, a vue 3 select single, multiple and
|
||||
tags input library. You can check the plugin documentation on
|
||||
[Github](https://github.com/vueform/multiselect). You can transform the
|
||||
component into an autocomplete by adding the `:searchable="true"` prop. Check
|
||||
the code example for more details.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const valueSingle = []
|
||||
const optionsSingle = ['Batman', 'Robin', 'Joker']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="is-autocomplete-select">
|
||||
<VControl icon="lucide:search">
|
||||
<Multiselect
|
||||
v-model="valueSingle"
|
||||
:attrs="{ id }"
|
||||
:options="optionsSingle"
|
||||
placeholder="Search heroes..."
|
||||
:searchable="true"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-autocomplete-select">
|
||||
<VControl icon="lucide:search">
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.state.valueSingle"
|
||||
:options="frontmatter.optionsSingle"
|
||||
placeholder="Search heroes..."
|
||||
:searchable="true"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-curved-select is-autocomplete-select">
|
||||
<VControl icon="lucide:search">
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.state.valueSingle"
|
||||
:options="frontmatter.optionsSingle"
|
||||
placeholder="Search heroes..."
|
||||
:searchable="true"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-rounded-select is-autocomplete-select">
|
||||
<VControl icon="lucide:search">
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.state.valueSingle"
|
||||
:options="frontmatter.optionsSingle"
|
||||
placeholder="Search heroes..."
|
||||
:searchable="true"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
optionsSingle:
|
||||
- batman
|
||||
- robin
|
||||
- joker
|
||||
state:
|
||||
valueSingle: 0
|
||||
---
|
||||
|
||||
### Single Select
|
||||
|
||||
Vuero is integrated with `Vue Multiselect`, a vue 3 select single, multiple and
|
||||
tags input library. You can check the plugin documentation on
|
||||
[Github](https://github.com/vueform/multiselect). You can change the
|
||||
`<Multiselect />` component radius by adding the `is-curved` or `is-rounded`
|
||||
class to the parent `<VField />` component.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const valueSingle = 0
|
||||
const optionsSingle = ['Batman', 'Robin', 'Joker']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="is-curved-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
v-model="valueSingle"
|
||||
:attrs="{ id }"
|
||||
:options="optionsSingle"
|
||||
placeholder="Select an option"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.state.valueSingle"
|
||||
:options="frontmatter.optionsSingle"
|
||||
placeholder="Select an option"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-curved-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.state.valueSingle"
|
||||
:options="frontmatter.optionsSingle"
|
||||
placeholder="Select an option"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-rounded-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.state.valueSingle"
|
||||
:options="frontmatter.optionsSingle"
|
||||
placeholder="Select an option"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
disabledOptions:
|
||||
- value: batman
|
||||
label: Batman
|
||||
- value: robin
|
||||
label: Robin
|
||||
disabled: true
|
||||
- value: joker
|
||||
label: Joker
|
||||
disabledValue:
|
||||
- batman
|
||||
---
|
||||
|
||||
### Disabled Option
|
||||
|
||||
`<Multiselect />` options can be disabled. Simply pass a `disabled` property
|
||||
in your options object.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const disabledValue = ['batman']
|
||||
const disabledOptions = [
|
||||
{ value: 'batman', label: 'Batman' },
|
||||
{ value: 'robin', label: 'Robin', disabled: true },
|
||||
{ value: 'joker', label: 'Joker' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
v-model="disabledValue"
|
||||
:attrs="{ id }"
|
||||
mode="multiple"
|
||||
:options="disabledOptions"
|
||||
placeholder="Select options"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.disabledValue"
|
||||
mode="multiple"
|
||||
:options="frontmatter.disabledOptions"
|
||||
placeholder="Select options"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-curved-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.disabledValue"
|
||||
mode="multiple"
|
||||
:options="frontmatter.disabledOptions"
|
||||
placeholder="Select options"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-rounded-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.disabledValue"
|
||||
mode="multiple"
|
||||
:options="frontmatter.disabledOptions"
|
||||
placeholder="Select options"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,114 @@
|
||||
---
|
||||
optionMultipleObject:
|
||||
batman: Batman
|
||||
robin: Robin
|
||||
joker: Joker
|
||||
valueMultipleObject:
|
||||
- robin
|
||||
---
|
||||
|
||||
### Custom label
|
||||
|
||||
The `<Multiselect />` component in multiple mode has a default label when you
|
||||
start selecting options. You can change the way the message is formatted by
|
||||
using the `#multiplelabel` custom slot to configure your message.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import Multiselect from '@vueform/multiselect'
|
||||
const valueMultipleObject = ref(['robin'])
|
||||
const optionMultipleObject = ref({
|
||||
batman: 'Batman',
|
||||
robin: 'Robin',
|
||||
joker: 'Joker',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="demo-field mb-6">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
v-model="valueMultipleObject"
|
||||
:attrs="{ id }"
|
||||
mode="multiple"
|
||||
placeholder="Select your characters"
|
||||
:options="optionMultipleObject"
|
||||
>
|
||||
<template #multiplelabel="{ values }">
|
||||
<div class="multiselect-multiple-label">
|
||||
{{ values.length }} characters selected
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.valueMultipleObject"
|
||||
mode="multiple"
|
||||
placeholder="Select your characters"
|
||||
:options="frontmatter.optionMultipleObject"
|
||||
>
|
||||
<template #multiplelabel="{ values }">
|
||||
<div class="multiselect-multiple-label">
|
||||
{{ values.length }} characters selected
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-curved-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.valueMultipleObject"
|
||||
mode="multiple"
|
||||
placeholder="Select your characters"
|
||||
:options="frontmatter.optionMultipleObject"
|
||||
>
|
||||
<template #multiplelabel="{ values }">
|
||||
<div class="multiselect-multiple-label">
|
||||
{{ values.length }} characters selected
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-rounded-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.valueMultipleObject"
|
||||
mode="multiple"
|
||||
placeholder="Select your characters"
|
||||
:options="frontmatter.optionMultipleObject"
|
||||
>
|
||||
<template #multiplelabel="{ values }">
|
||||
<div class="multiselect-multiple-label">
|
||||
{{ values.length }} characters selected
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
optionMultipleObject:
|
||||
batman: Batman
|
||||
robin: Robin
|
||||
joker: Joker
|
||||
valueMultipleObject:
|
||||
- robin
|
||||
---
|
||||
|
||||
### Options object
|
||||
|
||||
The `<Multiselect />` component can receive data with his `options` props. You
|
||||
can either pass an `Array` or `Object` to the `options` props. You can also
|
||||
activate the `multiple` mode by setting the `mode` prop to `mode="multiple"`.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const valueMultipleObject = ['robin']
|
||||
const optionMultipleObject = {
|
||||
batman: 'Batman',
|
||||
robin: 'Robin',
|
||||
joker: 'Joker',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
v-model="valueMultipleObject"
|
||||
:attrs="{ id }"
|
||||
mode="multiple"
|
||||
:options="optionMultipleObject"
|
||||
placeholder="Select options"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.valueMultipleObject"
|
||||
mode="multiple"
|
||||
:options="frontmatter.optionMultipleObject"
|
||||
placeholder="Select options"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-curved-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.valueMultipleObject"
|
||||
mode="multiple"
|
||||
:options="frontmatter.optionMultipleObject"
|
||||
placeholder="Select options"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-rounded-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.valueMultipleObject"
|
||||
mode="multiple"
|
||||
:options="frontmatter.optionMultipleObject"
|
||||
placeholder="Select options"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,175 @@
|
||||
---
|
||||
selectSlotOptions:
|
||||
- value: javascript
|
||||
name: Javascript
|
||||
icon: /images/icons/stacks/js.svg
|
||||
- value: reactjs
|
||||
name: ReactJS
|
||||
icon: /images/icons/stacks/reactjs.svg
|
||||
- value: vuejs
|
||||
name: VueJS
|
||||
icon: /images/icons/stacks/vuejs.svg
|
||||
selectSlotValue:
|
||||
- batman
|
||||
---
|
||||
|
||||
### Image Select
|
||||
|
||||
The `<Multiselect />` component can be used with a custom template to show
|
||||
images for options and selected option. 2 CSS modifiers are available for
|
||||
images radius: `is-curved` and `is-rounded`.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const selectSlotValue
|
||||
const selectSlotOptions = [
|
||||
{
|
||||
value: 'javascript',
|
||||
name: 'Javascript',
|
||||
icon: '/images/icons/stacks/js.svg',
|
||||
},
|
||||
{
|
||||
value: 'spiderman',
|
||||
name: 'ReactJS',
|
||||
icon: '/images/icons/stacks/reactjs.svg',
|
||||
},
|
||||
{
|
||||
value: 'vuejs',
|
||||
name: 'VueJS',
|
||||
icon: '/images/icons/stacks/vuejs.svg',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="is-image-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
v-model="selectSlotValue"
|
||||
:attrs="{ id }"
|
||||
placeholder="Select a language"
|
||||
label="name"
|
||||
:options="selectSlotOptions"
|
||||
>
|
||||
<template #singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<img
|
||||
class="select-label-icon"
|
||||
:src="value.icon"
|
||||
alt=""
|
||||
>
|
||||
<span class="select-label-text">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #option="{ option }">
|
||||
<img
|
||||
class="select-option-icon"
|
||||
:src="option.icon"
|
||||
alt=""
|
||||
>
|
||||
<span class="select-label-text">
|
||||
{{ option.name }}
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.selectSlotValue"
|
||||
placeholder="Select a language"
|
||||
label="name"
|
||||
:options="frontmatter.selectSlotOptions"
|
||||
>
|
||||
<template v-slot:singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<img class="select-label-icon" :src="value.icon" alt="" />
|
||||
<span class="select-label-text">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:option="{ option }">
|
||||
<img class="select-option-icon" :src="option.icon" alt="" />
|
||||
<span class="select-option-text">
|
||||
{{ option.name }}
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-select is-curved-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.selectSlotValue"
|
||||
placeholder="Select a language"
|
||||
label="name"
|
||||
:options="frontmatter.selectSlotOptions"
|
||||
>
|
||||
<template v-slot:singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<img class="select-label-icon is-curved" :src="value.icon" alt="" />
|
||||
<span class="select-label-text">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:option="{ option }">
|
||||
<img class="select-option-icon is-curved" :src="option.icon" alt="" />
|
||||
<span class="select-option-text">
|
||||
{{ option.name }}
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-select is-rounded-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.selectSlotValue"
|
||||
placeholder="Select a language"
|
||||
label="name"
|
||||
:options="frontmatter.selectSlotOptions"
|
||||
>
|
||||
<template v-slot:singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<img class="select-label-icon is-rounded" :src="value.icon" alt="" />
|
||||
<span class="select-label-text">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:option="{ option }">
|
||||
<img class="select-option-icon is-rounded" :src="option.icon" alt="" />
|
||||
<span class="select-option-text">
|
||||
{{ option.name }}
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,225 @@
|
||||
---
|
||||
selectSlotIconOptions:
|
||||
- value: logistics
|
||||
name: Logistics
|
||||
icon: fas fa-box
|
||||
- value: business
|
||||
name: Business
|
||||
icon: fas fa-briefcase
|
||||
- value: relaxation
|
||||
name: Relaxation
|
||||
icon: fas fa-couch
|
||||
- value: development
|
||||
name: Development
|
||||
icon: fas fa-code
|
||||
- value: travel
|
||||
name: Travel
|
||||
icon: fas fa-compass
|
||||
- value: discussions
|
||||
name: Discussions
|
||||
icon: fas fa-comment-alt
|
||||
- value: shopping
|
||||
name: Shopping
|
||||
icon: fas fa-shopping-bag
|
||||
selectSlotIconValue: []
|
||||
---
|
||||
|
||||
### Icons with search
|
||||
|
||||
The `<Multiselect />` component can be used with a custom template to show
|
||||
icons for options and selected option. Supports searching the values.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const selectSlotIconValue
|
||||
const selectSlotIconOptions = [
|
||||
{
|
||||
name: 'Logistics',
|
||||
value: 'logistics',
|
||||
icon: 'fas fa-box',
|
||||
},
|
||||
{
|
||||
name: 'Business',
|
||||
value: 'business',
|
||||
icon: 'fas fa-briefcase',
|
||||
},
|
||||
{
|
||||
name: 'Relaxation',
|
||||
value: 'relaxation',
|
||||
icon: 'fas fa-couch',
|
||||
},
|
||||
{
|
||||
name: 'Development',
|
||||
value: 'development',
|
||||
icon: 'fas fa-code',
|
||||
},
|
||||
{
|
||||
name: 'Travel',
|
||||
value: 'travel',
|
||||
icon: 'fas fa-compass',
|
||||
},
|
||||
{
|
||||
name: 'Discussions',
|
||||
value: 'discussions',
|
||||
icon: 'fas fa-comment-alt',
|
||||
},
|
||||
{
|
||||
name: 'Shopping',
|
||||
value: 'shopping',
|
||||
icon: 'fas fa-shopping-bag',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="is-icon-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
v-model="selectSlotIconValue"
|
||||
:attrs="{ id }"
|
||||
placeholder="Select a member"
|
||||
label="name"
|
||||
:options="selectSlotIconOptions"
|
||||
:searchable="true"
|
||||
track-by="name"
|
||||
:max-height="145"
|
||||
>
|
||||
<template #singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<div class="select-label-icon-wrap">
|
||||
<i :class="value.icon" />
|
||||
</div>
|
||||
<span class="select-label-text">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #option="{ option }">
|
||||
<div class="select-option-icon-wrap">
|
||||
<i :class="option.icon" />
|
||||
</div>
|
||||
<span class="select-option-text">
|
||||
{{ option.name }}
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-icon-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.selectSlotIconValue"
|
||||
placeholder="Select a member"
|
||||
label="name"
|
||||
:options="frontmatter.selectSlotIconOptions"
|
||||
:searchable="true"
|
||||
trackBy="name"
|
||||
:maxHeight="145"
|
||||
>
|
||||
<template v-slot:singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<div class="select-label-icon-wrap">
|
||||
<i :class="value.icon"></i>
|
||||
</div>
|
||||
<span class="select-label-text">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:option="{ option }">
|
||||
<div class="select-option-icon-wrap">
|
||||
<i :class="option.icon"></i>
|
||||
</div>
|
||||
<span class="select-option-text">
|
||||
{{ option.name }}
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-icon-select is-curved-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.selectSlotIconValue"
|
||||
placeholder="Select a member"
|
||||
label="name"
|
||||
:options="frontmatter.selectSlotIconOptions"
|
||||
:searchable="true"
|
||||
trackBy="name"
|
||||
:maxHeight="145"
|
||||
>
|
||||
<template v-slot:singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<div class="select-label-icon-wrap">
|
||||
<i :class="value.icon"></i>
|
||||
</div>
|
||||
<span class="select-label-text">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:option="{ option }">
|
||||
<div class="select-option-icon-wrap">
|
||||
<i :class="option.icon"></i>
|
||||
</div>
|
||||
<span class="select-option-text">
|
||||
{{ option.name }}
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-icon-select is-rounded-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.selectSlotIconValue"
|
||||
placeholder="Select a member"
|
||||
label="name"
|
||||
:options="frontmatter.selectSlotIconOptions"
|
||||
:searchable="true"
|
||||
trackBy="name"
|
||||
:maxHeight="145"
|
||||
>
|
||||
<template v-slot:singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<div class="select-label-icon-wrap">
|
||||
<i :class="value.icon"></i>
|
||||
</div>
|
||||
<span class="select-label-text">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:option="{ option }">
|
||||
<div class="select-option-icon-wrap">
|
||||
<i :class="option.icon"></i>
|
||||
</div>
|
||||
<span class="select-option-text">
|
||||
{{ option.name }}
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,195 @@
|
||||
---
|
||||
selectSlotOptions:
|
||||
- value: javascript
|
||||
name: Javascript
|
||||
icon: /images/icons/stacks/js.svg
|
||||
- value: reactjs
|
||||
name: ReactJS
|
||||
icon: /images/icons/stacks/reactjs.svg
|
||||
- value: vuejs
|
||||
name: VueJS
|
||||
icon: /images/icons/stacks/vuejs.svg
|
||||
- value: angular
|
||||
name: Angular
|
||||
icon: /images/icons/stacks/angular.svg
|
||||
- value: android
|
||||
name: Android
|
||||
icon: /images/icons/stacks/android.svg
|
||||
- value: html5
|
||||
name: Html5
|
||||
icon: /images/icons/stacks/html5.svg
|
||||
- value: css3
|
||||
name: CSS3
|
||||
icon: /images/icons/stacks/css3.svg
|
||||
selectSlotValue:
|
||||
---
|
||||
|
||||
### Image with search
|
||||
|
||||
The `<Multiselect />` component can be used with a custom template to show
|
||||
images for options and selected option. 2 CSS modifiers are available for
|
||||
images radius: `is-curved` and `is-rounded`.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const selectSlotValue = ref()
|
||||
const selectSlotOptions = [
|
||||
{
|
||||
value: 'javascript',
|
||||
name: 'Javascript',
|
||||
icon: '/images/icons/stacks/js.svg',
|
||||
},
|
||||
{
|
||||
value: 'reactjs',
|
||||
name: 'ReactJS',
|
||||
icon: '/images/icons/stacks/reactjs.svg',
|
||||
},
|
||||
{
|
||||
value: 'vuejs',
|
||||
name: 'VueJS',
|
||||
icon: '/images/icons/stacks/vuejs.svg',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
v-model="selectSlotValue"
|
||||
:attrs="{ id }"
|
||||
placeholder="Select a language"
|
||||
label="name"
|
||||
:options="selectSlotOptions"
|
||||
:searchable="true"
|
||||
track-by="name"
|
||||
:max-height="145"
|
||||
>
|
||||
<template #singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<img
|
||||
class="select-label-icon"
|
||||
:src="value.icon"
|
||||
alt=""
|
||||
>
|
||||
{{ value.name }}
|
||||
</div>
|
||||
</template>
|
||||
<template #option="{ option }">
|
||||
<img
|
||||
class="select-option-icon"
|
||||
:src="option.icon"
|
||||
alt=""
|
||||
>
|
||||
{{ option.name }}
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.selectSlotValue"
|
||||
placeholder="Select a language"
|
||||
label="name"
|
||||
:options="frontmatter.selectSlotOptions"
|
||||
:searchable="true"
|
||||
trackBy="name"
|
||||
:maxHeight="145"
|
||||
>
|
||||
<template v-slot:singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<img class="select-label-icon" :src="value.icon" />
|
||||
<span class="select-label-text">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:option="{ option }">
|
||||
<img class="select-option-icon" :src="option.icon" />
|
||||
<span class="select-option-text">
|
||||
{{ option.name }}
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-select is-curved-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.selectSlotValue"
|
||||
placeholder="Select a language"
|
||||
label="name"
|
||||
:options="frontmatter.selectSlotOptions"
|
||||
:searchable="true"
|
||||
trackBy="name"
|
||||
:maxHeight="145"
|
||||
>
|
||||
<template v-slot:singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<img class="select-label-icon is-curved" :src="value.icon" />
|
||||
<span class="select-label-text">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:option="{ option }">
|
||||
<img class="select-option-icon is-curved" :src="option.icon" />
|
||||
<span class="select-option-text">
|
||||
{{ option.name }}
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-select is-rounded-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.selectSlotValue"
|
||||
placeholder="Select a language"
|
||||
label="name"
|
||||
:options="frontmatter.selectSlotOptions"
|
||||
:searchable="true"
|
||||
trackBy="name"
|
||||
:maxHeight="145"
|
||||
>
|
||||
<template v-slot:singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<img class="select-label-icon is-rounded" :src="value.icon" />
|
||||
<span class="select-label-text">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:option="{ option }">
|
||||
<img class="select-option-icon is-rounded" :src="option.icon" />
|
||||
<span class="select-option-text">
|
||||
{{ option.name }}
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,215 @@
|
||||
---
|
||||
selectSlotOptions:
|
||||
- value: alice
|
||||
name: Alice Carasca
|
||||
icon: https://media.cssninja.io/content/avatars/7.jpg
|
||||
- value: erik
|
||||
name: Erik Kovalsky
|
||||
icon: /images/avatars/svg/vuero-1.svg
|
||||
- value: melany
|
||||
name: Melany Wallace
|
||||
icon: https://media.cssninja.io/content/avatars/25.jpg
|
||||
- value: tara
|
||||
name: Tara Svenson
|
||||
icon: https://media.cssninja.io/content/avatars/13.jpg
|
||||
- value: mary
|
||||
name: Mary Lebowski
|
||||
icon: https://media.cssninja.io/content/avatars/5.jpg
|
||||
- value: irina
|
||||
name: Irina Vierbovsky
|
||||
icon: https://media.cssninja.io/content/avatars/23.jpg
|
||||
- value: jonathan
|
||||
name: Jonathan Krugger
|
||||
icon: https://media.cssninja.io/content/avatars/32.jpg
|
||||
selectSlotValue:
|
||||
---
|
||||
|
||||
### Users with search
|
||||
|
||||
The `<Multiselect />` component can be used with a custom template to show
|
||||
images for options and selected option. 2 CSS modifiers are available for
|
||||
images radius: `is-curved` and `is-rounded`.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const selectSlotValue = ref()
|
||||
const selectSlotOptions = [
|
||||
{
|
||||
value: 'alice',
|
||||
name: 'Alice Carasca',
|
||||
icon: 'https://media.cssninja.io/content/avatars/7.jpg',
|
||||
},
|
||||
{
|
||||
value: 'erik',
|
||||
name: 'Erik Kovalsky',
|
||||
icon: '/images/avatars/svg/vuero-1.svg',
|
||||
},
|
||||
{
|
||||
value: 'melany',
|
||||
name: 'melany Wallace',
|
||||
icon: 'https://media.cssninja.io/content/avatars/25.jpg',
|
||||
},
|
||||
{
|
||||
value: 'tara',
|
||||
name: 'Tara Svenson',
|
||||
icon: 'https://media.cssninja.io/content/avatars/13.jpg',
|
||||
},
|
||||
{
|
||||
value: 'mary',
|
||||
name: 'Mary Lebowski',
|
||||
icon: 'https://media.cssninja.io/content/avatars/5.jpg',
|
||||
},
|
||||
{
|
||||
value: 'irina',
|
||||
name: 'Irina Vierbovsky',
|
||||
icon: 'https://media.cssninja.io/content/avatars/23.jpg',
|
||||
},
|
||||
{
|
||||
value: 'jonathan',
|
||||
name: 'Jonathan Krugger',
|
||||
icon: 'https://media.cssninja.io/content/avatars/32.jpg',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
v-model="selectSlotValue"
|
||||
:attrs="{ id }"
|
||||
placeholder="Select a member"
|
||||
label="name"
|
||||
:options="selectSlotOptions"
|
||||
:searchable="true"
|
||||
track-by="name"
|
||||
:max-height="145"
|
||||
>
|
||||
<template #singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<img
|
||||
class="select-label-icon"
|
||||
:src="value.icon"
|
||||
alt=""
|
||||
>
|
||||
{{ value.name }}
|
||||
</div>
|
||||
</template>
|
||||
<template #option="{ option }">
|
||||
<img
|
||||
class="select-option-icon"
|
||||
:src="option.icon"
|
||||
alt=""
|
||||
>
|
||||
{{ option.name }}
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.selectSlotValue"
|
||||
placeholder="Select a member"
|
||||
label="name"
|
||||
:options="frontmatter.selectSlotOptions"
|
||||
:searchable="true"
|
||||
trackBy="name"
|
||||
:maxHeight="145"
|
||||
>
|
||||
<template v-slot:singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<img class="select-label-icon" :src="value.icon" />
|
||||
<span class="select-label-text">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:option="{ option }">
|
||||
<img class="select-option-icon" :src="option.icon" />
|
||||
<span class="select-option-text">
|
||||
{{ option.name }}
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-select is-curved-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.selectSlotValue"
|
||||
placeholder="Select a member"
|
||||
label="name"
|
||||
:options="frontmatter.selectSlotOptions"
|
||||
:searchable="true"
|
||||
trackBy="name"
|
||||
:maxHeight="145"
|
||||
>
|
||||
<template v-slot:singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<img class="select-label-icon is-curved" :src="value.icon" />
|
||||
<span class="select-label-text">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:option="{ option }">
|
||||
<img class="select-option-icon is-curved" :src="option.icon" />
|
||||
<span class="select-option-text">
|
||||
{{ option.name }}
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-select is-rounded-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.selectSlotValue"
|
||||
placeholder="Select a member"
|
||||
label="name"
|
||||
:options="frontmatter.selectSlotOptions"
|
||||
:searchable="true"
|
||||
trackBy="name"
|
||||
:maxHeight="145"
|
||||
>
|
||||
<template v-slot:singlelabel="{ value }">
|
||||
<div class="multiselect-single-label">
|
||||
<img class="select-label-icon is-rounded" :src="value.icon" />
|
||||
<span class="select-label-text">
|
||||
{{ value.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:option="{ option }">
|
||||
<img class="select-option-icon is-rounded" :src="option.icon" />
|
||||
<span class="select-option-text">
|
||||
{{ option.name }}
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
tagsOptions:
|
||||
- value: batman
|
||||
label: Batman
|
||||
- value: robin
|
||||
label: Robin
|
||||
- value: joker
|
||||
label: Joker
|
||||
tagsValue: []
|
||||
---
|
||||
|
||||
### Tags Input
|
||||
|
||||
The `<Multiselect />` component can be turned into a fully functional tags
|
||||
input component. In order to do that, set the `mode` prop to `tags` when
|
||||
instantiating the plugin. You can also enable search using the
|
||||
`:searchable="true"` prop and allow creation of new tags by using the
|
||||
`:create-tag="true"` prop.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const tagsValue = []
|
||||
const tagsOptions = [
|
||||
{ value: 'batman', label: 'Batman' },
|
||||
{ value: 'robin', label: 'Robin' },
|
||||
{ value: 'joker', label: 'Joker' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
v-model="tagsValue"
|
||||
:attrs="{ id }"
|
||||
mode="tags"
|
||||
:searchable="true"
|
||||
:create-tag="true"
|
||||
:options="tagsOptions"
|
||||
placeholder="Add tags"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsValue"
|
||||
mode="tags"
|
||||
:searchable="true"
|
||||
:create-tag="true"
|
||||
:options="frontmatter.tagsOptions"
|
||||
placeholder="Add tags"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-curved-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsValue"
|
||||
mode="tags"
|
||||
:searchable="true"
|
||||
:create-tag="true"
|
||||
:options="frontmatter.tagsOptions"
|
||||
placeholder="Add tags"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-rounded-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsValue"
|
||||
mode="tags"
|
||||
:searchable="true"
|
||||
:create-tag="true"
|
||||
:options="frontmatter.tagsOptions"
|
||||
placeholder="Add tags"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,205 @@
|
||||
---
|
||||
tagsSlotOptions:
|
||||
- value: alice
|
||||
name: Alice C.
|
||||
image: https://media.cssninja.io/content/avatars/7.jpg
|
||||
- value: erik
|
||||
name: Erik K.
|
||||
image: /images/avatars/svg/vuero-1.svg
|
||||
- value: melany
|
||||
name: Melany W.
|
||||
image: https://media.cssninja.io/content/avatars/25.jpg
|
||||
- value: tara
|
||||
name: Tara S.
|
||||
image: https://media.cssninja.io/content/avatars/13.jpg
|
||||
- value: mary
|
||||
name: Mary L.
|
||||
image: https://media.cssninja.io/content/avatars/5.jpg
|
||||
- value: irina
|
||||
name: Irina V.
|
||||
image: https://media.cssninja.io/content/avatars/23.jpg
|
||||
- value: jonathan
|
||||
name: Jonathan K.
|
||||
image: https://media.cssninja.io/content/avatars/32.jpg
|
||||
tagsSlotValue: []
|
||||
---
|
||||
|
||||
### User tags
|
||||
|
||||
You can combine the `mode="tags"` with a custom template. This way you can
|
||||
show custom tag elements with an image inside. The tag shape inherits from
|
||||
the select class modifier.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const tagsSlotValue = ref([])
|
||||
const tagsSlotOptions = [
|
||||
{
|
||||
value: 'alice',
|
||||
name: 'Alice Carasca',
|
||||
image: 'https://media.cssninja.io/content/avatars/7.jpg',
|
||||
},
|
||||
{
|
||||
value: 'erik',
|
||||
name: 'Erik Kovalsky',
|
||||
image: '/images/avatars/svg/vuero-1.svg',
|
||||
},
|
||||
{
|
||||
value: 'melany',
|
||||
name: 'melany Wallace',
|
||||
image: 'https://media.cssninja.io/content/avatars/25.jpg',
|
||||
},
|
||||
{
|
||||
value: 'tara',
|
||||
name: 'Tara Svenson',
|
||||
image: 'https://media.cssninja.io/content/avatars/13.jpg',
|
||||
},
|
||||
{
|
||||
value: 'mary',
|
||||
name: 'Mary Lebowski',
|
||||
image: 'https://media.cssninja.io/content/avatars/5.jpg',
|
||||
},
|
||||
{
|
||||
value: 'irina',
|
||||
name: 'Irina Vierbovsky',
|
||||
image: 'https://media.cssninja.io/content/avatars/23.jpg',
|
||||
},
|
||||
{
|
||||
value: 'jonathan',
|
||||
name: 'Jonathan Krugger',
|
||||
image: 'https://media.cssninja.io/content/avatars/32.jpg',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="is-image-tags">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
v-model="tagsSlotValue"
|
||||
:attrs="{ id }"
|
||||
mode="tags"
|
||||
placeholder="Select employees"
|
||||
track-by="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="tagsSlotOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template #tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="">
|
||||
{{ option.name }}
|
||||
<i
|
||||
v-if="!disabled"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-tags">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsSlotValue"
|
||||
mode="tags"
|
||||
placeholder="Select employees"
|
||||
trackBy="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="frontmatter.tagsSlotOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template v-slot:tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="">
|
||||
{{ option.name }}
|
||||
<i
|
||||
v-if="!disabled"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-tags is-curved-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsSlotValue"
|
||||
mode="tags"
|
||||
placeholder="Select employees"
|
||||
trackBy="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="frontmatter.tagsSlotOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template v-slot:tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="">
|
||||
{{ option.name }}
|
||||
<i
|
||||
v-if="!disabled"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-tags is-rounded-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsSlotValue"
|
||||
mode="tags"
|
||||
placeholder="Select employees"
|
||||
trackBy="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="frontmatter.tagsSlotOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template v-slot:tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="">
|
||||
{{ option.name }}
|
||||
<i
|
||||
v-if="!disabled"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,205 @@
|
||||
---
|
||||
tagsSlotOptions:
|
||||
- value: javascript
|
||||
name: Javascript
|
||||
image: /images/icons/stacks/js.svg
|
||||
- value: reactjs
|
||||
name: ReactJS
|
||||
image: /images/icons/stacks/reactjs.svg
|
||||
- value: vuejs
|
||||
name: VueJS
|
||||
image: /images/icons/stacks/vuejs.svg
|
||||
- value: angular
|
||||
name: Angular
|
||||
image: /images/icons/stacks/angular.svg
|
||||
- value: android
|
||||
name: Android
|
||||
image: /images/icons/stacks/android.svg
|
||||
- value: html5
|
||||
name: Html5
|
||||
image: /images/icons/stacks/html5.svg
|
||||
- value: css3
|
||||
name: CSS3
|
||||
image: /images/icons/stacks/css3.svg
|
||||
tagsSlotValue: []
|
||||
---
|
||||
|
||||
### Image tags
|
||||
|
||||
You can combine the `mode="tags"` with a custom template. This way you can
|
||||
show custom tag elements with an image inside. The tag shape inherits from
|
||||
the select class modifier.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const tagsSlotValue = ref([])
|
||||
const tagsSlotOptions = [
|
||||
{
|
||||
value: 'javascript',
|
||||
name: 'Javascript',
|
||||
image: '/images/icons/stacks/js.svg',
|
||||
},
|
||||
{
|
||||
value: 'reactjs',
|
||||
name: 'ReactJS',
|
||||
image: '/images/icons/stacks/reactjs.svg',
|
||||
},
|
||||
{
|
||||
value: 'vuejs',
|
||||
name: 'VueJS',
|
||||
image: '/images/icons/stacks/vuejs.svg',
|
||||
},
|
||||
{
|
||||
value: 'angular',
|
||||
name: 'Angular',
|
||||
image: '/images/icons/stacks/angular.svg',
|
||||
},
|
||||
{
|
||||
value: 'android',
|
||||
name: 'Android',
|
||||
image: '/images/icons/stacks/android.svg',
|
||||
},
|
||||
{
|
||||
value: 'html5',
|
||||
name: 'Html5',
|
||||
image: '/images/icons/stacks/html5.svg',
|
||||
},
|
||||
{
|
||||
value: 'css3',
|
||||
name: 'CSS3',
|
||||
image: '/images/icons/stacks/css3.svg',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="is-image-tags">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
v-model="tagsSlotValue"
|
||||
:attrs="{ id }"
|
||||
mode="tags"
|
||||
placeholder="Select language"
|
||||
track-by="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="tagsSlotOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template #tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="">
|
||||
{{ option.name }}
|
||||
<i
|
||||
v-if="!disabled"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-tags">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsSlotValue"
|
||||
mode="tags"
|
||||
placeholder="Select language"
|
||||
trackBy="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="frontmatter.tagsSlotOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template v-slot:tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="" />
|
||||
{{ option.name }}
|
||||
<i
|
||||
v-if="!disabled"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-tags is-curved-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsSlotValue"
|
||||
mode="tags"
|
||||
placeholder="Select language"
|
||||
trackBy="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="frontmatter.tagsSlotOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template v-slot:tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="" />
|
||||
{{ option.name }}
|
||||
<i
|
||||
v-if="!disabled"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-tags is-rounded-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsSlotValue"
|
||||
mode="tags"
|
||||
placeholder="Select language"
|
||||
trackBy="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="frontmatter.tagsSlotOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template v-slot:tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="" />
|
||||
{{ option.name }}
|
||||
<i
|
||||
v-if="!disabled"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,202 @@
|
||||
---
|
||||
tagsSlotOptions:
|
||||
- value: javascript
|
||||
name: Javascript
|
||||
image: /images/icons/stacks/js.svg
|
||||
- value: reactjs
|
||||
name: ReactJS
|
||||
image: /images/icons/stacks/reactjs.svg
|
||||
- value: vuejs
|
||||
name: VueJS
|
||||
image: /images/icons/stacks/vuejs.svg
|
||||
- value: angular
|
||||
name: Angular
|
||||
image: /images/icons/stacks/angular.svg
|
||||
- value: android
|
||||
name: Android
|
||||
image: /images/icons/stacks/android.svg
|
||||
- value: html5
|
||||
name: Html5
|
||||
image: /images/icons/stacks/html5.svg
|
||||
- value: css3
|
||||
name: CSS3
|
||||
image: /images/icons/stacks/css3.svg
|
||||
tagsSlotValue: []
|
||||
---
|
||||
|
||||
### Stacked images
|
||||
|
||||
You can combine the `mode="tags"` with a custom template. This way you can
|
||||
show custom tag elements with an image inside. The tag shape inherits from
|
||||
the select class modifier. Add the `is-stacked` class to the `is-image-tags`
|
||||
element to show stacked images.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const tagsSlotValue = []
|
||||
const tagsSlotOptions = [
|
||||
{
|
||||
value: 'javascript',
|
||||
name: 'Javascript',
|
||||
image: '/images/icons/stacks/js.svg',
|
||||
},
|
||||
{
|
||||
value: 'reactjs',
|
||||
name: 'ReactJS',
|
||||
image: '/images/icons/stacks/reactjs.svg',
|
||||
},
|
||||
{
|
||||
value: 'vuejs',
|
||||
name: 'VueJS',
|
||||
image: '/images/icons/stacks/vuejs.svg',
|
||||
},
|
||||
{
|
||||
value: 'angular',
|
||||
name: 'Angular',
|
||||
image: '/images/icons/stacks/angular.svg',
|
||||
},
|
||||
{
|
||||
value: 'android',
|
||||
name: 'Android',
|
||||
image: '/images/icons/stacks/android.svg',
|
||||
},
|
||||
{
|
||||
value: 'html5',
|
||||
name: 'Html5',
|
||||
image: '/images/icons/stacks/html5.svg',
|
||||
},
|
||||
{
|
||||
value: 'css3',
|
||||
name: 'CSS3',
|
||||
image: '/images/icons/stacks/css3.svg',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="is-image-tags is-stacked">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
v-model="tagsSlotValue"
|
||||
:attrs="{ id }"
|
||||
mode="tags"
|
||||
placeholder="Select language"
|
||||
track-by="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="tagsSlotOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template #tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="">
|
||||
{{ option.name }}
|
||||
<i
|
||||
v-if="!disabled"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-tags is-stacked">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsSlotValue"
|
||||
mode="tags"
|
||||
placeholder="Select language"
|
||||
trackBy="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="frontmatter.tagsSlotOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template v-slot:tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="" />
|
||||
<i
|
||||
v-if="!disabled"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-tags is-stacked is-curved-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsSlotValue"
|
||||
mode="tags"
|
||||
placeholder="Select language"
|
||||
trackBy="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="frontmatter.tagsSlotOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template v-slot:tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="" />
|
||||
<i
|
||||
v-if="!disabled"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-tags is-stacked is-rounded-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsSlotValue"
|
||||
mode="tags"
|
||||
placeholder="Select language"
|
||||
trackBy="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="frontmatter.tagsSlotOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template v-slot:tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="" />
|
||||
<i
|
||||
v-if="!disabled"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,202 @@
|
||||
---
|
||||
tagsStackedUsersOptions:
|
||||
- value: alice
|
||||
name: Alice Carasca
|
||||
image: https://media.cssninja.io/content/avatars/7.jpg
|
||||
- value: erik
|
||||
name: Erik Kovalsky
|
||||
image: /images/avatars/svg/vuero-1.svg
|
||||
- value: melany
|
||||
name: Melany Wallace
|
||||
image: https://media.cssninja.io/content/avatars/25.jpg
|
||||
- value: tara
|
||||
name: Tara Svenson
|
||||
image: https://media.cssninja.io/content/avatars/13.jpg
|
||||
- value: mary
|
||||
name: Mary Lebowski
|
||||
image: https://media.cssninja.io/content/avatars/5.jpg
|
||||
- value: irina
|
||||
name: Irina Vierbovsky
|
||||
image: https://media.cssninja.io/content/avatars/23.jpg
|
||||
- value: jonathan
|
||||
name: Jonathan Krugger
|
||||
image: https://media.cssninja.io/content/avatars/32.jpg
|
||||
tagsStackedUsersValue: []
|
||||
---
|
||||
|
||||
### Stacked users
|
||||
|
||||
You can combine the `mode="tags"` with a custom template. This way you can
|
||||
show custom tag elements with an image inside. The tag shape inherits from
|
||||
the select class modifier. Add the `is-stacked` class to the `is-image-tags`
|
||||
element to show stacked images.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const tagsStackedUsersValue = []
|
||||
const tagsStackedUsersOptions = [
|
||||
{
|
||||
value: 'alice',
|
||||
name: 'Alice Carasca',
|
||||
image: 'https://media.cssninja.io/content/avatars/7.jpg',
|
||||
},
|
||||
{
|
||||
value: 'erik',
|
||||
name: 'Erik Kovalsky',
|
||||
image: '/images/avatars/svg/vuero-1.svg',
|
||||
},
|
||||
{
|
||||
value: 'melany',
|
||||
name: 'melany Wallace',
|
||||
image: 'https://media.cssninja.io/content/avatars/25.jpg',
|
||||
},
|
||||
{
|
||||
value: 'tara',
|
||||
name: 'Tara Svenson',
|
||||
image: 'https://media.cssninja.io/content/avatars/13.jpg',
|
||||
},
|
||||
{
|
||||
value: 'mary',
|
||||
name: 'Mary Lebowski',
|
||||
image: 'https://media.cssninja.io/content/avatars/5.jpg',
|
||||
},
|
||||
{
|
||||
value: 'irina',
|
||||
name: 'Irina Vierbovsky',
|
||||
image: 'https://media.cssninja.io/content/avatars/23.jpg',
|
||||
},
|
||||
{
|
||||
value: 'jonathan',
|
||||
name: 'Jonathan Krugger',
|
||||
image: 'https://media.cssninja.io/content/avatars/32.jpg',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="is-image-tags">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
v-model="tagsStackedUsersValue"
|
||||
:attrs="{ id }"
|
||||
mode="tags"
|
||||
placeholder="Select members"
|
||||
track-by="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="tagsStackedUsersOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template #tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="">
|
||||
{{ option.name }}
|
||||
<i
|
||||
v-if="!disabled"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-tags is-stacked">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsStackedUsersValue"
|
||||
mode="tags"
|
||||
placeholder="Select members"
|
||||
trackBy="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="frontmatter.tagsStackedUsersOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template v-slot:tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="" />
|
||||
<i
|
||||
v-if="!disabled"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-tags is-stacked is-curved-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsStackedUsersValue"
|
||||
mode="tags"
|
||||
placeholder="Select members"
|
||||
trackBy="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="frontmatter.tagsStackedUsersOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template v-slot:tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="" />
|
||||
<i
|
||||
v-if="!disabled"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<VField v-slot="{ id }" class="is-image-tags is-stacked is-rounded-select">
|
||||
<VControl>
|
||||
<Multiselect
|
||||
:attrs="{ id }"
|
||||
v-model="frontmatter.tagsStackedUsersValue"
|
||||
mode="tags"
|
||||
placeholder="Select members"
|
||||
trackBy="name"
|
||||
label="name"
|
||||
:search="true"
|
||||
:options="frontmatter.tagsStackedUsersOptions"
|
||||
:max-height="145"
|
||||
>
|
||||
<template v-slot:tag="{ option, remove, disabled }">
|
||||
<div class="multiselect-tag is-user">
|
||||
<img :src="option.image" alt="" />
|
||||
<i
|
||||
v-if="!disabled"
|
||||
@click.prevent
|
||||
@mousedown.prevent.stop="remove(option)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
Reference in New Issue
Block a user