vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Doc update for Listbox

pull/12/head
cagataycivici 2019-05-22 18:20:03 +03:00
parent 602e06ef9a
commit f09990631e
2 changed files with 121 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/listbox/Listbox.vue
View File

@ -28,14 +28,14 @@ export default {
value: null,
options: Array,
optionLabel: null,
optionValue: null,
optionDisabled: null,
listStyle: null,
disabled: Boolean,
dataKey: null,
multiple: Boolean,
metaKeySelection: Boolean,
filter: Boolean,
optionValue: null,
optionDisabled: null
filter: Boolean
},
optionTouched: false,
data() {

51
src/views/listbox/ListboxDoc.vue
View File

@ -8,10 +8,11 @@ import Listbox from 'primevue/listbox';
</CodeHighlight>
<h3>Getting Started</h3>
<p>Listbox 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>Listbox 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>
&lt;Listbox v-model=&quot;selectedCity&quot; :options=&quot;cities&quot; optionLabel=&quot;name&quot; /&gt;
</CodeHighlight>
<CodeHighlight lang="js">
data() {
return {
@ -36,8 +37,7 @@ data() {
</CodeHighlight>
<h3>Custom Content</h3>
<p>Label of an option is used as the display text of an item by default, for custom content support define a template where
the local template variable refers to an option in the options collection. </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>
<template v-pre>
&lt;Listbox v-model=&quot;selectedCars&quot; :options=&quot;cars&quot; :multiple=&quot;true&quot; :filter=&quot;true&quot; optionLabel=&quot;brand&quot; listStyle=&quot;max-height:250px&quot; style=&quot;width:15em&quot;&gt;
@ -58,6 +58,7 @@ data() {
</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>
@ -71,21 +72,33 @@ data() {
<tbody>
<tr>
<td>value</td>
<td>object</td>
<td>any</td>
<td>null</td>
<td>Selected value to display.</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>options</td>
<td>array</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>
<td>optionLabel</td>
<td>string</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>
<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>listStyle</td>
@ -124,18 +137,6 @@ data() {
<td>false</td>
<td>When specified, displays a filter input at header.</td>
</tr>
<tr>
<td>optionValue</td>
<td>???</td>
<td>null</td>
<td>???</td>
</tr>
<tr>
<td>optionDisabled</td>
<td>boolean</td>
<td>null</td>
<td>???</td>
</tr>
</tbody>
</table>
</div>
@ -153,16 +154,14 @@ data() {
<tbody>
<tr>
<td>change</td>
<td>event.originalEvent: Browser event <br/>
event.value: Single value or an array of values depending on the selection mode <br/>
</td>
<td>Callback to invoke when value of listbox changes.</td>
<td>event.originalEvent: Original event <br />
event.value: Selected option value </td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>input</td>
<td>event: Single value or an array of values depending on the selection mode <br/>
</td>
<td>Callback to invoke when value of listbox changes.</td>
<td>value: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
</tbody>
</table>