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>
Content
</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>
<h3>Styling</h3>

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

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

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

@ -4,7 +4,7 @@
<div class="feature-intro">
<h1>FlexGrid</h1>
<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>

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,
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;
</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>
<h3>Toggleable</h3>
@ -33,32 +44,32 @@ import Panel from 'primevue/panel';
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>string</td>
<td>null</td>
<td>Header text of the panel.</td>
</tr>
<tr>
<td>toggleable</td>
<td>boolean</td>
<td>null</td>
<td>Defines if content of panel can be expanded and collapsed.</td>
</tr>
<tr>
<td>collapsed</td>
<td>boolean</td>
<td>null</td>
<td>Defines the initial state of panel content, supports one or two-way binding as well.</td>
</tr>
<tr>
<td>header</td>
<td>string</td>
<td>null</td>
<td>Header text of the panel.</td>
</tr>
<tr>
<td>toggleable</td>
<td>boolean</td>
<td>null</td>
<td>Defines if content of panel can be expanded and collapsed.</td>
</tr>
<tr>
<td>collapsed</td>
<td>boolean</td>
<td>null</td>
<td>Defines the initial state of panel content.</td>
</tr>
</tbody>
</table>
</div>
@ -67,20 +78,20 @@ import Panel from 'primevue/panel';
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>toggle</td>
<td>event.originalEvent: browser event <br />
event.value: collapsed state as a boolean
</td>
<td>Callback to invoke when a tab toggle.</td>
</tr>
<tr>
<td>toggle</td>
<td>event.originalEvent: browser event <br />
event.value: collapsed state as a boolean
</td>
<td>Callback to invoke when a tab toggle.</td>
</tr>
</tbody>
</table>
</div>
@ -90,32 +101,32 @@ import Panel from 'primevue/panel';
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-panel</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-panel-titlebar</td>
<td>Header section.</td>
</tr>
<tr>
<td>p-panel-title</td>
<td>Title text of panel.</td>
</tr>
<tr>
<td>p-panel-titlebar-toggler</td>
<td>Toggle icon.</td>
</tr>
<tr>
<td>p-panel-content</td>
<td>Content of panel.</td>
</tr>
<tr>
<td>p-panel</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-panel-titlebar</td>
<td>Header section.</td>
</tr>
<tr>
<td>p-panel-title</td>
<td>Title text of panel.</td>
</tr>
<tr>
<td>p-panel-titlebar-toggler</td>
<td>Toggle icon.</td>
</tr>
<tr>
<td>p-panel-content</td>
<td>Content of panel.</td>
</tr>
</tbody>
</table>
</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="Upload" icon="pi pi-upload" class="p-button-success" />
<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 slot="right">
@ -31,6 +31,33 @@
import ToolbarDoc from './ToolbarDoc';
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: {
'ToolbarDoc': ToolbarDoc
}

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

@ -8,14 +8,14 @@ import Toolbar from 'primevue/toolbar';
</CodeHighlight>
<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>
&lt;Toolbar&gt;
&lt;template slot="left"&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;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 slot="right"&gt;
@ -31,10 +31,10 @@ import Toolbar from 'primevue/toolbar';
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
@ -91,6 +91,38 @@ import Toolbar from 'primevue/toolbar';
&lt;/div&gt;
&lt;/template&gt;
</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>
</TabPanel>
</TabView>