import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';
Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.
+Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.
<Accordion>
<AccordionTab header="Header I">
@@ -26,8 +24,8 @@ import AccordionTab from 'primevue/accordiontab';
Visibility of the content is specified with the activeIndex property that supports one or two-way binding.
+Visibility of the content is specified with the activeIndex property that supports one or two-way binding.
<Accordion :activeIndex="0">
<AccordionTab header="Header I">
@@ -43,7 +41,7 @@ import AccordionTab from 'primevue/accordiontab';
Two-way binding requires v-model.
+Two-way binding requires v-model.
<Accordion v-model:activeIndex="activeIndex">
<AccordionTab header="Header I">
@@ -59,9 +57,9 @@ import AccordionTab from 'primevue/accordiontab';
By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple - tabs be active at the same time.
+By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple + tabs be active at the same time.
<Accordion :multiple="true">
<AccordionTab header="Header I">
@@ -77,8 +75,8 @@ import AccordionTab from 'primevue/accordiontab';
A tab can be disabled by setting the disabled property to true.
+A tab can be disabled by setting the disabled property to true.
<Accordion>
<AccordionTab header="Header I">
@@ -94,8 +92,8 @@ import AccordionTab from 'primevue/accordiontab';
Custom content for the title section of a panel is defined using the header template.
+Custom content for the title section of a panel is defined using the header template.
<Accordion>
<AccordionTab>
@@ -123,8 +121,8 @@ import AccordionTab from 'primevue/accordiontab';
Tabs can be controlled programmatically using activeIndex property.
+Tabs can be controlled programmatically using activeIndex property.
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
<Button @click="active = 1" class="p-button-text" label="Activate 2nd" />
@@ -155,8 +153,8 @@ export default {
Tabs can be generated dynamically using the standard v-for directive.
+Tabs can be generated dynamically using the standard v-for directive.
<Accordion>
<AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
@@ -181,384 +179,220 @@ export default {
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| header | -string | -null | -Orientation of tab headers. | -
| active | -boolean | -null | -Visibility of the content. | -
| disabled | -boolean | -false | -Whether the tab is disabled. | -
| Name | +Type | +Default | +Description | +
|---|---|---|---|
| header | +string | +null | +Orientation of tab headers. | +
| active | +boolean | +null | +Visibility of the content. | +
| disabled | +boolean | +false | +Whether the tab is disabled. | +
Any property as style and class are passed to the main container element. Following is the additional property to configure the component.
-| Name | -Type | -Default | -Description | -
|---|---|---|---|
| multiple | -boolean | -false | -When enabled, multiple tabs can be activated at the same time. | -
| activeIndex | -number|array | -null | -Index of the active tab or an array of indexes in multiple mode. | -
Any property as style and class are passed to the main container element. Following is the additional property to configure the component.
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| multiple | +boolean | +false | +When enabled, multiple tabs can be activated at the same time. | +
| activeIndex | +number|array | +null | +Index of the active tab or an array of indexes in multiple mode. | +
| Name | -Parameters | -Description | -
|---|---|---|
| tab-open | -event.originalEvent: Browser event - event.index: Opened tab index - |
- Callback to invoke when a tab gets expanded. | -
| tab-close | -event.originalEvent: Browser event - event.index: Closed tab index - |
- Callback to invoke when an active tab is collapsed by clicking on the header. | -
| Name | +Parameters | +Description | +
|---|---|---|
| tab-open | +event.originalEvent: Browser event + event.index: Opened tab index + |
+ Callback to invoke when a tab gets expanded. | +
| tab-close | +event.originalEvent: Browser event + event.index: Closed tab index + |
+ Callback to invoke when an active tab is collapsed by clicking on the header. | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-accordion | -Container element. | -
| p-accordion-header | -Header of a tab. | -
| p-accordion-content | -Container of a tab. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-accordion | +Container element. | +
| p-accordion-header | +Header of a tab. | +
| p-accordion-content | +Container of a tab. | +
None.
-
-<h5>Default</h5>
-<Accordion :activeIndex="0">
- <AccordionTab header="Header I">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </AccordionTab>
- <AccordionTab header="Header II">
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
- architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
- </AccordionTab>
- <AccordionTab header="Header III">
- <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
- cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
- </AccordionTab>
-</Accordion>
-
-<h5>Multiple</h5>
-<Accordion :multiple="true" :activeIndex="[0]">
- <AccordionTab header="Header I">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </AccordionTab>
- <AccordionTab header="Header II">
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
- architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
- </AccordionTab>
- <AccordionTab header="Header III">
- <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
- cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
- </AccordionTab>
- <AccordionTab header="Header IV" :disabled="true">
- </AccordionTab>
-</Accordion>
-
-<h5>Programmatic</h5>
-<div class="p-pb-3">
- <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
- <Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
- <Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
-</div>
-
-<Accordion v-model:activeIndex="active">
- <AccordionTab header="Header I">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </AccordionTab>
- <AccordionTab header="Header II">
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
- architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
- </AccordionTab>
- <AccordionTab header="Header III">
- <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
- cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
- </AccordionTab>
-</Accordion>
-
-<h5>Custom Headers</h5>
-<Accordion class="accordion-custom" :activeIndex="0">
- <AccordionTab>
- <template #header>
- <i class="pi pi-calendar"></i>
- <span>Header I</span>
- </template>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </AccordionTab>
- <AccordionTab>
- <template #header>
- <i class="pi pi-user"></i>
- <span>Header II</span>
- </template>
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
- architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
- </AccordionTab>
- <AccordionTab>
- <template #header>
- <i class="pi pi-search"></i>
- <span>Header III</span>
- <i class="pi pi-cog"></i>
- </template>
- <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
- cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
- </AccordionTab>
-</Accordion>
-
-<h5>Dynamic Tabs</h5>
-<Accordion>
- <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
- <p>{{tab.content}}</p>
- </AccordionTab>
-</Accordion>
-
-
-export default {
- data() {
- return {
- active: 0,
- tabs: [
- {
- title: 'Header I',
- content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
- },
- {
- title: 'Header II',
- content: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
- architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.`
- },
- {
- title: 'Header III',
- content: `At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
- cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.`
- }
- ]
- }
- }
-}
-
-
-.accordion-custom {
- i, span {
- vertical-align: middle;
- }
-
- span {
- margin: 0 .5rem;
- }
-}
-
-None.
+ \ No newline at end of file diff --git a/src/views/card/CardDoc.vue b/src/views/card/CardDoc.vue index 2437f9089..5e8f36b73 100755 --- a/src/views/card/CardDoc.vue +++ b/src/views/card/CardDoc.vue @@ -1,15 +1,13 @@ -
import Card from 'primevue/card';
Card provides header, title, subtitle, content and footer as the named templates to place content.
+Card provides header, title, subtitle, content and footer as the named templates to place content.
<Card>
<template #header>
@@ -30,170 +28,173 @@ import Card from 'primevue/card';
| Name | -Parameters | -
|---|---|
| header | -- | -
| title | -- | -
| subtitle | -- | -
| content | -- | -
| footer | -- | -
| Name | +Parameters | +
|---|---|
| header | +- | +
| title | +- | +
| subtitle | +- | +
| content | +- | +
| footer | +- | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-card | -Container element. | -
| p-card-title | -Title element. | -
| p-card-subtitle | -Subtitle element. | -
| p-card-content | -Content of the card. | -
| p-card-footer | -Footer of the card. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-card | +Container element. | +
| p-card-title | +Title element. | +
| p-card-subtitle | +Subtitle element. | +
| p-card-content | +Content of the card. | +
| p-card-footer | +Footer of the card. | +
None.
-
-<Card style="width: 25rem; margin-bottom: 2em">
- <template #title>
- Simple Card
- </template>
- <template #content>
- <p>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!</p>
- </template>
-</Card>
-
-<Card style="width: 25em">
- <template #header>
- <img alt="user header" src="demo/images/usercard.png">
- </template>
- <template #title>
- Advanced Card
- </template>
- <template subtitle>
- Card subtitle
- </template>
- <template #content>
- <p>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!</p>
- </template>
- <template #footer>
- <Button icon="pi pi-check" label="Save" />
- <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
- </template>
-</Card>
-
-None.
+ \ No newline at end of file diff --git a/src/views/deferredcontent/DeferredContentDoc.vue b/src/views/deferredcontent/DeferredContentDoc.vue index f225e3849..e5fcc5675 100755 --- a/src/views/deferredcontent/DeferredContentDoc.vue +++ b/src/views/deferredcontent/DeferredContentDoc.vue @@ -1,15 +1,13 @@ -
import DeferredContent from 'primevue/deferredcontent';
DeferredContent is used as a wrapper element of its content..
+DeferredContent is used as a wrapper element of its content..
<DeferredContent>
<DataTable :value="cars">
@@ -22,8 +20,8 @@ import DeferredContent from 'primevue/deferredcontent';
onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.
+onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.
<DeferredContent @load="onDataLoad">
<DataTable :value="cars">
@@ -36,134 +34,74 @@ import DeferredContent from 'primevue/deferredcontent';
Component has no properties.
+Component has no properties.
-| Name | -Parameters | -Description | -
|---|---|---|
| load | -event: Event object | -Callback to invoke when deferred content is loaded.. | -
| Name | +Parameters | +Description | +
|---|---|---|
| load | +event: Event object | +Callback to invoke when deferred content is loaded.. | +
Component does not apply any styling.
+Component does not apply any styling.
-None.
-
-<div style="height: 800px">
- Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
-</div>
-
-<DeferredContent @load="onImageLoad">
- <img src="demo/images/nature/nature4.jpg" alt="Nature"/>
-</DeferredContent>
-
-<div style="height: 500px">
-</div>
-
-<DeferredContent @load="onDataLoad">
- <DataTable :value="products" responsiveLayout="scroll">
- <Column field="code" header="Code"></Column>
- <Column field="name" header="Name"></Column>
- <Column field="category" header="Category"></Column>
- <Column field="quantity" header="Quantity"></Column>
- </DataTable>
-</DeferredContent>
-
-
-import ProductService from '../../service/ProductService';
-
-export default {
- data() {
- return {
- products: null
- }
- },
- productService: null,
- created() {
- this.productService = new ProductService();
- },
- methods: {
- onImageLoad() {
- this.$toast.add({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
- },
- onDataLoad() {
- this.productService.getProductsSmall().then(data => this.products = data);
- this.$toast.add({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'});
- }
- }
-}
-
-None.
+ \ No newline at end of file diff --git a/src/views/divider/DividerDoc.vue b/src/views/divider/DividerDoc.vue index a278973fd..5dbf4e734 100644 --- a/src/views/divider/DividerDoc.vue +++ b/src/views/divider/DividerDoc.vue @@ -1,15 +1,13 @@ -
import Divider from 'primevue/divider';
Divider has two orientations defined with the layout property, default is "horizontal" and the alternative is "vertical".
+Divider has two orientations defined with the layout property, default is "horizontal" and the alternative is "vertical".
<div>Content 1</div>
<Divider />
@@ -17,8 +15,8 @@ import Divider from 'primevue/divider';
Style of the border is configured with the type property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".
+Style of the border is configured with the type property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".
<div>Content 1</div>
<Divider type="dashed"/>
@@ -26,8 +24,8 @@ import Divider from 'primevue/divider';
Vertical divider is enabled by setting the layout property as "vertical".
+Vertical divider is enabled by setting the layout property as "vertical".
<div class="p-d-flex">
<div>Content 1</div>
@@ -39,11 +37,11 @@ import Divider from 'primevue/divider';
Any content placed inside is rendered within the boundaries of the divider. In addition, location - of the content is configured with the align property. In horizontal layout, alignment options - are "left", "center" and "right" whereas vertical mode supports "top", "center" and "bottom". -
+Any content placed inside is rendered within the boundaries of the divider. In addition, location + of the content is configured with the align property. In horizontal layout, alignment options + are "left", "center" and "right" whereas vertical mode supports "top", "center" and "bottom". +
<div>Content 1</div>
@@ -70,404 +68,250 @@ import Divider from 'primevue/divider';
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
-| Name | -Type | -Default | -Description | -
|---|---|---|---|
| align | -string | -null | -Alignment of the content, options are "left", "center", "right" for horizontal layout - and "top", "center", "bottom" for vertical. | -
| layout | -string | -horizontal | -Specifies the orientation, valid values are "horizontal" and "vertical". | -
| type | -String | -solid | -Border style type, default is "solid" and other options are "dashed" and "dotted". | -
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| align | +string | +null | +Alignment of the content, options are "left", "center", "right" for horizontal layout + and "top", "center", "bottom" for vertical. | +
| layout | +string | +horizontal | +Specifies the orientation, valid values are "horizontal" and "vertical". | +
| type | +String | +solid | +Border style type, default is "solid" and other options are "dashed" and "dotted". | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-divider | -Container element. | -
| p-divider-horizontal | -Container element in horizontal layout. | -
| p-divider-vertical | -Container element in vertical layout. | -
| p-divider-solid | -Container element with solid border. | -
| p-divider-dashed | -Container element with dashed border. | -
| p-divider-dotted | -Container element with dotted border. | -
| p-divider-left | -Container element with content aligned to left. | -
| p-divider-right | -Container element with content aligned to right. | -
| p-divider-center | -Container element with content aligned to center. | -
| p-divider-bottom | -Container element with content aligned to bottom. | -
| p-divider-top | -Container element with content aligned to top. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-divider | +Container element. | +
| p-divider-horizontal | +Container element in horizontal layout. | +
| p-divider-vertical | +Container element in vertical layout. | +
| p-divider-solid | +Container element with solid border. | +
| p-divider-dashed | +Container element with dashed border. | +
| p-divider-dotted | +Container element with dotted border. | +
| p-divider-left | +Container element with content aligned to left. | +
| p-divider-right | +Container element with content aligned to right. | +
| p-divider-center | +Container element with content aligned to center. | +
| p-divider-bottom | +Container element with content aligned to bottom. | +
| p-divider-top | +Container element with content aligned to top. | +
None.
-
-<div class="card">
- <h5>Basic</h5>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
- <Divider />
-
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
- architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
-
- <Divider />
-
- <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
- cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
-
- <Divider />
-
- <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
- a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
- Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.</p>
-</div>
-
-<div class="card">
- <h5>Text with Dashed Style</h5>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
- <Divider align="left" type="dashed">
- <b>Left</b>
- </Divider>
-
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
- architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
-
- <Divider align="center" type="dashed">
- <b>Center</b>
- </Divider>
-
- <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
- cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
-
- <Divider align="right" type="dashed">
- <b>Right</b>
- </Divider>
-
- <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
- a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
- Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.</p>
-</div>
-
-<div class="card">
- <h5>Content</h5>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
- <Divider align="left">
- <div class="p-d-inline-flex p-ai-center">
- <i class="pi pi-user p-mr-2"></i>
- <b>Icon</b>
- </div>
- </Divider>
-
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
- architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
-
- <Divider align="center">
- <span class="p-tag">Badge</span>
- </Divider>
-
- <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
- cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
-
- <Divider align="right">
- <Button label="Button" icon="pi pi-search" class="p-button-outlined"></Button>
- </Divider>
-
- <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
- a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
- Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.</p>
-</div>
-
-<div class="card">
- <h5>Vertical</h5>
- <div class="p-d-flex">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
- <Divider layout="vertical" />
-
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
- architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
-
- <Divider layout="vertical" />
-
- <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
- cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
- </div>
-</div>
-
-<div class="card">
- <h5>Vertical with Content</h5>
- <div class="p-grid">
- <div class="p-col-5 p-d-flex p-ai-center p-jc-center">
- <div class="p-fluid">
- <div class="p-field">
- <label for="username">Username</label>
- <InputText id="username" type="text" />
- </div>
- <div class="p-field">
- <label for="password">Password</label>
- <InputText id="password" type="password" />
- </div>
- <Button label="Login"></Button>
- </div>
- </div>
- <div class="p-col-2">
- <Divider layout="vertical">
- <b>OR</b>
- </Divider>
- </div>
- <div class="p-col-5 p-d-flex p-ai-center p-jc-center">
- <Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button>
- </div>
- </div>
-</div>
-</div>
-
-None.
+ \ No newline at end of file diff --git a/src/views/fieldset/FieldsetDoc.vue b/src/views/fieldset/FieldsetDoc.vue index 7f300efa9..76bf97864 100755 --- a/src/views/fieldset/FieldsetDoc.vue +++ b/src/views/fieldset/FieldsetDoc.vue @@ -1,15 +1,13 @@ -
import Fieldset from 'primevue/fieldset';
Fieldset is a container component that accepts content as its children.
+Fieldset is a container component that accepts content as its children.
<Fieldset legend="Godfather I">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
@@ -20,8 +18,8 @@ import Fieldset from 'primevue/fieldset';
Header of the panel is either defined with the legend property or the legend template.
+Header of the panel is either defined with the legend property or the legend template.
<Fieldset>
<template #legend>
@@ -33,8 +31,8 @@ import Fieldset from 'primevue/fieldset';
Content of the fieldset can be expanded and collapsed using toggleable option..
+Content of the fieldset can be expanded and collapsed using toggleable option..
<Fieldset legend="Godfather I" :toggleable="true">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
@@ -53,7 +51,7 @@ import Fieldset from 'primevue/fieldset';
Use the v-model directive to enable two-way binding.
+Use the v-model directive to enable two-way binding.
<button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically</button>
<Fieldset legend="Header Text" :toggleable="true" v-model:collapsed="isCollapsed">
@@ -62,187 +60,142 @@ import Fieldset from 'primevue/fieldset';
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
-| Name | -Type | -Default | -Description | -
|---|---|---|---|
| legend | -string | -null | -Header text of the fieldset. | -
| toggleable | -boolean | -null | -When specified, content can toggled by clicking the legend. | -
| collapsed | -boolean | -null | -Defines the default visibility state of the content. | -
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| legend | +string | +null | +Header text of the fieldset. | +
| toggleable | +boolean | +null | +When specified, content can toggled by clicking the legend. | +
| collapsed | +boolean | +null | +Defines the default visibility state of the content. | +
| Name | -Parameters | -Description | -
|---|---|---|
| toggle | -event.originalEvent: browser event - event.value: collapsed state as a boolean - |
- Callback to invoke when a tab gets expanded or collapsed. | -
| Name | +Parameters | +Description | +
|---|---|---|
| toggle | +event.originalEvent: browser event + event.value: collapsed state as a boolean + |
+ Callback to invoke when a tab gets expanded or collapsed. | +
| Name | -Parameters | -
|---|---|
| legend | -- | -
| Name | +Parameters | +
|---|---|
| legend | +- | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-fieldset | -Fieldset element. | -
| p-fieldset-toggleable | -Toggleable fieldset element. | -
| p-fieldset-legend | -Legend element. | -
| p-fieldset-content | -Content element. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-fieldset | +Fieldset element. | +
| p-fieldset-toggleable | +Toggleable fieldset element. | +
| p-fieldset-legend | +Legend element. | +
| p-fieldset-content | +Content element. | +
None.
-
-<h5>Regular</h5>
-<Fieldset legend="Header">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
- cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-</Fieldset>
-
-<h5>Toggleable</h5>
-<Fieldset legend="Header" :toggleable="true">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
- cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-</Fieldset>
-
-
-export default {
- data() {
- return {
- value1: '',
- value2: '',
- value3: 'PrimeVue'
- }
- }
-}
-
-None.
+ \ No newline at end of file diff --git a/src/views/liveeditor/LiveEditor.vue b/src/views/liveeditor/LiveEditor.vue index 9737f26cc..5b9cd150b 100644 --- a/src/views/liveeditor/LiveEditor.vue +++ b/src/views/liveeditor/LiveEditor.vue @@ -218,6 +218,7 @@ import ContextMenu from 'primevue/contextmenu'; import DataTable from 'primevue/datatable'; import DataView from 'primevue/dataview'; import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions'; +import DeferredContent from 'primevue/deferredcontent'; import Dialog from 'primevue/dialog'; import Divider from 'primevue/divider'; import Dropdown from 'primevue/dropdown'; @@ -316,6 +317,7 @@ app.component('ContextMenu', ContextMenu); app.component('DataTable', DataTable); app.component('DataView', DataView); app.component('DataViewLayoutOptions', DataViewLayoutOptions); +app.component('DeferredContent', DeferredContent); app.component('Dialog', Dialog); app.component('Divider', Divider); app.component('Dropdown', Dropdown); diff --git a/src/views/panel/PanelDoc.vue b/src/views/panel/PanelDoc.vue index 45fadb640..336f2156e 100755 --- a/src/views/panel/PanelDoc.vue +++ b/src/views/panel/PanelDoc.vue @@ -1,15 +1,13 @@ -
import Panel from 'primevue/panel';
Panel is a container component that accepts content as its children.
+Panel is a container component that accepts content as its children.
<Panel header="Header">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -20,8 +18,8 @@ import Panel from 'primevue/panel';
Header of the panel is either defined with the header property or the header template.
+Header of the panel is either defined with the header property or the header template.
<Panel>
<template #header>
@@ -32,8 +30,8 @@ import Panel from 'primevue/panel';
Content of the panel can be expanded and collapsed using toggleable option.
+Content of the panel can be expanded and collapsed using toggleable option.
<Panel header="Header" :toggleable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -44,7 +42,7 @@ import Panel from 'primevue/panel';
To control the initial state of the toggleable panel, use the collapsed property.
+To control the initial state of the toggleable panel, use the collapsed property.
<Panel header="Header Text" :toggleable="true" :collapsed="true">
Content
@@ -52,7 +50,7 @@ import Panel from 'primevue/panel';
Use the v-model directive to enable two-way binding.
+Use the v-model directive to enable two-way binding.
<button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically</button>
@@ -62,9 +60,9 @@ import Panel from 'primevue/panel';
Additional icons can be placed at the header section of the panel using the special icons slot. For a unified look, it is suggest to add .p-panel-header-icon - class to your icons.
+Additional icons can be placed at the header section of the panel using the special icons slot. For a unified look, it is suggest to add .p-panel-header-icon + class to your icons.
<h5>Advanced</h5>
<Panel header="Header">
@@ -78,248 +76,162 @@ import Panel from 'primevue/panel';
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
-| Name | -Type | -Default | -Description | -
|---|---|---|---|
| header | -string | -null | -Header text of the panel. | -
| toggleable | -boolean | -null | -Defines if content of panel can be expanded and collapsed. | -
| collapsed | -boolean | -null | -Defines the initial state of panel content. | -
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| header | +string | +null | +Header text of the panel. | +
| toggleable | +boolean | +null | +Defines if content of panel can be expanded and collapsed. | +
| collapsed | +boolean | +null | +Defines the initial state of panel content. | +
| Name | -Parameters | -Description | -
|---|---|---|
| toggle | -event.originalEvent: browser event - event.value: collapsed state as a boolean - |
- Callback to invoke when a tab toggle. | -
| Name | +Parameters | +Description | +
|---|---|---|
| toggle | +event.originalEvent: browser event + event.value: collapsed state as a boolean + |
+ Callback to invoke when a tab toggle. | +
| Name | -Parameters | -
|---|---|
| header | -- | -
| icons | -- | -
| Name | +Parameters | +
|---|---|
| header | +- | +
| icons | +- | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-panel | -Container element. | -
| p-panel-header | -Header section. | -
| p-panel-title | -Title text of panel. | -
| p-panel-header-icon | -Action icons inside header. | -
| p-panel-toggler | -Toggle icon. | -
| p-panel-content | -Content of panel. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-panel | +Container element. | +
| p-panel-header | +Header section. | +
| p-panel-title | +Title text of panel. | +
| p-panel-header-icon | +Action icons inside header. | +
| p-panel-toggler | +Toggle icon. | +
| p-panel-content | +Content of panel. | +
None.
-
-<h5>Regular</h5>
-<Panel header="Header">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
- cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-</Panel>
-
-<h5>Advanced</h5>
-<Panel header="Header" :toggleable="true">
- <template #icons>
- <button class="p-panel-header-icon p-link p-mr-2" @click="toggle">
- <span class="pi pi-cog"></span>
- </button>
- <Menu id="config_menu" ref="menu" :model="items" :popup="true" />
- </template>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
- cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-</Panel>
-
-
-export default {
- data() {
- return {
- items: [
- {
- label: 'Options',
- items: [{
- label: 'Update',
- icon: 'pi pi-refresh',
- command: () => {
- this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
- }
- },
- {
- label: 'Delete',
- icon: 'pi pi-times',
- command: () => {
- this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
- }
- }
- ]},
- {
- label: 'Navigate',
- items: [{
- label: 'Vue Website',
- icon: 'pi pi-external-link',
- url: 'https://vuejs.org/'
- },
- {
- label: 'Router',
- icon: 'pi pi-upload',
- to: '/fileupload'
- }
- ]}
- ]
- }
- },
- methods: {
- toggle(event) {
- this.$refs.menu.toggle(event);
- },
- save() {
- this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
- }
- }
-}
-
-None.
+ \ No newline at end of file diff --git a/src/views/scrollpanel/ScrollPanelDoc.vue b/src/views/scrollpanel/ScrollPanelDoc.vue index 0e7763239..1b282e775 100644 --- a/src/views/scrollpanel/ScrollPanelDoc.vue +++ b/src/views/scrollpanel/ScrollPanelDoc.vue @@ -1,15 +1,13 @@ -
import ScrollPanel from 'primevue/scrollpanel';
ScrollPanel usage is similar to any container element.
+ScrollPanel usage is similar to any container element.
<ScrollPanel style="width: 100%; height: 200px">
content
@@ -17,8 +15,8 @@ import ScrollPanel from 'primevue/scrollpanel';
Look and feel can easily be customized, here is an example with custom scrollbars.
+Look and feel can easily be customized, here is an example with custom scrollbars.
<ScrollPanel style="width: 100%; height: 200px" class="custom">
content
@@ -43,125 +41,125 @@ import ScrollPanel from 'primevue/scrollpanel';
Any property such as style and class are passed to the main container element. There are no component specific properties.
+Any property such as style and class are passed to the main container element. There are no component specific properties.
-Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-scrollpanel | -Container element. | -
| p-scrollpanel-wrapper | -Wrapper of content section. | -
| p-scrollpanel-content | -Content section. | -
| p-scrollpanel-bar | -Scrollbar handle. | -
| p-scrollpanel-bar-x | -Scrollbar handle of a horizontal bar. | -
| p-scrollpanel-bar-y | -Scrollbar handle of a vertical bar | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-scrollpanel | +Container element. | +
| p-scrollpanel-wrapper | +Wrapper of content section. | +
| p-scrollpanel-content | +Content section. | +
| p-scrollpanel-bar | +Scrollbar handle. | +
| p-scrollpanel-bar-x | +Scrollbar handle of a horizontal bar. | +
| p-scrollpanel-bar-y | +Scrollbar handle of a vertical bar | +
None.
-
-<div class="p-grid">
- <div class="p-col-12 p-md-4 p-p-5">
- <ScrollPanel style="width: 100%; height: 200px">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Vitae et leo duis ut diam.
- Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
- Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
- Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
- Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
- Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
- Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
- Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
- Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
- Mattis aliquam faucibus purus in massa tempor nec.
- </p>
- </ScrollPanel>
- </div>
- <div class="p-col-12 p-md-4 p-p-5">
- <ScrollPanel style="width: 100%; height: 200px" class="custombar1">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Vitae et leo duis ut diam.
- Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
- Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
- Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
- Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
- Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
- Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
- Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
- Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
- Mattis aliquam faucibus purus in massa tempor nec.
- </p>
- </ScrollPanel>
- </div>
- <div class="p-col-12 p-md-4 p-p-5">
- <ScrollPanel style="width: 100%; height: 200px" class="custombar2">
- <p style="width: 600px">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Vitae et leo duis ut diam.
- Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
- Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
- Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
- Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
- Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
- Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
- Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
- Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
- Mattis aliquam faucibus purus in massa tempor nec.
- </p>
- </ScrollPanel>
- </div>
-</div>
+ Dependencies
+ None.
+
-
+
\ No newline at end of file
diff --git a/src/views/splitbutton/SplitButtonDoc.vue b/src/views/splitbutton/SplitButtonDoc.vue
index bc5ef4147..da9fa4fc2 100755
--- a/src/views/splitbutton/SplitButtonDoc.vue
+++ b/src/views/splitbutton/SplitButtonDoc.vue
@@ -1,15 +1,13 @@
-
-
-
- Import
+
+ Import
import SplitButton from 'primevue/splitbutton';
- Getting Started
- SplitButton has a default command button and a collection of additional options defined by the model property.
+ Getting Started
+ SplitButton has a default command button and a collection of additional options defined by the model property.
export default {
data() {
@@ -53,20 +51,20 @@ export default {
- MenuModel
- SplitButton uses the common MenuModel API to define the items, visit MenuModel API for details.
+ MenuModel
+ SplitButton uses the common MenuModel API to define the items, visit MenuModel API for details.
- Severity
- Different color options are available as severity levels.
+ Severity
+ Different color options are available as severity levels.
-
- - .p-button-secondary
- - .p-button-success
- - .p-button-info
- - .p-button-warning
- - .p-button-help
- - .p-button-danger
-
+
+ - .p-button-secondary
+ - .p-button-success
+ - .p-button-info
+ - .p-button-warning
+ - .p-button-help
+ - .p-button-danger
+
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
@@ -79,212 +77,135 @@ export default {
- Properties
- Any property such as tabindex are passed to the underlying input element. Following are the additional properties to configure the component.
-
-
-
-
- Name
- Type
- Default
- Description
-
-
-
-
- label
- string
- null
- Text of the button.
-
-
- icon
- string
- null
- Name of the icon.
-
-
- model
- object
- null
- MenuModel instance to define the overlay items.
-
-
- autoZIndex
- boolean
- true
- Whether to automatically manage layering.
-
-
- baseZIndex
- number
- 0
- Base zIndex value to use in layering.
-
-
- appendTo
- string
- body
- A valid query selector or an HTMLElement to specify where the overlay gets attached.
-
-
-
-
+ Properties
+ Any property such as tabindex are passed to the underlying input element. Following are the additional properties to configure the component.
+
+
+
+
+ Name
+ Type
+ Default
+ Description
+
+
+
+
+ label
+ string
+ null
+ Text of the button.
+
+
+ icon
+ string
+ null
+ Name of the icon.
+
+
+ model
+ object
+ null
+ MenuModel instance to define the overlay items.
+
+
+ autoZIndex
+ boolean
+ true
+ Whether to automatically manage layering.
+
+
+ baseZIndex
+ number
+ 0
+ Base zIndex value to use in layering.
+
+
+ appendTo
+ string
+ body
+ A valid query selector or an HTMLElement to specify where the overlay gets attached.
+
+
+
+
- Events
- Any valid event such as focus, blur and input are passed to the underlying button element. Following are the additional events to configure the component.
-
-
-
-
- Name
- Parameters
- Description
-
-
-
-
- click
- event: Browser event
- Callback to invoke when main button is clicked.
-
-
-
-
+ Events
+ Any valid event such as focus, blur and input are passed to the underlying button element. Following are the additional events to configure the component.
+
+
+
+
+ Name
+ Parameters
+ Description
+
+
+
+
+ click
+ event: Browser event
+ Callback to invoke when main button is clicked.
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
-
-
-
-
- Name
- Element
-
-
-
-
- p-splitbutton
- Container element.
-
-
- p-splitbutton-button
- Dropdown button.
-
-
- p-menu
- Overlay menu.
-
-
-
-
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-splitbutton
+ Container element.
+
+
+ p-splitbutton-button
+ Dropdown button.
+
+
+ p-menu
+ Overlay menu.
+
+
+
+
- Dependencies
- None.
-
-
-
-
-
- View on GitHub
-
-
-<h3>Basic</h3>
-<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
-
-<h3>Severities</h3>
-<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton>
-<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton>
-<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success p-mb-2"></SplitButton>
-<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info p-mb-2"></SplitButton>
-<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning p-mb-2"></SplitButton>
-<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help p-mb-2"></SplitButton>
-<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger p-mb-2"></SplitButton>
-
-
-
-
-export default {
- data() {
- return {
- items: [
- {
- label: 'Update',
- icon: 'pi pi-refresh',
- command: () => {
- this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
- }
- },
- {
- label: 'Delete',
- icon: 'pi pi-times',
- command: () => {
- this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
- }
- },
- {
- label: 'Vue Website',
- icon: 'pi pi-external-link',
- command: () => {
- window.location.href = 'https://vuejs.org/'
- }
- },
- {
- label: 'Upload',
- icon: 'pi pi-upload',
- to: '/fileupload'
- }
- ]
- }
- },
- methods: {
- save() {
- this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
- }
- }
-}
-
-
-
-
-.p-splitbutton {
- margin-right: .5rem;
-}
-
-
-
-
-
+ Dependencies
+ None.
+
\ No newline at end of file
diff --git a/src/views/splitter/SplitterDoc.vue b/src/views/splitter/SplitterDoc.vue
index d3e90a921..d2efe5cd9 100644
--- a/src/views/splitter/SplitterDoc.vue
+++ b/src/views/splitter/SplitterDoc.vue
@@ -1,16 +1,14 @@
-
-
-
- Import
+
+ Import
import Splitter from 'primevue/splitter';
import SplitterPanel from 'primevue/splitterpanel';
- Getting Started
- Splitter requires two SplitterPanel components to wrap.
+ Getting Started
+ Splitter requires two SplitterPanel components to wrap.
<Splitter style="height: 300px">
<SplitterPanel>
@@ -23,8 +21,8 @@ import SplitterPanel from 'primevue/splitterpanel';
- Multiple Panels
- Any number of panels can be nested inside a Splitter.
+ Multiple Panels
+ Any number of panels can be nested inside a Splitter.
<Splitter style="height: 300px">
<SplitterPanel v-for="item of items" :key="item.key">
@@ -34,8 +32,8 @@ import SplitterPanel from 'primevue/splitterpanel';
- Layout
- Default orientation is configured with the layout property and default is the "horizontal" whereas other alternative is the "vertical".
+ Layout
+ Default orientation is configured with the layout property and default is the "horizontal" whereas other alternative is the "vertical".
<Splitter style="height: 300px" layout="vertical">
<SplitterPanel>
@@ -48,8 +46,8 @@ import SplitterPanel from 'primevue/splitterpanel';
- Initial Sizes
- When no size is defined, panels are split 50/50, use the size property to give relative widths e.g. 20/80.
+ Initial Sizes
+ When no size is defined, panels are split 50/50, use the size property to give relative widths e.g. 20/80.
<Splitter style="height: 300px">
<SplitterPanel :size="20" >
@@ -62,8 +60,8 @@ import SplitterPanel from 'primevue/splitterpanel';
- Minimum Size
- Minimum size defines the lowest boundary for the size of a panel.
+ Minimum Size
+ Minimum size defines the lowest boundary for the size of a panel.
<Splitter style="height: 300px">
<SplitterPanel :size="20" :minSize="10">
@@ -76,8 +74,8 @@ import SplitterPanel from 'primevue/splitterpanel';
- Nested Panels
- Splitters can be combined to create advanced layouts.
+ Nested Panels
+ Splitters can be combined to create advanced layouts.
<Splitter style="height: 300px">
<SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20" :minSize="10">
@@ -104,10 +102,10 @@ import SplitterPanel from 'primevue/splitterpanel';
- Stateful
- Splitters can be configured as stateful so that when the user visits the page again, the adjusts sizes
- can be restored. Define a stateKey to enable this feature. Default location of the state is
- session storage and other option is the local storage which can be configured using the stateStorage property.
+ Stateful
+ Splitters can be configured as stateful so that when the user visits the page again, the adjusts sizes
+ can be restored. Define a stateKey to enable this feature. Default location of the state is
+ session storage and other option is the local storage which can be configured using the stateStorage property.
<Splitter stateKey="mykey" stateStorage="local">
<SplitterPanel>
@@ -120,281 +118,276 @@ import SplitterPanel from 'primevue/splitterpanel';
- Properties of SplitterPanel
- Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
-
-
-
-
- Name
- Type
- Default
- Description
-
-
-
-
- size
- number
- null
- Size of the element relative to 100%.
-
-
- minSize
- number
- null
- Minimum size of the element relative to 100%.
-
-
-
-
+ Properties of SplitterPanel
+ Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
+
+
+
+
+ Name
+ Type
+ Default
+ Description
+
+
+
+
+ size
+ number
+ null
+ Size of the element relative to 100%.
+
+
+ minSize
+ number
+ null
+ Minimum size of the element relative to 100%.
+
+
+
+
- Properties of Splitter
- Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
-
-
-
-
- Name
- Type
- Default
- Description
-
-
-
-
- layout
- string
- horizontal
- Orientation of the panels, valid values are "horizontal" and "vertical".
-
-
- gutterSize
- number
- 4
- Size of the divider in pixels.
-
-
- stateKey
- string
- null
- Storage identifier of a stateful Splitter.
-
-
- stateStorage
- string
- session
- Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.
-
-
-
-
+ Properties of Splitter
+ Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
+
+
+
+
+ Name
+ Type
+ Default
+ Description
+
+
+
+
+ layout
+ string
+ horizontal
+ Orientation of the panels, valid values are "horizontal" and "vertical".
+
+
+ gutterSize
+ number
+ 4
+ Size of the divider in pixels.
+
+
+ stateKey
+ string
+ null
+ Storage identifier of a stateful Splitter.
+
+
+ stateStorage
+ string
+ session
+ Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.
+
+
+
+
- Events of Splitter
-
-
-
-
- Name
- Parameters
- Description
-
-
-
-
- resizeend
- event.originalEvent: Original event
- event.sizes: Sizes of the panels as an array
- Callback to invoke when resize ends.
-
-
-
-
+ Events of Splitter
+
+
+
+
+ Name
+ Parameters
+ Description
+
+
+
+
+ resizeend
+ event.originalEvent: Original event
+ event.sizes: Sizes of the panels as an array
+ Callback to invoke when resize ends.
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
-
-
-
-
- Name
- Element
-
-
-
-
- p-splitter
- Container element.
-
-
- p-splitter
- Container element during resize.
-
-
- p-splitter-horizontal
- Container element with horizontal layout.
-
-
- p-splitter-vertical
- Container element with vertical layout.
-
-
- p-splitter-panel
- Splitter panel element.
-
-
- p-splitter-gutter
- Gutter element to use when resizing the panels.
-
-
- p-splitter-gutter-handle
- Handl element of the gutter.
-
-
-
-
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-splitter
+ Container element.
+
+
+ p-splitter
+ Container element during resize.
+
+
+ p-splitter-horizontal
+ Container element with horizontal layout.
+
+
+ p-splitter-vertical
+ Container element with vertical layout.
+
+
+ p-splitter-panel
+ Splitter panel element.
+
+
+ p-splitter-gutter
+ Gutter element to use when resizing the panels.
+
+
+ p-splitter-gutter-handle
+ Handl element of the gutter.
+
+
+
+
- Dependencies
- None.
-
-
-
-
-
- View on GitHub
-
-
-<div class="card">
- <h5>Horizontal</h5>
- <Splitter style="height: 300px">
- <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
- Panel 1
- </SplitterPanel>
- <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
- Panel 2
- </SplitterPanel>
- </Splitter>
-</div>
-
-<div class="card">
- <h5>Vertical</h5>
- <Splitter style="height: 300px" layout="vertical">
- <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
- Panel 1
- </SplitterPanel>
- <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
- Panel 2
- </SplitterPanel>
- </Splitter>
-</div>
-
-<div class="card">
- <h5>Nested</h5>
- <Splitter style="height: 300px">
- <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20" :minSize="10">
- Panel 1
- </SplitterPanel>
- <SplitterPanel :size="80">
- <Splitter layout="vertical">
- <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="15">
- Panel 2
- </SplitterPanel>
- <SplitterPanel :size="85">
- <Splitter>
- <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20">
- Panel 3
- </SplitterPanel>
- <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="80">
- Panel 4
- </SplitterPanel>
- </Splitter>
- </SplitterPanel>
- </Splitter>
- </SplitterPanel>
- </Splitter>
-</div>
-
-
-
-
-
-
+ Dependencies
+ None.
+
\ No newline at end of file
diff --git a/src/views/tabview/TabViewDoc.vue b/src/views/tabview/TabViewDoc.vue
index 17911ca82..1d9db48b4 100755
--- a/src/views/tabview/TabViewDoc.vue
+++ b/src/views/tabview/TabViewDoc.vue
@@ -1,16 +1,14 @@
-
-
-
- Import
+
+ Import
import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
- Getting Started
- Tabview element consists of one or more TabPanel elements. Header of the tab is defined using header attribute.
+ Getting Started
+ Tabview element consists of one or more TabPanel elements. Header of the tab is defined using header attribute.
<TabView>
<TabPanel header="Header I">
@@ -26,8 +24,8 @@ import TabPanel from 'primevue/tabpanel';
- Active
- Visibility of the content is specified with the activeIndex property that supports one or two-way binding.
+ Active
+ Visibility of the content is specified with the activeIndex property that supports one or two-way binding.
<TabView :activeIndex="activeIndex">
<TabPanel header="Header I">
@@ -43,7 +41,7 @@ import TabPanel from 'primevue/tabpanel';
- Two-way binding requires v-model.
+ Two-way binding requires v-model.
<TabView v-model:activeIndex="activeIndex">
<TabPanel header="Header I">
@@ -59,8 +57,8 @@ import TabPanel from 'primevue/tabpanel';
- Disabled
- A tab can be disabled to prevent the content to be displayed by setting the disabled property on a panel.
+ Disabled
+ A tab can be disabled to prevent the content to be displayed by setting the disabled property on a panel.
<TabView>
<TabPanel header="Header I">
@@ -76,8 +74,8 @@ import TabPanel from 'primevue/tabpanel';
- Header Template
- Custom content for the title section of a panel is defined using the header template.
+ Header Template
+ Custom content for the title section of a panel is defined using the header template.
<TabView>
<TabPanel>
@@ -98,8 +96,8 @@ import TabPanel from 'primevue/tabpanel';
- Programmatic Control
- Tabs can be controlled programmatically using activeIndex property.
+ Programmatic Control
+ Tabs can be controlled programmatically using activeIndex property.
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
<Button @click="active = 1" class="p-button-text" label="Activate 2nd" />
@@ -130,8 +128,8 @@ export default {
- Dynamic Tabs
- Tabs can be generated dynamically using the standard v-for directive.
+ Dynamic Tabs
+ Tabs can be generated dynamically using the standard v-for directive.
<TabView>
<TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
@@ -156,400 +154,229 @@ export default {
- Properties of TabPanel
-
-
-
-
- Name
- Type
- Default
- Description
-
-
-
-
- header
- string
- null
- Orientation of tab headers.
-
-
- disabled
- boolean
- null
- Whether the tab is disabled.
-
-
-
-
+ Properties of TabPanel
+
+
+
+
+ Name
+ Type
+ Default
+ Description
+
+
+
+
+ header
+ string
+ null
+ Orientation of tab headers.
+
+
+ disabled
+ boolean
+ null
+ Whether the tab is disabled.
+
+
+
+
- Properties of TabView
- Any additional properties like style and class are passed to the main container element.
-
-
-
-
- Name
- Type
- Default
- Description
-
-
-
-
- activeIndex
- number
- 0
- Index of the active tab.
-
-
-
-
+ Properties of TabView
+ Any additional properties like style and class are passed to the main container element.
+
+
+
+
+ Name
+ Type
+ Default
+ Description
+
+
+
+
+ activeIndex
+ number
+ 0
+ Index of the active tab.
+
+
+
+
- Events
-
-
-
-
- Name
- Parameters
- Description
-
-
-
-
- tab-change
- event.originalEvent: Browser event
- event.index: Index of the selected tab
-
- Callback to invoke when an active tab is changed.
-
-
- tab-click
- event.originalEvent: Browser event
- event.index: Index of the clicked tab
-
- Callback to invoke when an active tab is clicked.
-
-
-
-
+ Events
+
+
+
+
+ Name
+ Parameters
+ Description
+
+
+
+
+ tab-change
+ event.originalEvent: Browser event
+ event.index: Index of the selected tab
+
+ Callback to invoke when an active tab is changed.
+
+
+ tab-click
+ event.originalEvent: Browser event
+ event.index: Index of the clicked tab
+
+ Callback to invoke when an active tab is clicked.
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
-
-
-
-
- Name
- Element
-
-
-
-
- p-tabview
- Container element.
-
-
- p-tabview-nav
- Container of headers.
-
-
- p-tabview-selected
- Selected tab header.
-
-
- p-tabview-panels
- Container panels.
-
-
- p-tabview-panel
- Content of a tab.
-
-
-
-
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-tabview
+ Container element.
+
+
+ p-tabview-nav
+ Container of headers.
+
+
+ p-tabview-selected
+ Selected tab header.
+
+
+ p-tabview-panels
+ Container panels.
+
+
+ p-tabview-panel
+ Content of a tab.
+
+
+
+
- Dependencies
- None.
-
-
-
-
-
- View on GitHub
-
-
-<div class="card">
- <h5>Default</h5>
- <TabView>
- <TabPanel header="Header I">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </TabPanel>
- <TabPanel header="Header II">
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
- architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
- </TabPanel>
- <TabPanel header="Header III">
- <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
- cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
- </TabPanel>
- </TabView>
-</div>
-
-<div class="card">
- <h5>Programmatic</h5>
- <div class="p-py-2">
- <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
- <Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
- <Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
- </div>
-
- <TabView ref="tabview2" v-model:activeIndex="active">
- <TabPanel header="Header I">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </TabPanel>
- <TabPanel header="Header II">
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
- architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
- </TabPanel>
- <TabPanel header="Header III">
- <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
- cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
- </TabPanel>
- </TabView>
-</div>
-
-<div class="card">
- <h5>Disabled</h5>
- <TabView>
- <TabPanel header="Header I">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </TabPanel>
- <TabPanel header="Header II">
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
- architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
- </TabPanel>
- <TabPanel header="Header III">
- <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
- cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
- </TabPanel>
- <TabPanel header="Header IV" :disabled="true"></TabPanel>
- </TabView>
-</div>
-
-<div class="card">
- <h5>Custom Headers</h5>
- <TabView class="tabview-custom">
- <TabPanel>
- <template #header>
- <i class="pi pi-calendar"></i>
- <span>Header I</span>
- </template>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </TabPanel>
- <TabPanel>
- <template #header>
- <span>Header II</span>
- <i class="pi pi-user"></i>
- </template>
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
- architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
- </TabPanel>
- <TabPanel>
- <template #header>
- <i class="pi pi-search"></i>
- <span>Header III</span>
- <i class="pi pi-cog"></i>
- </template>
- <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
- cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
- </TabPanel>
- </TabView>
-</div>
-
-<div class="card">
- <h5>Dynamic Tabs</h5>
- <TabView>
- <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
- <p>{{tab.content}}</p>
- </TabPanel>
- </TabView>
-</div>
-
-
-
-
-export default {
- data() {
- return {
- active: 0,
- tabs: [
- {
- title: 'Header I',
- content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
- },
- {
- title: 'Header II',
- content: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
- architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.`
- },
- {
- title: 'Header III',
- content: `At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
- cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
- Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.`
- }
- ]
- }
- }
-}
-
-
-
-
-.tabview-custom {
- i, span {
- vertical-align: middle;
- }
-
- span {
- margin: 0 .5rem;
- }
-}
-
-
-
-
-
+ Dependencies
+ None.
+
\ No newline at end of file
diff --git a/src/views/toolbar/ToolbarDoc.vue b/src/views/toolbar/ToolbarDoc.vue
index cba711a6c..79f301d58 100755
--- a/src/views/toolbar/ToolbarDoc.vue
+++ b/src/views/toolbar/ToolbarDoc.vue
@@ -1,15 +1,13 @@
-
-
-
- Import
+
+ Import
import Toolbar from 'primevue/toolbar';
- Getting Started
- Toolbar provides left and right templates to place content at these sections.
+ Getting Started
+ Toolbar provides left and right templates to place content at these sections.
<Toolbar>
<template #left>
@@ -28,146 +26,84 @@ import Toolbar from 'primevue/toolbar';
- Slots
-
-
-
-
- Name
- Parameters
-
-
-
-
- left
- -
-
-
- right
- -
-
-
-
-
+ Slots
+
+
+
+
+ Name
+ Parameters
+
+
+
+
+ left
+ -
+
+
+ right
+ -
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
-
-
-
-
- Name
- Element
-
-
-
-
- p-toolbar
- Main container element.
-
-
- p-toolbar-group-left
- Left content container.
-
-
- p-toolbar-group-right
- Right content container.
-
-
-
-
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-toolbar
+ Main container element.
+
+
+ p-toolbar-group-left
+ Left content container.
+
+
+ p-toolbar-group-right
+ Right content container.
+
+
+
+
- Dependencies
- None.
-
-
-
-
-
- View on GitHub
-
-
-<Toolbar>
- <template #left>
- <Button label="New" icon="pi pi-plus" class="p-mr-2" />
- <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
- <i class="pi pi-bars p-toolbar-separator p-mr-2" />
- <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
- </template>
-
- <template #right>
- <Button icon="pi pi-search" class="p-mr-2" />
- <Button icon="pi pi-calendar" class="p-button-success p-mr-2" />
- <Button icon="pi pi-times" class="p-button-danger" />
- </template>
-</Toolbar>
-
-
-
-
-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: () => {
- this.$router.push('fileupload');
- }
- }
- ]
- }
- }
-}
-
-
-
-
-
+ Dependencies
+ None.
+
\ No newline at end of file