From dfa8f2f0c35b3bb457c51d13613f092340509826 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Thu, 23 May 2019 11:53:40 +0300 Subject: [PATCH] Docs for Panels --- src/views/card/CardDoc.vue | 21 +++++ src/views/fieldset/FieldsetDoc.vue | 124 ++++++++++++++------------ src/views/flexgrid/FlexGridDemo.vue | 2 +- src/views/panel/PanelDoc.vue | 131 +++++++++++++++------------- src/views/toolbar/ToolbarDemo.vue | 29 +++++- src/views/toolbar/ToolbarDoc.vue | 44 ++++++++-- 6 files changed, 227 insertions(+), 124 deletions(-) diff --git a/src/views/card/CardDoc.vue b/src/views/card/CardDoc.vue index b9c4d9403..0045b268f 100644 --- a/src/views/card/CardDoc.vue +++ b/src/views/card/CardDoc.vue @@ -13,6 +13,27 @@ import Card from 'primevue/card'; <Card> Content </Card> + + +

Templates

+

Card provides header, title, content and footer as the named templates to place content.

+ +<Card> + <template slot="header"> + <img alt="user header" src="demo/images/usercard.png"> + </template> + <template slot="title"> + Advanced Card + </template> + <template slot="content"> + 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! + </template> + <template slot="footer"> + <Button icon="pi pi-check" label="Save" class="p-button-raised" /> + <Button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em" /> + </template> +</Card>

Styling

diff --git a/src/views/fieldset/FieldsetDoc.vue b/src/views/fieldset/FieldsetDoc.vue index 5ca6db67c..0bb61290e 100644 --- a/src/views/fieldset/FieldsetDoc.vue +++ b/src/views/fieldset/FieldsetDoc.vue @@ -18,6 +18,18 @@ import Fieldset from 'primevue/fieldset'; </Fieldset> +

Custom Header

+

Header of the panel is either defined with the legend property or the legend template.

+ +<Fieldset> + <template name="legend"> + Header Content + </template> + Content +</Fieldset> + + +

Toggleable

Content of the fieldset can be expanded and collapsed using toggleable option..

@@ -33,32 +45,32 @@ import Fieldset from 'primevue/fieldset';
- - - - - - + + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
NameTypeDefaultDescription
legendstringnullHeader text of the fieldset.
toggleablebooleannullWhen specified, content can toggled by clicking the legend.
collapsedbooleannullDefines the default visibility state of the content.
legendstringnullHeader text of the fieldset.
toggleablebooleannullWhen specified, content can toggled by clicking the legend.
collapsedbooleannullDefines the default visibility state of the content.
@@ -67,20 +79,20 @@ import Fieldset from 'primevue/fieldset';
- - - - - + + + + + - - - - - + + + + +
NameParametersDescription
NameParametersDescription
toggleevent.originalEvent: browser event
- event.value: Collapsed state as a boolean - 		Callback to invoke when a tab gets expanded or collapsed.
toggleevent.originalEvent: browser event
+ event.value: collapsed state as a boolean + 		Callback to invoke when a tab gets expanded or collapsed.
@@ -90,28 +102,28 @@ import Fieldset from 'primevue/fieldset';
- - - - + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + +
NameElement
NameElement
p-fieldsetFieldset element.
p-fieldset-toggleableToggleable fieldset element.
p-fieldset-legendLegend element.
p-fieldset-contentContent element.
p-fieldsetFieldset element.
p-fieldset-toggleableToggleable fieldset element.
p-fieldset-legendLegend element.
p-fieldset-contentContent element.
diff --git a/src/views/flexgrid/FlexGridDemo.vue b/src/views/flexgrid/FlexGridDemo.vue index 7abdf1d65..065fcbf12 100644 --- a/src/views/flexgrid/FlexGridDemo.vue +++ b/src/views/flexgrid/FlexGridDemo.vue @@ -4,7 +4,7 @@

FlexGrid

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 PrimeFlex , a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.

+ Flex Grid CSS is not included in PrimeVue as it is provided by PrimeFlex , a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.

diff --git a/src/views/panel/PanelDoc.vue b/src/views/panel/PanelDoc.vue index feef78929..2d9e307af 100644 --- a/src/views/panel/PanelDoc.vue +++ b/src/views/panel/PanelDoc.vue @@ -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. </Panel> + + +

Custom Header

+

Header of the panel is either defined with the header property or the header template.

+ +<Panel> + <template name="header"> + Header Content + </template> + Content +</Panel>

Toggleable

@@ -33,32 +44,32 @@ import Panel from 'primevue/panel';
- - - - - - + + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
NameTypeDefaultDescription
headerstringnullHeader text of the panel.
toggleablebooleannullDefines if content of panel can be expanded and collapsed.
collapsedbooleannullDefines the initial state of panel content, supports one or two-way binding as well.
headerstringnullHeader text of the panel.
toggleablebooleannullDefines if content of panel can be expanded and collapsed.
collapsedbooleannullDefines the initial state of panel content.
@@ -67,20 +78,20 @@ import Panel from 'primevue/panel';
- - - - - + + + + + - - - - - + + + + +
NameParametersDescription
NameParametersDescription
toggleevent.originalEvent: browser event
- event.value: collapsed state as a boolean - 		Callback to invoke when a tab toggle.
toggleevent.originalEvent: browser event
+ event.value: collapsed state as a boolean + 		Callback to invoke when a tab toggle.
@@ -90,32 +101,32 @@ import Panel from 'primevue/panel';
- - - - + + + + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + +
NameElement
NameElement
p-panelContainer element.
p-panel-titlebarHeader section.
p-panel-titleTitle text of panel.
p-panel-titlebar-togglerToggle icon.
p-panel-contentContent of panel.
p-panelContainer element.
p-panel-titlebarHeader section.
p-panel-titleTitle text of panel.
p-panel-titlebar-togglerToggle icon.
p-panel-contentContent of panel.
diff --git a/src/views/toolbar/ToolbarDemo.vue b/src/views/toolbar/ToolbarDemo.vue index a52d084a6..57922df70 100644 --- a/src/views/toolbar/ToolbarDemo.vue +++ b/src/views/toolbar/ToolbarDemo.vue @@ -13,7 +13,7 @@