Docs for button and splitbutton
parent
9fd68309a4
commit
8efd5dd719
|
@ -20,7 +20,7 @@ import Button from 'primevue/button';
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
<h3>Icons</h3>
|
<h3>Icons</h3>
|
||||||
<p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default
|
<p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default
|
||||||
icon position is "left" and alternative is "right". To display only an icon, leave label as undefined.</p>
|
icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
@ -58,35 +58,36 @@ import Button from 'primevue/button';
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
<p>Any valid attribute such as style and class are passed to the underlying input element. Following are the additional properties to configure the component.</p>
|
||||||
<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>label</td>
|
<td>label</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Text of the button.</td>
|
<td>Text of the button.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>icon</td>
|
<td>icon</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Name of the icon.</td>
|
<td>Name of the icon.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>iconPos</td>
|
<td>iconPos</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>left</td>
|
<td>left</td>
|
||||||
<td>Position of the icon, valid values are "left" and "right".</td>
|
<td>Position of the icon, valid values are "left" and "right".</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -52,6 +52,48 @@ export default {
|
||||||
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<h3>MenuModel</h3>
|
||||||
|
<p>SplitButton items are based on the PrimeVue MenuModel API.</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>label</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Text of the menuitem.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>icon</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Icon of the menuitem.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>url</td>
|
||||||
|
<td>object</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>External link to navigate when item is clicked.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>command</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>false</td>
|
||||||
|
<td>Callback to execute when item is selected.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>Severity</h3>
|
<h3>Severity</h3>
|
||||||
<p>Different color options are available as severity levels.</p>
|
<p>Different color options are available as severity levels.</p>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue