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>

14
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>
@ -77,7 +89,7 @@ import Fieldset from 'primevue/fieldset';
<tr>
<td>toggle</td>
<td>event.originalEvent: browser event <br />
event.value: Collapsed state as a boolean
event.value: collapsed state as a boolean
</td>
<td>Callback to invoke when a tab gets expanded or collapsed.</td>
</tr>

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>

13
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>
@ -57,7 +68,7 @@ import Panel from 'primevue/panel';
<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>
<td>Defines the initial state of panel content.</td>
</tr>
</tbody>
</table>

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
}

36
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;
@ -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>