Skip to content

Commit be8ce28

Browse files
adambereczadamberecz
committed
docs: readme update
1 parent db99615 commit be8ce28

File tree

1 file changed

+66
-37
lines changed

1 file changed

+66
-37
lines changed

‎README.md‎

Lines changed: 66 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -161,11 +161,12 @@ Learn more: [https://vueform.com](https://vueform.com)
161161
- [Default values that are not among the options using allowAbsent: true](#default-values-that-are-not-among-the-options-using-allow-absent)
162162
- [Manage created tag asynchronously](#manage-created-tag-asynchronously)
163163
- [Load async options from API on open with infinite scroll](#load-async-options-from-api-on-open-with-infinite-scroll)
164+
- [Multiselect with localized texts](#multiselect-with-localized-texts)
164165
- [License](#license)
165166

166167
## Demo
167168

168-
Check out our <a href="https://jsfiddle.net/t421d7cg/" target="_blank">demo</a>.
169+
Check out our <a href="https://jsfiddle.net/xajub20o/" target="_blank">demo</a>.
169170

170171
## Installation
171172

@@ -175,7 +176,7 @@ npm install @vueform/multiselect
175176

176177
## Using with Vue 3
177178

178-
``` vue
179+
```vue
179180
<template>
180181
<div>
181182
<Multiselect
@@ -210,7 +211,7 @@ npm install @vueform/multiselect
210211

211212
## Using with Vue 2
212213

213-
``` vue
214+
```vue
214215
<template>
215216
<div>
216217
<Multiselect
@@ -510,7 +511,7 @@ Override them globally:
510511

511512
Or on an instance level:
512513

513-
``` vue
514+
```vue
514515
<Multiselect
515516
v-model="value"
516517
:options="options"
@@ -566,7 +567,7 @@ module.exports = {
566567

567568
Then you need to import `themes/tailwind.css` to you main component:
568569

569-
``` vue
570+
```vue
570571
<template>
571572
<div id="app">
572573
<Multiselect ... />
@@ -586,7 +587,7 @@ Then you need to import `themes/tailwind.css` to you main component:
586587

587588
Alternatively you can define class names directly by passing them to the `Multiselect` component via `classes` property. When using this approach you don't need to import `tailwind.css`. Here's a default styling for Tailwind CSS (the same included in `tailwind.css`):
588589

589-
``` vue
590+
```vue
590591
<Multiselect ... :classes="{
591592
container: 'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-300 rounded bg-white text-base leading-snug outline-none',
592593
containerDisabled: 'cursor-default bg-gray-100',
@@ -666,18 +667,18 @@ In case you need to override the same type of utility you might use [@neojp/tail
666667

667668
### Single select
668669

669-
``` vue
670+
```vue
670671
<Multiselect
671672
v-model="value"
672673
:options="['Batman', 'Robin', 'Joker']"
673674
/>
674675
```
675676

676-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #1</a>
677+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #1</a>
677678

678679
### Multiselect with object options
679680

680-
``` vue
681+
```vue
681682
<Multiselect
682683
v-model="value"
683684
mode="multiple"
@@ -690,11 +691,11 @@ In case you need to override the same type of utility you might use [@neojp/tail
690691
/>
691692
```
692693

693-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #2</a>
694+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #2</a>
694695

695696
### Multiselect with disabled options
696697

697-
``` vue
698+
```vue
698699
<Multiselect
699700
v-model="value"
700701
mode="multiple"
@@ -707,11 +708,11 @@ In case you need to override the same type of utility you might use [@neojp/tail
707708
/>
708709
```
709710

710-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #3</a>
711+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #3</a>
711712

712713
### Multiselect with groups
713714

714-
``` vue
715+
```vue
715716
<Multiselect
716717
v-model="value"
717718
mode="multiple"
@@ -730,11 +731,11 @@ In case you need to override the same type of utility you might use [@neojp/tail
730731
/>
731732
```
732733

733-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #4</a>
734+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #4</a>
734735

735736
### Tags with search, create and array of objects options
736737

737-
``` vue
738+
```vue
738739
<Multiselect
739740
v-model="value"
740741
mode="tags"
@@ -749,11 +750,11 @@ In case you need to override the same type of utility you might use [@neojp/tail
749750
/>
750751
```
751752

752-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #5</a>
753+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #5</a>
753754

754755
### Autocomplete with async options
755756

756-
``` vue
757+
```vue
757758
<Multiselect
758759
v-model="value"
759760
placeholder="Choose a programming language"
@@ -768,11 +769,11 @@ In case you need to override the same type of utility you might use [@neojp/tail
768769
/>
769770
```
770771

771-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #6</a>
772+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #6</a>
772773

773774
### Tags with async options
774775

775-
``` vue
776+
```vue
776777
<Multiselect
777778
v-model="value"
778779
mode="tags"
@@ -789,11 +790,11 @@ In case you need to override the same type of utility you might use [@neojp/tail
789790
/>
790791
```
791792

792-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #7</a>
793+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #7</a>
793794

794795
### Select with custom options slot
795796

796-
``` vue
797+
```vue
797798
<Multiselect
798799
v-model="value"
799800
placeholder="Select your character"
@@ -817,11 +818,11 @@ In case you need to override the same type of utility you might use [@neojp/tail
817818
818819
```
819820

820-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #8</a>
821+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #8</a>
821822

822823
### Multiselect with custom label slot
823824

824-
``` vue
825+
```vue
825826
<Multiselect
826827
v-model="value"
827828
mode="multiple"
@@ -842,11 +843,11 @@ In case you need to override the same type of utility you might use [@neojp/tail
842843
843844
```
844845

845-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #9</a>
846+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #9</a>
846847

847848
### Tags with custom tags slot
848849

849-
``` vue
850+
```vue
850851
<template>
851852
<Multiselect
852853
v-model="value"
@@ -913,14 +914,14 @@ In case you need to override the same type of utility you might use [@neojp/tail
913914
</style>
914915
```
915916

916-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #10</a>
917+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #10</a>
917918

918919

919920
### Async options with default values
920921

921922
When using `resolveOnLoad: false` we can add default values with `object: true` and providing options as objects, containing both `label` and `value` props. This is because option list is not resolved when the component is mounted so Multiselect has no idea of what option labels should be if only plain values were provided.
922923

923-
``` vue
924+
```vue
924925
<template>
925926
<Multiselect
926927
mode="tags"
@@ -949,14 +950,14 @@ export default {
949950
</script>
950951
```
951952

952-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #11</a>
953+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #11</a>
953954

954955

955956
### Default values that are not among the options using `object: true`
956957

957958
If we want to add default values without having to add them to options list we can use `object: true` and provide them as objects, containing both `label` and `value` props. This is because if a plain value is not among Multiselect options it has no idea of what option label should be.
958959

959-
``` vue
960+
```vue
960961
<template>
961962
<Multiselect
962963
mode="tags"
@@ -985,14 +986,14 @@ export default {
985986
</script>
986987
```
987988

988-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #12</a>
989+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #12</a>
989990

990991

991992
### Default values that are not among the options using `allowAbsent: true`
992993

993994
If our async option list returns an **array of strings** we can use `allowAbsent: true` to allow value(s) which are not among the option list. The reason why this only works with an array of strings option list is because plain values like `Java` and `JavaScript` will use the same string for label and value.
994995

995-
``` vue
996+
```vue
996997
<template>
997998
<Multiselect
998999
mode="tags"
@@ -1021,14 +1022,14 @@ export default {
10211022
</script>
10221023
```
10231024

1024-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #13</a>
1025+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #13</a>
10251026

10261027

10271028
### Manage created tag asynchronously
10281029

10291030
Search is restricted by `regex` and tag creation is controlled by `onCreate(option, select$)`.
10301031

1031-
``` vue
1032+
```vue
10321033
<template>
10331034
<Multiselect
10341035
mode="tags"
@@ -1070,14 +1071,13 @@ export default {
10701071
</script>
10711072
```
10721073

1073-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #14</a>
1074-
1074+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #14</a>
10751075

10761076
### Load async options from API on open with infinite scroll
10771077

10781078
Options are not loaded initially, only when the users clicks the dropdown the first time. It also virtualizes the option list with `infinite: true` even large list of options can be loaded.
10791079

1080-
``` vue
1080+
```vue
10811081
<Multiselect
10821082
v-model="value"
10831083
mode="tags"
@@ -1102,7 +1102,36 @@ Options are not loaded initially, only when the users clicks the dropdown the fi
11021102
/>
11031103
```
11041104

1105-
<a href="https://jsfiddle.net/t421d7cg/" target="_blank">JSFiddle - Example #15</a>
1105+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #15</a>
1106+
1107+
### Multiselect with localized texts
1108+
1109+
Options are not loaded initially, only when the users clicks the dropdown the first time. It also virtualizes the option list with `infinite: true` even large list of options can be loaded.
1110+
1111+
```vue
1112+
<template>
1113+
<Multiselect
1114+
v-model="value"
1115+
locale="de"
1116+
fallback-locale="en"
1117+
:options="[
1118+
{ value: 1, label: { en: 'One', de: 'Eins' } },
1119+
{ value: 2, label: { en: 'Two' } },
1120+
{ value: 3, label: { es: 'Tres'} },
1121+
{ value: 4, label: 'Four' },
1122+
]"
1123+
/>
1124+
</template>
1125+
<script>
1126+
export default {
1127+
data: () => ({
1128+
value: [1]
1129+
})
1130+
}
1131+
</script>
1132+
```
1133+
1134+
<a href="https://jsfiddle.net/xajub20o/" target="_blank">JSFiddle - Example #16</a>
11061135

11071136
## License
11081137

0 commit comments

Comments
 (0)