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

Doc update

pull/146/head
cagataycivici 2020-01-13 12:00:11 +03:00
parent 11ff9e7a5c
commit 83b299a38e
7 changed files with 176 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/autocomplete/AutoCompleteDoc.vue
View File

@ -166,21 +166,6 @@ export default {
</td> </td>
<td>Callback to invoke to search for suggestions.</td> <td>Callback to invoke to search for suggestions.</td>
</tr> </tr>
<tr>
<td>input</td>
<td>value: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>focus</td>
<td>event: Browser event</td>
<td>Callback to invoke when autocomplete gets focus.</td>
</tr>
<tr>
<td>blur</td>
<td>event: Browser event</td>
<td>Callback to invoke when autocomplete loses focus.</td>
</tr>
<tr> <tr>
<td>select</td> <td>select</td>
<td>event.originalEvent: Browser event <br /> <td>event.originalEvent: Browser event <br />

169
src/views/colorpicker/ColorPickerDoc.vue
View File

@ -8,25 +8,114 @@ import ColorPicker from 'primevue/colorpicker';
</CodeHighlight> </CodeHighlight>
<h3>Getting Started</h3> <h3>Getting Started</h3>
<p>A model can be bound using the standard v-model directive.</p> <p>A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".</p>
<CodeHighlight> <CodeHighlight>
&lt;InputText type="text" v-model="value" /&gt; &lt;ColorPicker v-model="color" /&gt;
</CodeHighlight> </CodeHighlight>
<h3>Float Label</h3> <CodeHighlight lang="javascript">
<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p> export default {
data() {
return {
color2: '1976D2'
}
}
}
</CodeHighlight>
<h3>Inline and Overlay</h3>
<p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p>
<CodeHighlight> <CodeHighlight>
&lt;span class="p-float-label"&gt; &lt;ColorPicker v-model="color" :inline="true" /&gt;
&lt;InputText id="username" type="text" v-model="value" /&gt;
&lt;label for="username"&gt;Username&lt;/label&gt;
&lt;/span&gt;
</CodeHighlight> </CodeHighlight>
<h3>Properties</h3> <h3>Properties</h3>
<p>InputText passes any valid attribute to the underlying input element.</p> <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>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>defaultColor</td>
<td>string</td>
<td>ff0000</td>
<td>Initial color to display when value is not defined.</td>
</tr>
<tr>
<td>inline</td>
<td>boolean</td>
<td>false</td>
<td>Whether to display as an overlay or not.</td>
</tr>
<tr>
<td>format</td>
<td>string</td>
<td>hex</td>
<td>Format to use in value binding, supported formats are "hex", "rgb" and "hsb".</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>tabindex</td>
<td>string</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
</tbody>
</table>
</div>
<h3>Events</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>input</td>
<td>value: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
</tbody>
</table>
</div>
<h3>Styling</h3> <h3>Styling</h3>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list style classed of the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
@ -37,8 +126,44 @@ import ColorPicker from 'primevue/colorpicker';
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-inputtext</td> <td>p-colorpicker</td>
<td>Input element</td> <td>Container element.</td>
</tr>
<tr>
<td>p-colorpicker-overlay</td>
<td>Container element in overlay mode.</td>
</tr>
<tr>
<td>p-colorpicker-preview </td>
<td>Preview input in overlay mode.</td>
</tr>
<tr>
<td>p-colorpicker-panel</td>
<td>Panel element of the colorpicker.</td>
</tr>
<tr>
<td>p-colorpicker-content</td>
<td>Wrapper that contains color and hue sections.</td>
</tr>
<tr>
<td>p-colorpicker-color-selector</td>
<td>Color selector container.</td>
</tr>
<tr>
<td>p-colorpicker-color</td>
<td>Color element.</td>
</tr>
<tr>
<td>p-colorpicker-color-handle</td>
<td>Handle of the color element.</td>
</tr>
<tr>
<td>p-colorpicker-hue</td>
<td>Hue slider.</td>
</tr>
<tr>
<td>p-colorpicker-hue-handle</td>
<td>Handle of the hue slider.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -54,18 +179,11 @@ import ColorPicker from 'primevue/colorpicker';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt; &lt;h3&gt;Inline&lt;/h3&gt;
&lt;InputText type="text" v-model="value1" /&gt; &lt;ColorPicker v-model="color1" :inline="true" /&gt;
&lt;span :style="{marginLeft: '.5em'}"&gt;{{value1}}&lt;/span&gt;
&lt;h3&gt;Floating Label&lt;/h3&gt; &lt;h3&gt;Overlay&lt;/h3&gt;
&lt;span class="p-float-label"&gt; &lt;ColorPicker v-model="color2" /&gt;
&lt;InputText id="username" type="text" v-model="value2" /&gt;
&lt;label for="username"&gt;Username&lt;/label&gt;
&lt;/span&gt;
&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;InputText type="text" v-model="value3" disabled /&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
@ -73,9 +191,8 @@ import ColorPicker from 'primevue/colorpicker';
export default { export default {
data() { data() {
return { return {
value1: '', color1: null,
value2: '', color2: '1976D2'
value3: 'PrimeVue'
} }
} }
} }

3
src/views/inputmask/InputMaskDoc.vue
View File

@ -86,6 +86,9 @@ import InputMask from 'primevue/inputmask';
</table> </table>
</div> </div>
<h3>Events</h3>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h3>Styling</h3> <h3>Styling</h3>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

3
src/views/inputtext/InputTextDoc.vue
View File

@ -25,6 +25,9 @@ import InputText from 'primevue/inputtext';
<h3>Properties</h3> <h3>Properties</h3>
<p>InputText passes any valid attribute to the underlying input element.</p> <p>InputText passes any valid attribute to the underlying input element.</p>
<h3>Events</h3>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h3>Styling</h3> <h3>Styling</h3>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

3
src/views/password/PasswordDoc.vue
View File

@ -60,6 +60,9 @@ import Password from 'primevue/password';
</table> </table>
</div> </div>
<h3>Events</h3>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h3>Styling</h3> <h3>Styling</h3>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

2
src/views/spinner/SpinnerDoc.vue
View File

@ -73,7 +73,7 @@ import Spinner from 'primevue/spinner';
</div> </div>
<h3>Events</h3> <h3>Events</h3>
<p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p> <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h3>Styling</h3> <h3>Styling</h3>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>

19
src/views/textarea/TextareaDoc.vue
View File

@ -49,24 +49,7 @@ import Textarea from 'primevue/textarea';
</div> </div>
<h3>Events</h3> <h3>Events</h3>
<div class="doc-tablewrapper"> <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>input</td>
<td>event: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
</tbody>
</table>
</div>
<h3>Styling</h3> <h3>Styling</h3>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>