Docs for button and splitbutton

pull/12/head
cagataycivici 2019-05-23 11:24:32 +03:00
parent 9fd68309a4
commit 8efd5dd719
2 changed files with 68 additions and 25 deletions

View File

@ -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>
&lt;Button label="Click" icon="pi pi-check" iconPos="right" /&gt; &lt;Button label="Click" icon="pi pi-check" iconPos="right" /&gt;
</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>

View File

@ -52,6 +52,48 @@ export default {
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items"&gt;&lt;/SplitButton&gt; &lt;SplitButton label="Save" icon="pi pi-plus" :model="items"&gt;&lt;/SplitButton&gt;
</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>