Doc update for SelectButton
cagataycivici
parent
9b2cdeae83
commit
1e96522df8
|
|
@ -18,13 +18,12 @@ export default {
|
||||||
props: {
|
props: {
|
||||||
value: null,
|
value: null,
|
||||||
options: Array,
|
options: Array,
|
||||||
optionLabel: null,
|
optionLabel: null,
|
||||||
|
optionValue: null,
|
||||||
|
optionDisabled: null,
|
||||||
multiple: Boolean,
|
multiple: Boolean,
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
dataKey: null,
|
dataKey: null
|
||||||
name: String,
|
|
||||||
optionValue: null,
|
|
||||||
optionDisabled: null
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ import Dropdown from 'primevue/dropdown';
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Dropdown requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the field name of the option.</p>
|
<p>Dropdown 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>
|
<CodeHighlight>
|
||||||
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" />
|
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ import MultiSelect from 'primevue/multiselect';
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>MultiSelect requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the field name of the option.</p>
|
<p>MultiSelect 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>
|
<CodeHighlight>
|
||||||
<MultiSelect v-model="selectedCars" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
<MultiSelect v-model="selectedCars" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ import SelectButton from 'primevue/selectbutton';
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>SelectButton requires a value to bind, optionLabel and a collection of options. How to define the options property; Providing an array of arbitrary objects along with the <i>optionLabel</i> property to specify the field name of the option.</p>
|
<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>
|
<CodeHighlight>
|
||||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
@ -34,11 +34,8 @@ export default {
|
||||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="brand" :multiple="true" />
|
<SelectButton v-model="selectedCity" :options="cities" optionLabel="brand" :multiple="true" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Disabled Options</h3>
|
|
||||||
<p>Particular options can be prevented from selection using the optionDisabled property.</p>
|
|
||||||
|
|
||||||
<h3>Templating</h3>
|
<h3>Templating</h3>
|
||||||
<p>Items support templating to display custom content inside the buttons using an template that receives the option as the implicit variable. </p>
|
<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>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
||||||
|
|
@ -56,68 +53,62 @@ export default {
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>value</td>
|
<td>value</td>
|
||||||
<td>any</td>
|
<td>any</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Value of the component.</td>
|
<td>Value of the component.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>options</td>
|
<td>options</td>
|
||||||
<td>array</td>
|
<td>array</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>An array of objects to display as the available options.</td>
|
<td>An array of selectitems to display as the available options.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>optionLabel</td>
|
<td>optionLabel</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
|
<td>Property name to use as the label of an option.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>multiple</td>
|
<td>optionValue</td>
|
||||||
<td>boolean</td>
|
<td>string</td>
|
||||||
<td>false</td>
|
<td>null</td>
|
||||||
<td>When specified, allows selecting multiple values.</td>
|
<td>Property name to use as the value of an option, defaults to the option itself when not defined.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>disabled</td>
|
<td>optionDisabled</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>false</td>
|
<td>null</td>
|
||||||
<td>When present, it specifies that the element should be disabled.</td>
|
<td>Property name to use as the disabled flag of an option, defaults to false when not defined.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>dataKey</td>
|
<td>multiple</td>
|
||||||
<td>string</td>
|
<td>boolean</td>
|
||||||
<td>null</td>
|
<td>false</td>
|
||||||
<td>A property to uniquely match the value in options for better performance.</td>
|
<td>When specified, allows selecting multiple values.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>name</td>
|
<td>disabled</td>
|
||||||
<td>string</td>
|
<td>boolean</td>
|
||||||
<td>null</td>
|
<td>false</td>
|
||||||
<td>???</td>
|
<td>When present, it specifies that the element should be disabled.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>optionValue</td>
|
<td>dataKey</td>
|
||||||
<td>any</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>???</td>
|
<td>A property to uniquely match the value in options for better performance.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
|
||||||
<td>optionDisabled</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>null</td>
|
|
||||||
<td>???</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -126,28 +117,28 @@ export default {
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Parameters</th>
|
<th>Parameters</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>input</td>
|
<td>input</td>
|
||||||
<td>event: Single value or an array of values that are selected.</td>
|
<td>event: Single value or an array of values that are selected.</td>
|
||||||
<td>Callback to invoke on value change.</td>
|
<td>Callback to invoke on value change.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>focus</td>
|
<td>focus</td>
|
||||||
<td>event: Browser event</td>
|
<td>event: Browser event</td>
|
||||||
<td>Callback to invoke on focus.</td>
|
<td>Callback to invoke on focus.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>blur</td>
|
<td>blur</td>
|
||||||
<td>event: Browser event</td>
|
<td>event: Browser event</td>
|
||||||
<td>Callback to invoke on blur.</td>
|
<td>Callback to invoke on blur.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue