Readd Listbox demo
parent
89f25bcb96
commit
4b8529a1d2
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Listbox</h1>
|
||||
<p>Listbox is used to select one or more values from a list of items.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Single</h3>
|
||||
<p-listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
|
||||
<h3>Advanced with Templating, Filtering and Multiple Selection</h3>
|
||||
<p-listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||
<template slot-scope="{option}">
|
||||
<div className="p-clearfix">
|
||||
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
||||
<span style="float:right;margin:1.25em .5em 0 0">{{option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</p-listbox>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
selectedCars: null,
|
||||
cities: [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
],
|
||||
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'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
Loading…
Reference in New Issue