Doc refactor for Dropdown
cagataycivici
parent
af502f91a1
commit
c869e4b98a
|
|
@ -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, 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>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>
|
||||||
<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>
|
||||||
|
|
@ -57,98 +57,98 @@ data() {
|
||||||
<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 selectitems 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>scrollHeight</td>
|
<td>optionValue</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>200px</td>
|
<td>null</td>
|
||||||
<td>Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.</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>filter</td>
|
<td>optionDisabled</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>false</td>
|
<td>null</td>
|
||||||
<td>When specified, displays an input field to filter the items on keyup.</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>filterPlaceholder</td>
|
<td>scrollHeight</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>200px</td>
|
||||||
<td>Placeholder text to show when filter input is empty.</td>
|
<td>Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>editable</td>
|
<td>filter</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
<td>When present, custom value instead of predefined options can be entered using the editable input field.</td>
|
<td>When specified, displays an input field to filter the items on keyup.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>placeholder</td>
|
<td>filterPlaceholder</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Default text to display when no option is selected.</td>
|
<td>Placeholder text to show when filter input is empty.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>disabled</td>
|
<td>editable</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
<td>When present, it specifies that the component should be disabled.</td>
|
<td>When present, custom value instead of predefined options can be entered using the editable input field.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>dataKey</td>
|
<td>placeholder</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>A property to uniquely match the value in options for better performance.</td>
|
<td>Default text to display when no option is selected.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>showClear</td>
|
<td>disabled</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
<td>When enabled, a clear icon is displayed to clear the value.</td>
|
<td>When present, it specifies that the component should be disabled.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>tabindex</td>
|
<td>dataKey</td>
|
||||||
<td>number</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Index of the element in tabbing order.</td>
|
<td>A property to uniquely match the value in options for better performance.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>optionValue</td>
|
<td>showClear</td>
|
||||||
<td>string</td>
|
<td>boolean</td>
|
||||||
<td>null</td>
|
<td>false</td>
|
||||||
<td>???</td>
|
<td>When enabled, a clear icon is displayed to clear the value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>optionDisabled</td>
|
<td>tabindex</td>
|
||||||
<td>boolean</td>
|
<td>number</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>???</td>
|
<td>Index of the element in tabbing order.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -157,24 +157,24 @@ data() {
|
||||||
<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>change</td>
|
<td>change</td>
|
||||||
<td>event.originalEvent: Original event <br />
|
<td>event.originalEvent: Original event <br />
|
||||||
event.value: Selected option value </td>
|
event.value: Selected option value </td>
|
||||||
<td>Callback to invoke on value change</td>
|
<td>Callback to invoke on value change.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>input</td>
|
<td>input</td>
|
||||||
<td>event: Input field value</td>
|
<td>value: New value</td>
|
||||||
<td>Callback to invoke on input event of input field (editable mode).</td>
|
<td>Callback to invoke on value change.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -184,52 +184,52 @@ data() {
|
||||||
<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>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-dropdown</td>
|
<td>p-dropdown</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-dropdown-label</td>
|
<td>p-dropdown-label</td>
|
||||||
<td>Element to display label of selected option.</td>
|
<td>Element to display label of selected option.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-dropdown-trigger</td>
|
<td>p-dropdown-trigger</td>
|
||||||
<td>Icon element.</td>
|
<td>Icon element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-dropdown-panel</td>
|
<td>p-dropdown-panel</td>
|
||||||
<td>Icon element.</td>
|
<td>Icon element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-dropdown-items-wrapper</td>
|
<td>p-dropdown-items-wrapper</td>
|
||||||
<td>Wrapper element of items list.</td>
|
<td>Wrapper element of items list.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-dropdown-items</td>
|
<td>p-dropdown-items</td>
|
||||||
<td>List element of items.</td>
|
<td>List element of items.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-dropdown-item</td>
|
<td>p-dropdown-item</td>
|
||||||
<td>An item in the list.</td>
|
<td>An item in the list.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-dropdown-filter-container</td>
|
<td>p-dropdown-filter-container</td>
|
||||||
<td>Container of filter input.</td>
|
<td>Container of filter input.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-dropdown-filter</td>
|
<td>p-dropdown-filter</td>
|
||||||
<td>Filter element.</td>
|
<td>Filter element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-dropdown-open</td>
|
<td>p-dropdown-open</td>
|
||||||
<td>Container element when overlay is visible.</td>
|
<td>Container element when overlay is visible.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue