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

Docs for Panels

pull/12/head
cagataycivici 2019-05-23 11:53:40 +03:00
parent 601a413484
commit dfa8f2f0c3
6 changed files with 227 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/card/CardDoc.vue
View File

@ -13,6 +13,27 @@ import Card from 'primevue/card';
<Card> <Card>
Content Content
</Card> </Card>
</CodeHighlight>
<h3>Templates</h3>
<p>Card provides <i>header</i>, <i>title</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
<CodeHighlight>
&lt;Card&gt;
&lt;template slot="header"&gt;
&lt;img alt="user header" src="demo/images/usercard.png"&gt;
&lt;/template&gt;
&lt;template slot="title"&gt;
Advanced Card
&lt;/template&gt;
&lt;template slot="content"&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
&lt;/template&gt;
&lt;template slot="footer"&gt;
&lt;Button icon="pi pi-check" label="Save" class="p-button-raised" /&gt;
&lt;Button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em" /&gt;
&lt;/template&gt;
&lt;/Card&gt;
</CodeHighlight> </CodeHighlight>
<h3>Styling</h3> <h3>Styling</h3>

124
src/views/fieldset/FieldsetDoc.vue
View File

@ -18,6 +18,18 @@ import Fieldset from 'primevue/fieldset';
&lt;/Fieldset&gt; &lt;/Fieldset&gt;
</CodeHighlight> </CodeHighlight>
<h3>Custom Header</h3>
<p>Header of the panel is either defined with the <i>legend</i> property or the legend template.</p>
<CodeHighlight>
&lt;Fieldset&gt;
&lt;template name="legend"&gt;
Header Content
&lt;/template&gt;
Content
&lt;/Fieldset&gt;
</CodeHighlight>
<h3>Toggleable</h3> <h3>Toggleable</h3>
<p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p> <p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p>
<CodeHighlight> <CodeHighlight>
@ -33,32 +45,32 @@ import Fieldset from 'primevue/fieldset';
<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>legend</td> <td>legend</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Header text of the fieldset.</td> <td>Header text of the fieldset.</td>
</tr> </tr>
<tr> <tr>
<td>toggleable</td> <td>toggleable</td>
<td>boolean</td> <td>boolean</td>
<td>null</td> <td>null</td>
<td>When specified, content can toggled by clicking the legend.</td> <td>When specified, content can toggled by clicking the legend.</td>
</tr> </tr>
<tr> <tr>
<td>collapsed</td> <td>collapsed</td>
<td>boolean</td> <td>boolean</td>
<td>null</td> <td>null</td>
<td>Defines the default visibility state of the content.</td> <td>Defines the default visibility state of the content.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -67,20 +79,20 @@ import Fieldset from 'primevue/fieldset';
<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>toggle</td> <td>toggle</td>
<td>event.originalEvent: browser event <br /> <td>event.originalEvent: browser event <br />
event.value: Collapsed state as a boolean event.value: collapsed state as a boolean
</td> </td>
<td>Callback to invoke when a tab gets expanded or collapsed.</td> <td>Callback to invoke when a tab gets expanded or collapsed.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -90,28 +102,28 @@ import Fieldset from 'primevue/fieldset';
<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-fieldset</td> <td>p-fieldset</td>
<td>Fieldset element.</td> <td>Fieldset element.</td>
</tr> </tr>
<tr> <tr>
<td>p-fieldset-toggleable</td> <td>p-fieldset-toggleable</td>
<td>Toggleable fieldset element.</td> <td>Toggleable fieldset element.</td>
</tr> </tr>
<tr> <tr>
<td>p-fieldset-legend</td> <td>p-fieldset-legend</td>
<td>Legend element.</td> <td>Legend element.</td>
</tr> </tr>
<tr> <tr>
<td>p-fieldset-content</td> <td>p-fieldset-content</td>
<td>Content element.</td> <td>Content element.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>

2
src/views/flexgrid/FlexGridDemo.vue
View File

@ -4,7 +4,7 @@
<div class="feature-intro"> <div class="feature-intro">
<h1>FlexGrid</h1> <h1>FlexGrid</h1>
<p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops. <p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.
Flex Grid CSS is not included in PrimeReact as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> , a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p> Flex Grid CSS is not included in PrimeVue as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> , a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
</div> </div>
</div> </div>

131
src/views/panel/PanelDoc.vue
View File

