Readd Listbox demo

pull/12/head
cagataycivici 2018-12-26 00:32:02 +03:00
parent 89f25bcb96
commit 4b8529a1d2
1 changed files with 58 additions and 0 deletions

View File

@ -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>