mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 02:32:29 +09:00
first
This commit is contained in:
@@ -0,0 +1,74 @@
|
||||
---
|
||||
state:
|
||||
flipped: false
|
||||
---
|
||||
|
||||
### VBillboardJS
|
||||
|
||||
Vuero ships with the `<VBillboardJS />` component, a custom vue3 wrapper
|
||||
for the [billboard.js](https://naver.github.io/billboard.js/) library.
|
||||
Check the code for more details.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const billboardJsOptions = {
|
||||
data: {
|
||||
x: 'x',
|
||||
columns: [
|
||||
['x', 'Data A', 'Data B', 'Data C', 'Data D', 'Data E'],
|
||||
['data1', 330, 350, 200, 380, 150],
|
||||
['data2', 130, 100, 30, 200, 80],
|
||||
['data3', 230, 153, 85, 300, 250],
|
||||
],
|
||||
colors: {
|
||||
data1: themeColors.purple,
|
||||
data2: themeColors.lime,
|
||||
data3: themeColors.info,
|
||||
data4: themeColors.purple,
|
||||
},
|
||||
type: 'radar',
|
||||
labels: true,
|
||||
},
|
||||
radar: {
|
||||
axis: {
|
||||
max: 400,
|
||||
},
|
||||
level: {
|
||||
depth: 4,
|
||||
},
|
||||
direction: {
|
||||
clockwise: true,
|
||||
},
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Radar Chart',
|
||||
position: 'top-left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBillboardJS :options="billboardJsOptions" />
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
disable_code: true
|
||||
slimscroll: true
|
||||
---
|
||||
|
||||
### VBillboardJS Props
|
||||
|
||||
Here is the full props available for `<VBillboardJS />` component:
|
||||
|
||||
| Props | Default | Type |
|
||||
| ------- | ---------------------------------- | -------------------------------------------------------------------------------------------- |
|
||||
| options | <span class="is-array">`{}`</span> | [Billboard.js Options](https://naver.github.io/billboard.js/release/latest/doc/Options.html) |
|
||||
@@ -0,0 +1,36 @@
|
||||
### CKEditor
|
||||
|
||||
Every application needs a rich text editor component. Vuero is bundled with
|
||||
the [CK Editor](https://ckeditor.com/docs/ckeditor5/latest/index.html)
|
||||
plugin. The example below shows the default editor mode. There are many more,
|
||||
but the plugin doesn't support importing all editor variations. You have to
|
||||
chose one and keep on with it. Other available layouts can be found [here](https://ckeditor.com/docs/ckeditor5/latest/index.html).
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import CKE from '@ckeditor/ckeditor5-vue'
|
||||
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
|
||||
|
||||
const CKEditor = CKE.component
|
||||
const content = ref(`<h2>Your HTML Content</h2>`)
|
||||
const config = {
|
||||
fontFamily: {
|
||||
options: ['"Montserrat Variable", sans-serif', '"Roboto Flex Variable", sans-serif'],
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<CKEditor
|
||||
v-model="content"
|
||||
:editor="ClassicEditor"
|
||||
:config="config"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
state:
|
||||
flipped: false
|
||||
---
|
||||
|
||||
### VCreditCard
|
||||
|
||||
Vuero ships with the `<VCreditCard />` component, a custom credit card
|
||||
previewer. Check the code for more details.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const flipped = ref(null)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField>
|
||||
<VControl>
|
||||
<VCreditCard
|
||||
color="grey"
|
||||
:flipped="flipped"
|
||||
@flip="flipped = !flipped"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<VField class="credit-card">
|
||||
<VControl>
|
||||
<VCreditCard
|
||||
color="grey"
|
||||
:flipped="frontmatter.state.flipped"
|
||||
@flip="frontmatter.state.flipped = !frontmatter.state.flipped"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
disable_code: true
|
||||
slimscroll: true
|
||||
---
|
||||
|
||||
### VCreditCard Props
|
||||
|
||||
Here is the full props available for `<VCreditCard />` component:
|
||||
|
||||
| Props | Default | Type |
|
||||
| ------- | ---------------------------------------------------- | --------------------------------------------------------------------------------- |
|
||||
| number | <span class="is-string">`0123 4567 8910 1112`</span> | string |
|
||||
| name | <span class="is-string">`JOHN DOE`</span> | string |
|
||||
| expiry | <span class="is-string">`01/23`</span> | string |
|
||||
| cvc | <span class="is-string">`987`</span> | string |
|
||||
| color | <span class="is-string">`grey`</span> | `grey`, `green`, `lime`, `orange`, `purple`, `red`, `yellow`, `lightblue`, `cyan` |
|
||||
| flipped | <span class="is-boolean">`false`</span> | boolean |
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
state:
|
||||
date: 2021-02-28
|
||||
---
|
||||
|
||||
### Datepicker
|
||||
|
||||
Vuero ships with the `<VCalendar />` component, a multipurpose calendar /
|
||||
datepicker component for your forms. Below is a basic example. Please check the
|
||||
[plugin documentation](https://vcalendar.io/) for more details
|
||||
about usage.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const date = ref(null)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<VDatePicker
|
||||
v-model="date"
|
||||
color="green"
|
||||
trim-weeks
|
||||
>
|
||||
<template #default="{ inputValue, inputEvents }">
|
||||
<VField>
|
||||
<VControl icon="lucide:calendar">
|
||||
<input
|
||||
class="input v-input"
|
||||
type="text"
|
||||
:value="inputValue"
|
||||
v-on="inputEvents"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
</VDatePicker>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<ClientOnly>
|
||||
<VDatePicker v-model="frontmatter.state.date" color="green" trim-weeks>
|
||||
<template #default="{ inputValue, inputEvents }">
|
||||
<VField>
|
||||
<VControl icon="lucide:calendar">
|
||||
<input class="input v-input" type="text" :value="inputValue" v-on="inputEvents" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
</VDatePicker>
|
||||
</ClientOnly>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
state:
|
||||
range:
|
||||
start: 2021-02-08
|
||||
end: 2021-02-14
|
||||
---
|
||||
|
||||
### DateRangepicker
|
||||
|
||||
`<VCalendar />` can be turned into a date range picker if needed. Check the
|
||||
code example for more details about usage.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const range = reactive({
|
||||
start: new Date(),
|
||||
end: new Date(),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<VDatePicker
|
||||
v-model.range="range"
|
||||
color="green"
|
||||
trim-weeks
|
||||
>
|
||||
<template #default="{ inputValue, inputEvents }">
|
||||
<VField addons>
|
||||
<VControl>
|
||||
<input
|
||||
class="input v-input"
|
||||
type="text"
|
||||
:value="inputValue.start"
|
||||
v-on="inputEvents.start"
|
||||
>
|
||||
</VControl>
|
||||
<VControl>
|
||||
<VButton static icon="lucide:arrow-right" />
|
||||
</VControl>
|
||||
<VControl subcontrol>
|
||||
<input
|
||||
class="input v-input"
|
||||
type="text"
|
||||
:value="inputValue.end"
|
||||
v-on="inputEvents.end"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
</VDatePicker>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<ClientOnly>
|
||||
<VDatePicker v-model.range="frontmatter.state.range" color="green" trim-weeks>
|
||||
<template v-slot="{ inputValue, inputEvents }">
|
||||
<VField addons>
|
||||
<VControl expanded icon="lucide:corner-down-right">
|
||||
<input class="input v-input" type="text" :value="inputValue.start" v-on="inputEvents.start" />
|
||||
</VControl>
|
||||
<VControl>
|
||||
<VButton static>to</VButton>
|
||||
</VControl>
|
||||
<VControl expanded icon="lucide:corner-right-up" subcontrol>
|
||||
<input class="input v-input" type="text" :value="inputValue.end" v-on="inputEvents.end" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
</VDatePicker>
|
||||
</ClientOnly>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
state:
|
||||
date: 2021-02-28T16:20:00.000Z
|
||||
---
|
||||
|
||||
### DateTimepicker
|
||||
|
||||
`<VCalendar />` can be turned into a date range picker if needed. Check the
|
||||
code example for more details about usage.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const date = ref(new Date())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<VDatePicker v-model="date" mode="dateTime">
|
||||
<template #default="{ inputValue, inputEvents }">
|
||||
<VField>
|
||||
<VControl icon="lucide:calendar">
|
||||
<input
|
||||
class="input v-input"
|
||||
type="text"
|
||||
:value="inputValue"
|
||||
v-on="inputEvents"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
</VDatePicker>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<ClientOnly>
|
||||
<VDatePicker v-model="frontmatter.state.date" color="green" mode="dateTime">
|
||||
<template #default="{ inputValue, inputEvents }">
|
||||
<VField>
|
||||
<VControl icon="lucide:calendar">
|
||||
<input class="input v-input" type="text" :value="inputValue" v-on="inputEvents" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
</VDatePicker>
|
||||
</ClientOnly>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
state:
|
||||
date: 2021-02-28T16:20:00.000Z
|
||||
---
|
||||
|
||||
### Timepicker
|
||||
|
||||
`<VCalendar />` can be turned into a simple time picker if needed.
|
||||
You can add the `is24hr` attribute to display hours in 24h format.
|
||||
Check the code example for more details about usage.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const date = ref(null)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<VDatePicker
|
||||
v-model="date"
|
||||
mode="dateTime"
|
||||
is24hr
|
||||
>
|
||||
<template #default="{ inputValue, inputEvents }">
|
||||
<VField>
|
||||
<VControl icon="lucide:clock">
|
||||
<input
|
||||
class="input v-input"
|
||||
type="text"
|
||||
:value="inputValue"
|
||||
v-on="inputEvents"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
</VDatePicker>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<ClientOnly>
|
||||
<VDatePicker v-model="frontmatter.state.date" color="green" mode="time" is24hr>
|
||||
<template #default="{ inputValue, inputEvents }">
|
||||
<VField>
|
||||
<VControl icon="lucide:clock">
|
||||
<input class="input v-input" type="text" :value="inputValue" v-on="inputEvents" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
</VDatePicker>
|
||||
</ClientOnly>
|
||||
|
||||
<!--/example-->
|
||||
129
documentation/plugins/filepond/v-filepond-documentation.md
Normal file
129
documentation/plugins/filepond/v-filepond-documentation.md
Normal file
@@ -0,0 +1,129 @@
|
||||
---
|
||||
state:
|
||||
flipped: false
|
||||
---
|
||||
|
||||
### VFilePond
|
||||
|
||||
Vuero ships with the `<VFilePond />` component, a custom file upload component.
|
||||
It is based on the [FilePond](https://pqina.nl/filepond/) library.
|
||||
Check the code for more details.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const onAddFile = (error: any, fileInfo: any) => {
|
||||
if (error) {
|
||||
console.error(error)
|
||||
return
|
||||
}
|
||||
|
||||
const _file = fileInfo.file as File
|
||||
if (_file) {
|
||||
wizardData.logo = _file
|
||||
}
|
||||
}
|
||||
|
||||
const onRemoveFile = (error: any, fileInfo: any) => {
|
||||
if (error) {
|
||||
console.error(error)
|
||||
return
|
||||
}
|
||||
|
||||
console.log(fileInfo)
|
||||
|
||||
wizardData.logo = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField>
|
||||
<VControl>
|
||||
<VFilePond
|
||||
class="profile-filepond"
|
||||
name="profile_filepond"
|
||||
:chunk-retry-delays="[500, 1000, 3000]"
|
||||
label-idle="<i class='lnil lnil-cloud-upload'></i>"
|
||||
:accepted-file-types="['image/png', 'image/jpeg', 'image/gif']"
|
||||
:image-preview-height="140"
|
||||
:image-resize-target-width="140"
|
||||
:image-resize-target-height="140"
|
||||
image-crop-aspect-ratio="1:1"
|
||||
style-panel-layout="compact circle"
|
||||
style-load-indicator-position="center bottom"
|
||||
style-progress-indicator-position="right bottom"
|
||||
style-button-remove-item-position="left bottom"
|
||||
style-button-process-item-position="right bottom"
|
||||
@addfile="onAddFile"
|
||||
@removefile="onRemoveFile"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<VField grouped>
|
||||
<VControl>
|
||||
<VFilePond
|
||||
class="profile-filepond"
|
||||
name="profile_filepond"
|
||||
:chunk-retry-delays="[500, 1000, 3000]"
|
||||
label-idle="<i class='lnil lnil-cloud-upload'></i>"
|
||||
:accepted-file-types="['image/png', 'image/jpeg', 'image/gif']"
|
||||
:image-preview-height="140"
|
||||
:image-resize-target-width="140"
|
||||
:image-resize-target-height="140"
|
||||
image-crop-aspect-ratio="1:1"
|
||||
style-panel-layout="compact circle"
|
||||
style-load-indicator-position="center bottom"
|
||||
style-progress-indicator-position="right bottom"
|
||||
style-button-remove-item-position="left bottom"
|
||||
style-button-process-item-position="right bottom"
|
||||
/>
|
||||
</VControl>
|
||||
<VControl>
|
||||
<VFilePond
|
||||
size="small"
|
||||
class="profile-filepond"
|
||||
name="profile_filepond"
|
||||
:chunk-retry-delays="[500, 1000, 3000]"
|
||||
label-idle="<i class='lnil lnil-cloud-upload'></i>"
|
||||
:accepted-file-types="['image/png', 'image/jpeg', 'image/gif']"
|
||||
:image-preview-height="140"
|
||||
:image-resize-target-width="140"
|
||||
:image-resize-target-height="140"
|
||||
image-crop-aspect-ratio="1:1"
|
||||
style-panel-layout="compact circle"
|
||||
style-load-indicator-position="center bottom"
|
||||
style-progress-indicator-position="right bottom"
|
||||
style-button-remove-item-position="left bottom"
|
||||
style-button-process-item-position="right bottom"
|
||||
/>
|
||||
</VControl>
|
||||
<VControl>
|
||||
<VFilePond
|
||||
size="tiny"
|
||||
class="profile-filepond"
|
||||
name="profile_filepond"
|
||||
:chunk-retry-delays="[500, 1000, 3000]"
|
||||
label-idle="<i class='lnil lnil-cloud-upload'></i>"
|
||||
:accepted-file-types="['image/png', 'image/jpeg', 'image/gif']"
|
||||
:image-preview-height="140"
|
||||
:image-resize-target-width="140"
|
||||
:image-resize-target-height="140"
|
||||
image-crop-aspect-ratio="1:1"
|
||||
style-panel-layout="compact circle"
|
||||
style-load-indicator-position="center bottom"
|
||||
style-progress-indicator-position="right bottom"
|
||||
style-button-remove-item-position="left bottom"
|
||||
style-button-process-item-position="right bottom"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
disable_code: true
|
||||
slimscroll: true
|
||||
---
|
||||
|
||||
### VFilePond Props
|
||||
|
||||
Here is the props added for `<VFilePond />` component,
|
||||
you can check all options available on [filepond official documentation](https://pqina.nl/filepond/docs/patterns/api/filepond-instance/#properties):
|
||||
|
||||
| Props | Default | Type |
|
||||
| ----- | ------------------------------------- | --------------- |
|
||||
| size | <span class="is-string">`grey`</span> | `small`, `tiny` |
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
items:
|
||||
- src: http://via.placeholder.com/600x400
|
||||
thumbnail: http://via.placeholder.com/60x40
|
||||
w: 600
|
||||
h: 400
|
||||
alt: 'optional alt attribute for thumbnail image'
|
||||
- src: http://via.placeholder.com/1200x900
|
||||
thumbnail: http://via.placeholder.com/120x90
|
||||
w: 1200
|
||||
h: 900
|
||||
- src: http://via.placeholder.com/800x600
|
||||
thumbnail: http://via.placeholder.com/80x60
|
||||
w: 800
|
||||
h: 600
|
||||
---
|
||||
|
||||
### Curved Thumbnails
|
||||
|
||||
We wrote a custom Vue wrapper for the `Photo Swipe` library so it makes it easy
|
||||
for you to create image galleries seamlessly. Thumbnails border radius is
|
||||
configurable. Pass a value of `5` to the `thumbnailRadius` to show curved
|
||||
borders.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
{
|
||||
src: 'http://via.placeholder.com/600x400',
|
||||
thumbnail: 'http://via.placeholder.com/60x40',
|
||||
w: 600,
|
||||
h: 400,
|
||||
alt: 'optional alt attribute for thumbnail image',
|
||||
},
|
||||
{
|
||||
src: 'http://via.placeholder.com/1200x900',
|
||||
thumbnail: 'http://via.placeholder.com/120x90',
|
||||
w: 1200,
|
||||
h: 900,
|
||||
},
|
||||
{
|
||||
src: 'http://via.placeholder.com/800x600',
|
||||
thumbnail: 'http://via.placeholder.com/80x60',
|
||||
w: 800,
|
||||
h: 600,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPhotosSwipe :items="items" thumbnail-radius="5" />
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<VPhotosSwipe :items="frontmatter.items" thumbnailRadius="5" />
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,62 @@
|
||||
---
|
||||
items:
|
||||
- src: http://via.placeholder.com/600x400
|
||||
thumbnail: http://via.placeholder.com/60x40
|
||||
w: 600
|
||||
h: 400
|
||||
alt: 'optional alt attribute for thumbnail image'
|
||||
- src: http://via.placeholder.com/1200x900
|
||||
thumbnail: http://via.placeholder.com/120x90
|
||||
w: 1200
|
||||
h: 900
|
||||
- src: http://via.placeholder.com/800x600
|
||||
thumbnail: http://via.placeholder.com/80x60
|
||||
w: 800
|
||||
h: 600
|
||||
---
|
||||
|
||||
### Thumbnail Gallery
|
||||
|
||||
We wrote a custom Vue wrapper for the `Photo Swipe` library so it makes it easy
|
||||
for you to create image galleries seamlessly. Pass an array of `items` to
|
||||
generate your gallery.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
{
|
||||
src: 'http://via.placeholder.com/600x400',
|
||||
thumbnail: 'http://via.placeholder.com/60x40',
|
||||
w: 600,
|
||||
h: 400,
|
||||
alt: 'optional alt attribute for thumbnail image',
|
||||
},
|
||||
{
|
||||
src: 'http://via.placeholder.com/1200x900',
|
||||
thumbnail: 'http://via.placeholder.com/120x90',
|
||||
w: 1200,
|
||||
h: 900,
|
||||
},
|
||||
{
|
||||
src: 'http://via.placeholder.com/800x600',
|
||||
thumbnail: 'http://via.placeholder.com/80x60',
|
||||
w: 800,
|
||||
h: 600,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPhotosSwipe :items="items" />
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<VPhotosSwipe :items="frontmatter.items" />
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
items:
|
||||
- src: http://via.placeholder.com/600x400
|
||||
thumbnail: http://via.placeholder.com/200x150
|
||||
w: 600
|
||||
h: 400
|
||||
alt: 'optional alt attribute for thumbnail image'
|
||||
- src: http://via.placeholder.com/1200x900
|
||||
thumbnail: http://via.placeholder.com/200x150
|
||||
w: 1200
|
||||
h: 900
|
||||
- src: http://via.placeholder.com/800x600
|
||||
thumbnail: http://via.placeholder.com/200x150
|
||||
w: 800
|
||||
h: 600
|
||||
---
|
||||
|
||||
### Large Thumbnails
|
||||
|
||||
Thumbnails can be the size you want based on the thumbnail image real size.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<VPhotosSwipe :items="items" thumbnail-radius="5" />
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<VPhotosSwipe :items="frontmatter.items" thumbnail-radius="5" />
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
items:
|
||||
- src: http://via.placeholder.com/600x400
|
||||
thumbnail: http://via.placeholder.com/60x40
|
||||
w: 600
|
||||
h: 400
|
||||
alt: 'optional alt attribute for thumbnail image'
|
||||
- src: http://via.placeholder.com/1200x900
|
||||
thumbnail: http://via.placeholder.com/120x90
|
||||
w: 1200
|
||||
h: 900
|
||||
- src: http://via.placeholder.com/800x600
|
||||
thumbnail: http://via.placeholder.com/80x60
|
||||
w: 800
|
||||
h: 600
|
||||
---
|
||||
|
||||
### Rounded Thumbnails
|
||||
|
||||
We wrote a custom Vue wrapper for the `Photo Swipe` library so it makes it easy
|
||||
for you to create image galleries seamlessly. Thumbnails border radius is
|
||||
configurable. Pass a value of `full` to the `thumbnailRadius` to show curved
|
||||
borders.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
{
|
||||
src: 'http://via.placeholder.com/600x400',
|
||||
thumbnail: 'http://via.placeholder.com/60x40',
|
||||
w: 600,
|
||||
h: 400,
|
||||
alt: 'optional alt attribute for thumbnail image',
|
||||
},
|
||||
{
|
||||
src: 'http://via.placeholder.com/1200x900',
|
||||
thumbnail: 'http://via.placeholder.com/120x90',
|
||||
w: 1200,
|
||||
h: 900,
|
||||
},
|
||||
{
|
||||
src: 'http://via.placeholder.com/800x600',
|
||||
thumbnail: 'http://via.placeholder.com/80x60',
|
||||
w: 800,
|
||||
h: 600,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPhotosSwipe :items="items" thumbnail-radius="full" />
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<VPhotosSwipe :items="frontmatter.items" thumbnail-radius="full" />
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
state:
|
||||
value: ''
|
||||
---
|
||||
|
||||
### VIMaskInput
|
||||
|
||||
Vuero ships with the `<VIMaskInput />` component, a wrapper arround the great
|
||||
[imask javascript library](https://imask.js.org/).
|
||||
Check the code for more details.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }">
|
||||
<VControl>
|
||||
<VIMaskInput
|
||||
:id="id"
|
||||
v-model="value"
|
||||
autocomplete="cc-csc"
|
||||
class="input"
|
||||
:options="{
|
||||
mask: '000',
|
||||
}"
|
||||
placeholder="3 digits code"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<VField v-slot="{ id }">
|
||||
<VControl>
|
||||
<v-i-mask-input
|
||||
:id="id"
|
||||
v-model="frontmatter.state.value"
|
||||
autocomplete="cc-csc"
|
||||
class="input"
|
||||
:options="{
|
||||
mask: '000',
|
||||
}"
|
||||
placeholder="3 digits code"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
|
||||
<!--/example-->
|
||||
@@ -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-->
|
||||
47
documentation/plugins/notyf/notyf-blue-documentation.md
Normal file
47
documentation/plugins/notyf/notyf-blue-documentation.md
Normal file
@@ -0,0 +1,47 @@
|
||||
### Blue toast
|
||||
|
||||
Bside the two native types, `Notyf` allows you to create custom toast types.
|
||||
You can change all the available option defaults, like `position` or `duration`.
|
||||
You can configure a new toast type and even assign the icon of your choice.
|
||||
Check the code example for more details.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Notyf } from 'notyf'
|
||||
|
||||
const notyf = new Notyf({
|
||||
duration: 2000,
|
||||
position: {
|
||||
x: 'right',
|
||||
y: 'bottom',
|
||||
},
|
||||
types: [
|
||||
{
|
||||
type: 'blue',
|
||||
background: themeColors.blue,
|
||||
icon: {
|
||||
className: 'fas fa-check',
|
||||
tagName: 'i',
|
||||
text: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
const blueToast = () => {
|
||||
notyf.open({
|
||||
type: 'blue',
|
||||
message: 'This is some useful information that you might need.',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VButton bold @click="blueToast">
|
||||
Blue Toast
|
||||
</VButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
27
documentation/plugins/notyf/notyf-error-documentation.md
Normal file
27
documentation/plugins/notyf/notyf-error-documentation.md
Normal file
@@ -0,0 +1,27 @@
|
||||
### Error toast
|
||||
|
||||
Vuero is integrated with `Notyf`, a dead simple vanilla javascript
|
||||
toasting library. You can check the plugin documentation on
|
||||
<a href="https://github.com/caroso1222/notyf" target="_blank">Github</a>.
|
||||
The success toast is one the 2 notyf default toasts.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Notyf } from 'notyf'
|
||||
|
||||
const notyf = new Notyf()
|
||||
const errorToast = () => {
|
||||
notyf.error('Looks like something went wrong')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VButton bold @click="errorToast">
|
||||
Error Toast
|
||||
</VButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
47
documentation/plugins/notyf/notyf-green-documentation.md
Normal file
47
documentation/plugins/notyf/notyf-green-documentation.md
Normal file
@@ -0,0 +1,47 @@
|
||||
### Green toast
|
||||
|
||||
Bside the two native types, `Notyf` allows you to create custom toast types.
|
||||
You can change all the available option defaults, like `position` or `duration`.
|
||||
You can configure a new toast type and even assign the icon of your choice.
|
||||
Check the code example for more details.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Notyf } from 'notyf'
|
||||
|
||||
const notyf = new Notyf({
|
||||
duration: 2000,
|
||||
position: {
|
||||
x: 'right',
|
||||
y: 'bottom',
|
||||
},
|
||||
types: [
|
||||
{
|
||||
type: 'green',
|
||||
background: themeColors.green,
|
||||
icon: {
|
||||
className: 'fas fa-check',
|
||||
tagName: 'i',
|
||||
text: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
const greenToast = () => {
|
||||
notyf.open({
|
||||
type: 'green',
|
||||
message: 'This is some useful information that you might need.',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VButton bold @click="greenToast">
|
||||
Green Toast
|
||||
</VButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
47
documentation/plugins/notyf/notyf-info-documentation.md
Normal file
47
documentation/plugins/notyf/notyf-info-documentation.md
Normal file
@@ -0,0 +1,47 @@
|
||||
### Info toast
|
||||
|
||||
Bside the two native types, `Notyf` allows you to create custom toast types.
|
||||
You can change all the available option defaults, like `position` or `duration`.
|
||||
You can configure a new toast type and even assign the icon of your choice.
|
||||
Check the code example for more details.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Notyf } from 'notyf'
|
||||
|
||||
const notyf = new Notyf({
|
||||
duration: 2000,
|
||||
position: {
|
||||
x: 'right',
|
||||
y: 'bottom',
|
||||
},
|
||||
types: [
|
||||
{
|
||||
type: 'info',
|
||||
background: themeColors.info,
|
||||
icon: {
|
||||
className: 'fas fa-info-circle',
|
||||
tagName: 'i',
|
||||
text: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
const infoToast = () => {
|
||||
notyf.open({
|
||||
type: 'info',
|
||||
message: 'This is some useful information that you might need.',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VButton bold @click="infoToast">
|
||||
Info Toast
|
||||
</VButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
47
documentation/plugins/notyf/notyf-orange-documentation.md
Normal file
47
documentation/plugins/notyf/notyf-orange-documentation.md
Normal file
@@ -0,0 +1,47 @@
|
||||
### Orange toast
|
||||
|
||||
Beside the two native types, `Notyf` allows you to create custom toast types.
|
||||
You can change all the available option defaults, like `position` or `duration`.
|
||||
You can configure a new toast type and even assign the icon of your choice.
|
||||
Check the code example for more details.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Notyf } from 'notyf'
|
||||
|
||||
const notyf = new Notyf({
|
||||
duration: 2000,
|
||||
position: {
|
||||
x: 'right',
|
||||
y: 'bottom',
|
||||
},
|
||||
types: [
|
||||
{
|
||||
type: 'orange',
|
||||
background: themeColors.orange,
|
||||
icon: {
|
||||
className: 'fas fa-check',
|
||||
tagName: 'i',
|
||||
text: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
const orangeToast = () => {
|
||||
notyf.open({
|
||||
type: 'orange',
|
||||
message: 'This is some useful information that you might need.',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VButton bold @click="orangeToast">
|
||||
Orange Toast
|
||||
</VButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
47
documentation/plugins/notyf/notyf-primary-documentation.md
Normal file
47
documentation/plugins/notyf/notyf-primary-documentation.md
Normal file
@@ -0,0 +1,47 @@
|
||||
### Primary toast
|
||||
|
||||
Bside the two native types, `Notyf` allows you to create custom toast types.
|
||||
You can change all the available option defaults, like `position` or `duration`.
|
||||
You can configure a new toast type and even assign the icon of your choice.
|
||||
Check the code example for more details.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Notyf } from 'notyf'
|
||||
|
||||
const notyf = new Notyf({
|
||||
duration: 2000,
|
||||
position: {
|
||||
x: 'right',
|
||||
y: 'bottom',
|
||||
},
|
||||
types: [
|
||||
{
|
||||
type: 'primary',
|
||||
background: themeColors.lime,
|
||||
icon: {
|
||||
className: 'fas fa-check',
|
||||
tagName: 'i',
|
||||
text: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
const primaryToast = () => {
|
||||
notyf.open({
|
||||
type: 'primary',
|
||||
message: 'This is some useful information that you might need.',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VButton bold @click="primaryToast">
|
||||
Primary Toast
|
||||
</VButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
47
documentation/plugins/notyf/notyf-purple-documentation.md
Normal file
47
documentation/plugins/notyf/notyf-purple-documentation.md
Normal file
@@ -0,0 +1,47 @@
|
||||
### Purple toast
|
||||
|
||||
Bside the two native types, `Notyf` allows you to create custom toast types.
|
||||
You can change all the available option defaults, like `position` or `duration`.
|
||||
You can configure a new toast type and even assign the icon of your choice.
|
||||
Check the code example for more details.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Notyf } from 'notyf'
|
||||
|
||||
const notyf = new Notyf({
|
||||
duration: 2000,
|
||||
position: {
|
||||
x: 'right',
|
||||
y: 'bottom',
|
||||
},
|
||||
types: [
|
||||
{
|
||||
type: 'purple',
|
||||
background: themeColors.purple,
|
||||
icon: {
|
||||
className: 'fas fa-check',
|
||||
tagName: 'i',
|
||||
text: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
const purpleToast = () => {
|
||||
notyf.open({
|
||||
type: 'purple',
|
||||
message: 'This is some useful information that you might need.',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VButton bold @click="purpleToast">
|
||||
Purple Toast
|
||||
</VButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
27
documentation/plugins/notyf/notyf-success-documentation.md
Normal file
27
documentation/plugins/notyf/notyf-success-documentation.md
Normal file
@@ -0,0 +1,27 @@
|
||||
### Success toast
|
||||
|
||||
Vuero is integrated with `Notyf`, a dead simple vanilla javascript
|
||||
toasting library. You can check the plugin documentation on
|
||||
<a href="https://github.com/caroso1222/notyf" target="_blank">Github</a>.
|
||||
The success toast is one the 2 notyf default toasts.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Notyf } from 'notyf'
|
||||
|
||||
const notyf = new Notyf()
|
||||
const successToast = () => {
|
||||
notyf.primary('Your changes have been successfully saved!')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VButton bold @click="successToast">
|
||||
Success Toast
|
||||
</VButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
47
documentation/plugins/notyf/notyf-warning-documentation.md
Normal file
47
documentation/plugins/notyf/notyf-warning-documentation.md
Normal file
@@ -0,0 +1,47 @@
|
||||
### Warning toast
|
||||
|
||||
Bside the two native types, `Notyf` allows you to create custom toast types.
|
||||
You can change all the available option defaults, like `position` or `duration`.
|
||||
You can configure a new toast type and even assign the icon of your choice.
|
||||
Check the code example for more details.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Notyf } from 'notyf'
|
||||
|
||||
const notyf = new Notyf({
|
||||
duration: 2000,
|
||||
position: {
|
||||
x: 'right',
|
||||
y: 'bottom',
|
||||
},
|
||||
types: [
|
||||
{
|
||||
type: 'warning',
|
||||
background: themeColors.warning,
|
||||
icon: {
|
||||
className: 'fas fa-check',
|
||||
tagName: 'i',
|
||||
text: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
const warningToast = () => {
|
||||
notyf.open({
|
||||
type: 'warning',
|
||||
message: 'This is some useful information that you might need.',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VButton bold @click="warningToast">
|
||||
Warning Toast
|
||||
</VButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
@@ -0,0 +1,92 @@
|
||||
### Avatar popover
|
||||
|
||||
Popovers can hold any type of content, including existing Vuero components. You
|
||||
can easily add a `<VAvatar />` inside your popover.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Tippy>
|
||||
<VButton>Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" />
|
||||
<h4 class="dark-inverted">
|
||||
Alice C.
|
||||
</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="buttons">
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small"/>
|
||||
<h4 class="dark-inverted">Alice C.</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VAvatar picture="/images/avatars/svg/vuero-1.svg" size="small" squared />
|
||||
<h4 class="dark-inverted">Erik K.</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VAvatar size="small" color="info" initials="JL"/>
|
||||
<h4 class="dark-inverted">John L.</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VAvatar size="small" color="h-purple" initials="SC" squared/>
|
||||
<h4 class="dark-inverted">Sara C.</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
64
documentation/plugins/popover/popover-base-documentation.md
Normal file
64
documentation/plugins/popover/popover-base-documentation.md
Normal file
@@ -0,0 +1,64 @@
|
||||
### Text popover
|
||||
|
||||
Vuero ships with the `<Tippy />` component from the `VTippy` library. It lets
|
||||
you create any type of popover with custom content. You can set the trigger
|
||||
to be a click event using the `trigger="click"` prop.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="buttons">
|
||||
<Tippy>
|
||||
<VButton>Hover me!</VButton>
|
||||
<template #content>
|
||||
Tooltip content
|
||||
</template>
|
||||
</Tippy>
|
||||
|
||||
<Tippy trigger="click">
|
||||
<VButton>Click me!</VButton>
|
||||
<template #content>
|
||||
Tooltip content
|
||||
</template>
|
||||
</Tippy>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="buttons">
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Click Popover</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eam
|
||||
tum adesse, cum dolor omnis absit</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy trigger="click">
|
||||
<VButton class="mx-1">Click me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Click Popover</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Eam tum adesse, cum dolor omnis absit</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
user1:
|
||||
avatar: https://media.cssninja.io/content/avatars/19.jpg
|
||||
badge: /images/icons/flags/germany.svg
|
||||
username: Greta K.
|
||||
location: Los Angeles, CA
|
||||
position: Sales Manager
|
||||
bio: This is a nice user description that we can use as demo content.
|
||||
user2:
|
||||
avatar: /images/avatars/svg/vuero-1.svg
|
||||
badge: /images/icons/flags/united-states-of-america.svg
|
||||
username: Erik K.
|
||||
location: Las Begas, NV
|
||||
position: Product Manager
|
||||
bio: This is a nice user description that we can use as demo content.
|
||||
user3:
|
||||
avatar: https://media.cssninja.io/content/avatars/7.jpg
|
||||
badge: /images/icons/flags/united-states-of-america.svg
|
||||
username: Alice C.
|
||||
location: Los Angeles, CA
|
||||
position: Software Engineer
|
||||
bio: This is a nice user description that we can use as demo content.
|
||||
---
|
||||
|
||||
### Profile popover
|
||||
|
||||
Popovers can be used to display more complex information like a user profile.
|
||||
We-ve provided an example that uses an internal component to display a user
|
||||
profile. You can also make the popover interactive with the `interactive`
|
||||
prop.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const user = {
|
||||
avatar: 'https://media.cssninja.io/content/avatars/19.jpg',
|
||||
badge: '/images/icons/flags/germany.svg',
|
||||
username: 'Greta K.',
|
||||
location: 'Los Angeles, CA',
|
||||
position: 'Sales Manager',
|
||||
bio: 'This is a nice user description that we can use as demo content.',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tippy
|
||||
class="has-help-cursor"
|
||||
interactive
|
||||
:offset="[0, 30]"
|
||||
>
|
||||
<VAvatar :picture="user.avatar" />
|
||||
<template #content>
|
||||
<UserPopoverContent :user="user" />
|
||||
</template>
|
||||
</Tippy>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div>
|
||||
<Tippy class="mx-1" interactive :offset="[0, 30]">
|
||||
<VAvatar :picture="frontmatter.user1.avatar" />
|
||||
<template #content>
|
||||
<UserPopoverContent :user="frontmatter.user1" />
|
||||
</template>
|
||||
</Tippy>
|
||||
|
||||
<Tippy class="mx-1" interactive :offset="[0, 30]">
|
||||
<VAvatar :picture="frontmatter.user2.avatar" />
|
||||
<template #content>
|
||||
<UserPopoverContent :user="frontmatter.user2" />
|
||||
</template>
|
||||
</Tippy>
|
||||
|
||||
<Tippy class="mx-1" interactive :offset="[0, 30]">
|
||||
<VAvatar :picture="frontmatter.user3.avatar" />
|
||||
<template #content>
|
||||
<UserPopoverContent :user="frontmatter.user3" />
|
||||
</template>
|
||||
</Tippy>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
102
documentation/plugins/popover/popover-icon-documentation.md
Normal file
102
documentation/plugins/popover/popover-icon-documentation.md
Normal file
@@ -0,0 +1,102 @@
|
||||
### Icon popover
|
||||
|
||||
Popovers can hold any type of content, including existing Vuero components. You
|
||||
can easily add a `<VIconBox />` inside your popover.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Tippy>
|
||||
<VButton>Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VIconBox size="small" color="primary">
|
||||
<i class="lnil lnil-crown-alt-1" />
|
||||
</VIconBox>
|
||||
<h4 class="dark-inverted">
|
||||
Hover Popover
|
||||
</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="buttons">
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VIconBox size="small" color="primary">
|
||||
<VIcon icon="lucide:x"/>
|
||||
</VIconBox>
|
||||
<h4 class="dark-inverted">Hover Popover</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VIconBox size="small" color="info">
|
||||
<i class="lnil lnil-crown-alt-1"></i>
|
||||
</VIconBox>
|
||||
<h4 class="dark-inverted">Hover Popover</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VIconBox size="small" color="orange">
|
||||
<i class="lnil lnil-crown-alt-1"></i>
|
||||
</VIconBox>
|
||||
<h4 class="dark-inverted">Hover Popover</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VIconBox size="small" color="green">
|
||||
<i class="lnil lnil-crown-alt-1"></i>
|
||||
</VIconBox>
|
||||
<h4 class="dark-inverted">Hover Popover</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
140
documentation/plugins/popover/popover-position-documentation.md
Normal file
140
documentation/plugins/popover/popover-position-documentation.md
Normal file
@@ -0,0 +1,140 @@
|
||||
### Popover positions
|
||||
|
||||
`<Tippy />` popovers can have different positions. Use the `placement` props to
|
||||
set your popover placement. Available options are `top`, `top-end`, `bottom`,
|
||||
`bottom-end`, `left`, `left-end`, `right` and `right-end`.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Tippy placement="top">
|
||||
<VButton>Top</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">
|
||||
Top
|
||||
</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="buttons">
|
||||
<Tippy placement="top">
|
||||
<VButton class="mx-1">Top</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Top</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy placement="top-end">
|
||||
<VButton class="mx-1">Top End</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Top End</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy placement="bottom">
|
||||
<VButton class="mx-1">Bottom</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Bottom</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy placement="bottom-end">
|
||||
<VButton class="mx-1">Bottom End</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Bottom End</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy placement="left">
|
||||
<VButton class="mx-1">Left</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Left</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy placement="left-end">
|
||||
<VButton class="mx-1">Left End</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Left End</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy placement="right">
|
||||
<VButton class="mx-1">Right</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Right</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy placement="right-end">
|
||||
<VButton class="mx-1">Right End</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Right End</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
44
documentation/plugins/slider/slider-base-documentation.md
Normal file
44
documentation/plugins/slider/slider-base-documentation.md
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
state:
|
||||
value: 0
|
||||
---
|
||||
|
||||
### Rounded tooltip
|
||||
|
||||
Vuero provides a customisable `<Slider />` component. You can check the plugin
|
||||
documentation on [Github](https://github.com/vueform/slider). Use the
|
||||
`has-rounded-tooltip`class on the `<VField />` component to show a rounded
|
||||
tooltip.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const value = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="has-rounded-tooltip">
|
||||
<VControl>
|
||||
<Slider :id="id" v-model="value" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns mt-2">
|
||||
<div class="column is-6">
|
||||
<VField v-slot="{ id }" class="pt-5 px-4 has-rounded-tooltip">
|
||||
<VControl>
|
||||
<Slider :id="id" v-model="frontmatter.state.value" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
67
documentation/plugins/slider/slider-color-documentation.md
Normal file
67
documentation/plugins/slider/slider-color-documentation.md
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
state:
|
||||
value1: 78
|
||||
value2: 24
|
||||
value3: 52
|
||||
value4: 61
|
||||
---
|
||||
|
||||
### Slider colors
|
||||
|
||||
The `<Slider />` component supports multiple colors. The default color is the
|
||||
theme `$primary` color. Available color classes modifiers are: `is-slider-info`,
|
||||
`is-slider-success`, `is-slider-warning`, `is-slider-danger`.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const value = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="has-rounded-tooltip is-slider-info">
|
||||
<VControl>
|
||||
<Slider :id="id" v-model="value" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-6">
|
||||
<VField v-slot="{ id }" class="pt-6 px-4 has-rounded-tooltip is-slider-info">
|
||||
<VControl>
|
||||
<Slider :id="id" v-model="frontmatter.state.value1" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<VField v-slot="{ id }" class="pt-6 px-4 has-rounded-tooltip is-slider-success">
|
||||
<VControl>
|
||||
<Slider :id="id" v-model="frontmatter.state.value2" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<VField v-slot="{ id }" class="pt-6 px-4 has-rounded-tooltip is-slider-warning">
|
||||
<VControl>
|
||||
<Slider :id="id" v-model="frontmatter.state.value3" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<VField v-slot="{ id }" class="pt-6 px-4 has-rounded-tooltip is-slider-danger">
|
||||
<VControl>
|
||||
<Slider :id="id" v-model="frontmatter.state.value4" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
42
documentation/plugins/slider/slider-curved-documentation.md
Normal file
42
documentation/plugins/slider/slider-curved-documentation.md
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
state:
|
||||
value: 54
|
||||
---
|
||||
|
||||
### Curved tooltip
|
||||
|
||||
Use the `has-curved-tooltip` class on the `<VField />` component to show a
|
||||
curved shaped tooltip. Supports bigger values than the rounded tooltip.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const value = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="has-curved-tooltip">
|
||||
<VControl>
|
||||
<Slider :id="id" v-model="value" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns mt-2">
|
||||
<div class="column is-6">
|
||||
<VField v-slot="{ id }" class="pt-5 px-4 has-curved-tooltip">
|
||||
<VControl>
|
||||
<Slider :id="id" v-model="frontmatter.state.value" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
53
documentation/plugins/slider/slider-format-documentation.md
Normal file
53
documentation/plugins/slider/slider-format-documentation.md
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
state:
|
||||
value: 54
|
||||
---
|
||||
|
||||
### Tooltip format
|
||||
|
||||
The `<Slider />` component allows to pass a formatting function to its `format`
|
||||
property. You can return the tooltip value with the format that you want.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const value = ref(54)
|
||||
const format = (value) => {
|
||||
return `${value}%`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="has-curved-tooltip">
|
||||
<VControl>
|
||||
<Slider
|
||||
:id="id"
|
||||
v-model="value"
|
||||
:format="format"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns mt-2">
|
||||
<div class="column is-6">
|
||||
<VField v-slot="{ id }" class="pt-5 px-4 has-curved-tooltip">
|
||||
<VControl>
|
||||
<Slider
|
||||
:id="id"
|
||||
v-model="frontmatter.state.value"
|
||||
:format="(value) => value + '%'"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
56
documentation/plugins/slider/slider-merging-documentation.md
Normal file
56
documentation/plugins/slider/slider-merging-documentation.md
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
state:
|
||||
value:
|
||||
- 20
|
||||
- 50
|
||||
- 70
|
||||
merge: 10
|
||||
---
|
||||
|
||||
### Tooltip merging
|
||||
|
||||
The `<Slider />` component can automatically merge multiple tooltips when they
|
||||
reach a certain threshold. Specify a `merge` value and pass it to the
|
||||
component's `:merge` prop.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const value = ref([20, 50, 70])
|
||||
const merge = 10
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }">
|
||||
<VControl>
|
||||
<Slider
|
||||
:id="id"
|
||||
v-model="value"
|
||||
:merge="merge"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns mt-2">
|
||||
<div class="column is-6">
|
||||
<VField v-slot="{ id }" class="pt-5 px-4 is-slider-info">
|
||||
<VControl>
|
||||
<Slider
|
||||
:id="id"
|
||||
v-model="frontmatter.state.value"
|
||||
:merge="frontmatter.state.merge"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
state:
|
||||
value:
|
||||
- 16
|
||||
- 62
|
||||
---
|
||||
|
||||
### Multiple handles
|
||||
|
||||
The `<Slider />` component can render multiple tooltips when passing an `array`
|
||||
to its `v-model` property.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const value = ref([16, 62])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="has-rounded-tooltip">
|
||||
<VControl>
|
||||
<Slider :id="id" v-model="value" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns mt-2">
|
||||
<div class="column is-6">
|
||||
<VField v-slot="{ id }" class="pt-5 px-4 has-rounded-tooltip">
|
||||
<VControl>
|
||||
<Slider :id="id" v-model="frontmatter.state.value" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
42
documentation/plugins/slider/slider-squared-documentation.md
Normal file
42
documentation/plugins/slider/slider-squared-documentation.md
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
state:
|
||||
value: 36
|
||||
---
|
||||
|
||||
### Squared tooltip
|
||||
|
||||
Use the `has-squared-tooltip` class on the `<VField />` component to show a
|
||||
square shaped tooltip. Supports bigger values than the rounded tooltip.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const value = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="has-squared-tooltip">
|
||||
<VControl>
|
||||
<Slider :id="id" v-model="value" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns mt-2">
|
||||
<div class="column is-6">
|
||||
<VField v-slot="{ id }" class="pt-5 px-4 has-squared-tooltip">
|
||||
<VControl>
|
||||
<Slider :id="id" v-model="frontmatter.state.value" />
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
34
documentation/plugins/video/video-base-documentation.md
Normal file
34
documentation/plugins/video/video-base-documentation.md
Normal file
@@ -0,0 +1,34 @@
|
||||
### Video Player 1:1
|
||||
|
||||
We wrote a custom vue wrapper for the `Plyr` video player vanilla js library. It
|
||||
is really easy to setup. Change the video ratio using the `ratio` prop.
|
||||
Available ratios are `square`, `4by3` and `16by9`.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<VPlyr
|
||||
ratio="square"
|
||||
source="https://www.youtube.com/embed/lE5VNpP8JqA?modestbranding=1&rel=0&showinfo=0"
|
||||
poster="/video/poster-1c.jpg"
|
||||
embed
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div>
|
||||
<VPlyr class="ml-1"
|
||||
ratio="square"
|
||||
source="https://www.youtube.com/embed/lE5VNpP8JqA?modestbranding=1&rel=0&showinfo=0"
|
||||
poster="/video/poster-1c.jpg"
|
||||
reversed
|
||||
embed
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
33
documentation/plugins/video/video-four-documentation.md
Normal file
33
documentation/plugins/video/video-four-documentation.md
Normal file
@@ -0,0 +1,33 @@
|
||||
### Video Player 4:3
|
||||
|
||||
We wrote a custom vue wrapper for the `Plyr` video player vanilla js library. It
|
||||
is really easy to setup. Change the video ratio using the `ratio` prop.
|
||||
Available ratios are `square`, `4by3` and `16by9`.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<VPlyr
|
||||
ratio="4by3"
|
||||
source="https://www.youtube.com/embed/lE5VNpP8JqA?modestbranding=1&rel=0&showinfo=0"
|
||||
poster="/video/poster-3.jpg"
|
||||
embed
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div>
|
||||
<VPlyr class="ml-1"
|
||||
ratio="4by3"
|
||||
source="https://www.youtube.com/embed/lE5VNpP8JqA?modestbranding=1&rel=0&showinfo=0"
|
||||
poster="/video/poster-3.jpg"
|
||||
embed
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
33
documentation/plugins/video/video-sixteen-documentation.md
Normal file
33
documentation/plugins/video/video-sixteen-documentation.md
Normal file
@@ -0,0 +1,33 @@
|
||||
### Video Player 16:9
|
||||
|
||||
We wrote a custom vue wrapper for the `Plyr` video player vanilla js library. It
|
||||
is really easy to setup. Change the video ratio using the `ratio` prop.
|
||||
Available ratios are `square`, `4by3` and `16by9`.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<VPlyr
|
||||
ratio="16by9"
|
||||
source="https://www.youtube.com/embed/lE5VNpP8JqA?modestbranding=1&rel=0&showinfo=0"
|
||||
poster="/video/poster-2c.jpg"
|
||||
embed
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div>
|
||||
<VPlyr class="ml-1"
|
||||
ratio="16by9"
|
||||
source="https://www.youtube.com/embed/lE5VNpP8JqA?modestbranding=1&rel=0&showinfo=0"
|
||||
poster="/video/poster-2c.jpg"
|
||||
embed
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
Reference in New Issue
Block a user