@ -16,6 +16,17 @@ import Panel from 'primevue/panel';
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
&lt;/Panel&gt; &lt;/Panel&gt;
</CodeHighlight>
<h3>Custom Header</h3>
<p>Header of the panel is either defined with the <i>header</i> property or the header template.</p>
<CodeHighlight>
&lt;Panel&gt;
&lt;template name="header"&gt;
Header Content
&lt;/template&gt;
Content
&lt;/Panel&gt;
</CodeHighlight> </CodeHighlight>
<h3>Toggleable</h3> <h3>Toggleable</h3>
@ -33,32 +44,32 @@ import Panel from 'primevue/panel';
<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>header</td> <td>header</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Header text of the panel.</td> <td>Header text of the panel.</td>
</tr> </tr>
<tr> <tr>
<td>toggleable</td> <td>toggleable</td>
<td>boolean</td> <td>boolean</td>
<td>null</td> <td>null</td>
<td>Defines if content of panel can be expanded and collapsed.</td> <td>Defines if content of panel can be expanded and collapsed.</td>
</tr> </tr>
<tr> <tr>
<td>collapsed</td> <td>collapsed</td>
<td>boolean</td> <td>boolean</td>
<td>null</td> <td>null</td>
<td>Defines the initial state of panel content, supports one or two-way binding as well.</td> <td>Defines the initial state of panel content.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -67,20 +78,20 @@ import Panel from 'primevue/panel';
<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>toggle</td> <td>toggle</td>
<td>event.originalEvent: browser event <br /> <td>event.originalEvent: browser event <br />
event.value: collapsed state as a boolean event.value: collapsed state as a boolean
</td> </td>
<td>Callback to invoke when a tab toggle.</td> <td>Callback to invoke when a tab toggle.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -90,32 +101,32 @@ import Panel from 'primevue/panel';
<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-panel</td> <td>p-panel</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-panel-titlebar</td> <td>p-panel-titlebar</td>
<td>Header section.</td> <td>Header section.</td>
</tr> </tr>
<tr> <tr>
<td>p-panel-title</td> <td>p-panel-title</td>
<td>Title text of panel.</td> <td>Title text of panel.</td>
</tr> </tr>
<tr> <tr>
<td>p-panel-titlebar-toggler</td> <td>p-panel-titlebar-toggler</td>
<td>Toggle icon.</td> <td>Toggle icon.</td>
</tr> </tr>
<tr> <tr>
<td>p-panel-content</td> <td>p-panel-content</td>
<td>Content of panel.</td> <td>Content of panel.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>

29
src/views/toolbar/ToolbarDemo.vue
View File

@ -13,7 +13,7 @@
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" /> <Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
<Button label="Upload" icon="pi pi-upload" class="p-button-success" /> <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
<i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" /> <i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
<Button label="Save" icon="pi pi-check" class="p-button-warning" /> <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
</template> </template>
<template slot="right"> <template slot="right">
@ -31,6 +31,33 @@
import ToolbarDoc from './ToolbarDoc'; import ToolbarDoc from './ToolbarDoc';
export default { export default {
data() {
return {
items: [
{
label: 'Update',
icon: 'pi pi-refresh'
},
{
label: 'Delete',
icon: 'pi pi-times'
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/'
}
},
{ label: 'Upload',
icon: 'pi pi-upload',
command: () => {
window.location.hash = "/fileupload"
}
}
]
}
},
components: { components: {
'ToolbarDoc': ToolbarDoc 'ToolbarDoc': ToolbarDoc
} }

44
src/views/toolbar/ToolbarDoc.vue
View File

@ -8,14 +8,14 @@ import Toolbar from 'primevue/toolbar';
</CodeHighlight> </CodeHighlight>
<h3>Getting Started</h3> <h3>Getting Started</h3>
<p>Toolbar is a container component defined using Toolbar element. Left aligned content is placed inside a template with "left" name and similarly "right" for right alignment..</p> <p>Toolbar provides <i>left</i> and <i>right</i> templates to place content at these sections.</p>
<CodeHighlight> <CodeHighlight>
&lt;Toolbar&gt; &lt;Toolbar&gt;
&lt;template slot="left"&gt; &lt;template slot="left"&gt;
&lt;Button label="New" icon="pi pi-plus" style="margin-right: .25em" /&gt; &lt;Button label="New" icon="pi pi-plus" style="margin-right: .25em" /&gt;
&lt;Button label="Upload" icon="pi pi-upload" class="p-button-success" /&gt; &lt;Button label="Upload" icon="pi pi-upload" class="p-button-success" /&gt;
&lt;i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" /&gt; &lt;i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" /&gt;
&lt;Button label="Save" icon="pi pi-check" class="p-button-warning" /&gt; &lt;SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"&gt;&lt;/SplitButton&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template slot="right"&gt; &lt;template slot="right"&gt;
@ -31,10 +31,10 @@ import Toolbar from 'primevue/toolbar';
<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>
@ -91,6 +91,38 @@ import Toolbar from 'primevue/toolbar';
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
</template> </template>
</CodeHighlight>
<CodeHighlight lang="javascript">
export default {
data() {
return {
items: [
{
label: 'Update',
icon: 'pi pi-refresh'
},
{
label: 'Delete',
icon: 'pi pi-times'
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/'
}
},
{ label: 'Upload',
icon: 'pi pi-upload',
command: () => {
window.location.hash = "/fileupload"
}
}
]
}
}
}
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>
</TabView> </TabView>