mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-10 17:32:36 +00:00
218 lines
No EOL
8.3 KiB
Vue
218 lines
No EOL
8.3 KiB
Vue
<template>
|
|
<div class="content-section documentation">
|
|
<TabView>
|
|
<TabPanel header="Documentation">
|
|
<h3>Import</h3>
|
|
<CodeHighlight lang="javascript">
|
|
import SelectButton from 'primevue/selectbutton';
|
|
</CodeHighlight>
|
|
|
|
<h3>Getting Started</h3>
|
|
<p>SelectButton requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
|
|
<CodeHighlight>
|
|
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
|
</CodeHighlight>
|
|
|
|
<CodeHighlight lang="js">
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectedCity: null,
|
|
cities: [
|
|
{name: 'London', code: 'LND'},
|
|
{name: 'Paris', code: 'PRS'},
|
|
{name: 'Rome', code: 'RM'}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</CodeHighlight>
|
|
|
|
<h3>Multiple</h3>
|
|
<p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
|
|
<CodeHighlight>
|
|
<SelectButton v-model="selectedCity" :options="cities" optionLabel="brand" :multiple="true" />
|
|
</CodeHighlight>
|
|
|
|
<h3>Templating</h3>
|
|
<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
|
|
<CodeHighlight>
|
|
<template v-pre>
|
|
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
|
<template #option="slotProps">
|
|
<div style="text-align: center; padding: 1em; width: 125px">
|
|
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
|
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
|
</div>
|
|
</template>
|
|
</SelectButton>
|
|
</template>
|
|
</CodeHighlight>
|
|
|
|
<h3>Properties</h3>
|
|
<p>Any attribute such as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>value</td>
|
|
<td>any</td>
|
|
<td>null</td>
|
|
<td>Value of the component.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>options</td>
|
|
<td>array</td>
|
|
<td>null</td>
|
|
<td>An array of selectitems to display as the available options.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>optionLabel</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Property name to use as the label of an option.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>optionValue</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Property name to use as the value of an option, defaults to the option itself when not defined.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>optionDisabled</td>
|
|
<td>boolean</td>
|
|
<td>null</td>
|
|
<td>Property name to use as the disabled flag of an option, defaults to false when not defined.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>multiple</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>When specified, allows selecting multiple values.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>disabled</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>When present, it specifies that the element should be disabled.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>dataKey</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>A property to uniquely match the value in options for better performance.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h3>Events</h3>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Parameters</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>input</td>
|
|
<td>event: Single value or an array of values that are selected.</td>
|
|
<td>Callback to invoke on value change.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>focus</td>
|
|
<td>event: Browser event</td>
|
|
<td>Callback to invoke on focus.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>blur</td>
|
|
<td>event: Browser event</td>
|
|
<td>Callback to invoke on blur.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h3>Dependencies</h3>
|
|
<p>None.</p>
|
|
</TabPanel>
|
|
|
|
<TabPanel header="Source">
|
|
<a href="https://github.com/primefaces/primevue/tree/master/src/views/selectbutton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
|
<span>View on GitHub</span>
|
|
</a>
|
|
<CodeHighlight>
|
|
<template v-pre>
|
|
<template>
|
|
<div>
|
|
<div class="content-section introduction">
|
|
<div class="feature-intro">
|
|
<h1>SelectButton</h1>
|
|
<p>SelectButton is a form component to choose a value from a list of options using button elements.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section implementation">
|
|
<h3 class="first">Single</h3>
|
|
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
|
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
|
|
|
|
<h3>Multiple</h3>
|
|
<SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
|
|
<p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
|
|
|
|
<h3>Custom Content</h3>
|
|
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
|
<template #option="slotProps">
|
|
<div style="text-align: center; padding: 1em; width: 125px">
|
|
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
|
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
|
</div>
|
|
</template>
|
|
</SelectButton>
|
|
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</CodeHighlight>
|
|
|
|
<CodeHighlight lang="javascript">
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectedCity: null,
|
|
selectedCar: null,
|
|
selectedCars: null,
|
|
cities: [
|
|
{name: 'London', code: 'LND'},
|
|
{name: 'Paris', code: 'PRS'},
|
|
{name: 'Rome', code: 'RM'}
|
|
],
|
|
cars: [
|
|
{brand: 'Audi', key: 'A'},
|
|
{brand: 'Bmw', key: 'B'},
|
|
{brand: 'Mercedes', key: 'M'}
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
this.selectedCar = this.cars[1];
|
|
}
|
|
}
|
|
</CodeHighlight>
|
|
</TabPanel>
|
|
</TabView>
|
|
</div>
|
|
</template> |