Multiselect demo update
cagataycivici
parent
5400fe9ecc
commit
38ed215624
|
|
@ -11,23 +11,23 @@
|
|||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
||||
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select a City" />
|
||||
|
||||
<h5>Advanced with Templating and Filtering</h5>
|
||||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" class="multiselect-custom">
|
||||
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
|
||||
<template #value="slotProps">
|
||||
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
||||
<img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" />
|
||||
<span>{{option.brand}}</span>
|
||||
<div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
|
||||
<div>{{option.name}}</div>
|
||||
</div>
|
||||
<template v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
Select Brands
|
||||
Select Countries
|
||||
</template>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
<div class="country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
|
|
@ -44,18 +44,26 @@ import MultiSelectDoc from './MultiSelectDoc';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCars1: null,
|
||||
selectedCars2: null,
|
||||
cars: [
|
||||
{brand: 'Audi', value: 'Audi'},
|
||||
{brand: 'BMW', value: 'BMW'},
|
||||
{brand: 'Fiat', value: 'Fiat'},
|
||||
{brand: 'Honda', value: 'Honda'},
|
||||
{brand: 'Jaguar', value: 'Jaguar'},
|
||||
{brand: 'Mercedes', value: 'Mercedes'},
|
||||
{brand: 'Renault', value: 'Renault'},
|
||||
{brand: 'Volkswagen', value: 'Volkswagen'},
|
||||
{brand: 'Volvo', value: 'Volvo'}
|
||||
selectedCities: null,
|
||||
selectedCountries: null,
|
||||
cities: [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
],
|
||||
countries: [
|
||||
{name: 'Australia', code: 'AU'},
|
||||
{name: 'Brazil', code: 'BR'},
|
||||
{name: 'China', code: 'CN'},
|
||||
{name: 'Egypt', code: 'EG'},
|
||||
{name: 'France', code: 'FR'},
|
||||
{name: 'Germany', code: 'DE'},
|
||||
{name: 'India', code: 'IN'},
|
||||
{name: 'Japan', code: 'JP'},
|
||||
{name: 'Spain', code: 'ES'},
|
||||
{name: 'United States', code: 'US'}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
@ -76,32 +84,17 @@ export default {
|
|||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
.p-multiselect-car-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-right: .5rem;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-car-token {
|
||||
.country-item-value {
|
||||
padding: .25rem .5rem;
|
||||
margin: 0 0.286rem 0 0;
|
||||
border-radius: 3px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-multiselect-car-token img {
|
||||
width: 17px;
|
||||
margin-right: .5rem;
|
||||
align-items: center;
|
||||
}
|
||||
background-color: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
|
||||
.p-multiselect-car-token {
|
||||
background: #2196f3;
|
||||
color: #ffffff;
|
||||
img.flag {
|
||||
width: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -279,24 +279,24 @@ data() {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Basic</h3>
|
||||
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
||||
<h5>Basic</h5>
|
||||
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select a City" />
|
||||
|
||||
<h3>Advanced with Templating and Filtering</h3>
|
||||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
|
||||
<h5>Advanced with Templating and Filtering</h5>
|
||||
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
|
||||
<template #value="slotProps">
|
||||
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
||||
<img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" />
|
||||
<span>{{option.brand}}</span>
|
||||
<div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
|
||||
<div>{{option.name}}</div>
|
||||
</div>
|
||||
<template v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
Select Brands
|
||||
<template>
|
||||
<template v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
Select Countries
|
||||
</template>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
<div class="country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
|
|
@ -305,23 +305,31 @@ data() {
|
|||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCars1: null,
|
||||
selectedCars2: null,
|
||||
cars: [
|
||||
{brand: 'Audi', value: 'Audi'},
|
||||
{brand: 'BMW', value: 'BMW'},
|
||||
{brand: 'Fiat', value: 'Fiat'},
|
||||
{brand: 'Honda', value: 'Honda'},
|
||||
{brand: 'Jaguar', value: 'Jaguar'},
|
||||
{brand: 'Mercedes', value: 'Mercedes'},
|
||||
{brand: 'Renault', value: 'Renault'},
|
||||
{brand: 'Volkswagen', value: 'Volkswagen'},
|
||||
{brand: 'Volvo', value: 'Volvo'}
|
||||
]
|
||||
}
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
selectedCities: null,
|
||||
selectedCountries: null,
|
||||
cities: [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
],
|
||||
countries: [
|
||||
{name: 'Australia', code: 'AU'},
|
||||
{name: 'Brazil', code: 'BR'},
|
||||
{name: 'China', code: 'CN'},
|
||||
{name: 'Egypt', code: 'EG'},
|
||||
{name: 'France', code: 'FR'},
|
||||
{name: 'Germany', code: 'DE'},
|
||||
{name: 'India', code: 'IN'},
|
||||
{name: 'Japan', code: 'JP'},
|
||||
{name: 'Spain', code: 'ES'},
|
||||
{name: 'United States', code: 'US'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -336,32 +344,17 @@ export default {
|
|||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
.p-multiselect-car-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-right: .5rem;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-car-token {
|
||||
.country-item-value {
|
||||
padding: .25rem .5rem;
|
||||
margin: 0 0.286rem 0 0;
|
||||
border-radius: 3px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-multiselect-car-token img {
|
||||
width: 17px;
|
||||
margin-right: .5rem;
|
||||
align-items: center;
|
||||
}
|
||||
background-color: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
|
||||
.p-multiselect-car-token {
|
||||
background: #2196f3;
|
||||
color: #ffffff;
|
||||
img.flag {
|
||||
width: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
|
|
|||
Loading…
Reference in New Issue