import Avatar from 'primevue/avatar';
import AvatarGroup from 'primevue/avatargroup';
Avatar has three built-in display modes; "label", "icon" and "image".
+Avatar has three built-in display modes; "label", "icon" and "image".
<Avatar label="P" />
<Avatar icon="pi pi-search" />
@@ -18,15 +16,15 @@ import AvatarGroup from 'primevue/avatargroup';
size property defines the size of the Avatar with "large" and "xlarge" as possible values.
+size property defines the size of the Avatar with "large" and "xlarge" as possible values.
<Avatar label="P" size="large"/>
A set of Avatars can be displayed together using the AvatarGroup component.
+A set of Avatars can be displayed together using the AvatarGroup component.
<AvatarGroup>
<Avatar label="P" />
@@ -36,22 +34,22 @@ import AvatarGroup from 'primevue/avatargroup';
</AvatarGroup>
Avatar comes in two different styles specified with the shape property, "square" is the default and "circle" is the alternative.
+Avatar comes in two different styles specified with the shape property, "square" is the default and "circle" is the alternative.
<Avatar label="P" shape="circle"/>
A badge can be added to an Avatar with the
A badge can be added to an Avatar with the
<Avatar image="user.png" size="xlarge" v-badge.danger="4" />
Content can easily be customized with the default slot instead of using the built-in modes.
+Content can easily be customized with the default slot instead of using the built-in modes.
<Avatar>
Content
@@ -59,316 +57,310 @@ import AvatarGroup from 'primevue/avatargroup';
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 | -
|---|---|---|---|
| label | -string | -null | -Defines the text to display. | -
| icon | -string | -null | -Defines the icon to display. | -
| image | -string | -null | -Defines the image to display. | -
| size | -string | -null | -Size of the element, valid options are "large" and "xlarge". | -
| shape | -string | -square | -Shape of the element, valid options are "square" and "circle". | -
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 | +
|---|---|---|---|
| label | +string | +null | +Defines the text to display. | +
| icon | +string | +null | +Defines the icon to display. | +
| image | +string | +null | +Defines the image to display. | +
| size | +string | +null | +Size of the element, valid options are "large" and "xlarge". | +
| shape | +string | +square | +Shape of the element, valid options are "square" and "circle". | +
Any property as style and class are passed to the main container element. There are no additional properties.
+Any property as style and class are passed to the main container element. There are no additional properties.
-Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-avatar | -Container element. | -
| p-avatar-image | -Container element in image mode. | -
| p-avatar-circle | -Container element with a circle shape. | -
| p-avatar-text | -Text of the Avatar. | -
| p-avatar-icon | -Icon of the Avatar. | -
| p-avatar-lg | -Container element with a large size. | -
| p-avatar-xl | -Container element with an xlarge size. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-avatar | +Container element. | +
| p-avatar-image | +Container element in image mode. | +
| p-avatar-circle | +Container element with a circle shape. | +
| p-avatar-text | +Text of the Avatar. | +
| p-avatar-icon | +Icon of the Avatar. | +
| p-avatar-lg | +Container element with a large size. | +
| p-avatar-xl | +Container element with an xlarge size. | +
| Name | -Element | -
|---|---|
| p-avatar-group | -Container element. | -
| Name | +Element | +
|---|---|
| p-avatar-group | +Container element. | +
None.
-
-<div class="p-grid">
- <div class="p-col-12 p-md-4">
- <div class="card">
- <h5>Label</h5>
- <Avatar label="P" class="p-mr-2" size="xlarge" />
- <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
- <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
- </div>
- </div>
-
- <div class="p-col-12 p-md-4">
- <div class="card">
- <h5>Label - Circle</h5>
- <Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
- <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
- <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
- </div>
- </div>
-
- <div class="p-col-12 p-md-4">
- <div class="card">
- <h5>Label - Badge</h5>
- <Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
- </div>
- </div>
-</div>
-
-<div class="p-grid">
- <div class="p-col-12 p-md-4">
- <div class="card">
- <h5>Icon</h5>
- <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
- <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
- <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
- </div>
- </div>
-
- <div class="p-col-12 p-md-4">
- <div class="card">
- <h5>Icon - Circle</h5>
- <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
- <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
- <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
- </div>
- </div>
-
- <div class="p-col-12 p-md-4">
- <div class="card">
- <h5>Icon - Badge</h5>
- <Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
- </div>
- </div>
-</div>
-
-<div class="p-grid">
- <div class="p-col-12 p-md-4">
- <div class="card">
- <h5>Image</h5>
- <Avatar image="demo/images/avatar/amyelsner.png" class="p-mr-2" size="xlarge" shape="circle" />
- <Avatar image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" size="large" shape="circle" />
- <Avatar image="demo/images/avatar/onyamalimba.png" class="p-mr-2" shape="circle" />
- </div>
- </div>
-
- <div class="p-col-12 p-md-4">
- <div class="card">
- <h5>Avatar Group</h5>
- <AvatarGroup class="p-mb-3">
- <Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle"/>
- <Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle"/>
- <Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/>
- <Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle"/>
- <Avatar image="demo/images/avatar/xuxuefeng.png" size="large" shape="circle"/>
- <Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
- </AvatarGroup>
- </div>
- </div>
-
- <div class="p-col-12 p-md-4">
- <div class="card">
- <h5>Image - Badge</h5>
- <Avatar image="demo/images/organization/walter.jpg" size="xlarge" v-badge.danger="4" />
- </div>
- </div>
-</div>
-
-None.
+ diff --git a/src/views/badge/BadgeDoc.vue b/src/views/badge/BadgeDoc.vue index 7af21ccb3..e4fa0b74e 100644 --- a/src/views/badge/BadgeDoc.vue +++ b/src/views/badge/BadgeDoc.vue @@ -1,29 +1,27 @@ -Badge can either be used as a standalone component or as a directive.
+Badge can either be used as a standalone component or as a directive.
-
import Badge from 'primevue/badge';
Content of the badge is specified using the value property.
+Content of the badge is specified using the value property.
<Badge value="2"></Badge>
+ Directive
+
import BadgeDirective from 'primevue/badgedirective';
- When used as a directive, badge needs to be configured at the application with a name of your choice.
+ When used as a directive, badge needs to be configured at the application with a name of your choice.
import BadgeDirective from 'primevue/badgedirective';
@@ -31,22 +29,22 @@ Vue.directive('badge', BadgeDirective);
- Next step is attaching it to an element.
+ Next step is attaching it to an element.
<i class="pi pi-bell" v-badge="2"></i>
- Severities
- Different color options are available as severity levels. When used as a component use the severity property
- to apply a severity and use a modifier as the severity value in directive mode.
+ Severities
+ Different color options are available as severity levels. When used as a component use the severity property
+ to apply a severity and use a modifier as the severity value in directive mode.
-
- - success
- - info
- - warning
- - danger
-
+
+ - success
+ - info
+ - warning
+ - danger
+
<Badge value="2" severity="success"></Badge>
@@ -55,8 +53,8 @@ Vue.directive('badge', BadgeDirective);
- Button Badges
- Buttons provide integrated badge support with the badge and badgeClass properties.
+ Button Badges
+ Buttons provide integrated badge support with the badge and badgeClass properties.
<Button type="button" label="Emails" badge="8" />
@@ -64,9 +62,9 @@ Vue.directive('badge', BadgeDirective);
- Sizes
- Badge sizes are adjusted with the size property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently
- sizes only apply to component mode.
+ Sizes
+ Badge sizes are adjusted with the size property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently
+ sizes only apply to component mode.
<Badge value="2"></Badge>
<Badge value="4" size="large" severity="warning"></Badge>
@@ -74,183 +72,178 @@ Vue.directive('badge', BadgeDirective);
- In addition, when placed inside another element, badge sizes can also derive their size from their parent.
+ In addition, when placed inside another element, badge sizes can also derive their size from their parent.
<h1>Heading 1 <Badge value="New"></Badge></h1>
<h2>Heading 2 <Badge value="New"></Badge></h2>
- Properties
- 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
-
-
-
-
- value
- any
- null
- Value to display inside the badge.
-
-
- severity
- string
- null
- Severity type of the badge.
-
-
- size
- string
- null
- Size of the badge, valid options are "large" and "xlarge".
-
-
-
-
+ Properties
+ 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
+
+
+
+
+ value
+ any
+ null
+ Value to display inside the badge.
+
+
+ severity
+ string
+ null
+ Severity type of the badge.
+
+
+ size
+ string
+ null
+ Size of the badge, valid options are "large" and "xlarge".
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
-
-
-
-
- Name
- Element
-
-
-
-
- p-badge
- Badge element
-
-
- p-overlay-badge
- Wrapper of a badge and its target.
-
-
- p-badge-dot
- Badge element with no value.
-
-
- p-badge-success
- Badge element with success severity.
-
-
- p-badge-info
- Badge element with info severity.
-
-
- p-badge-warning
- Badge element with warning severity.
-
-
- p-badge-danger
- Badge element with danger severity.
-
-
- p-badge-lg
- Large badge element
-
-
- p-badge-xl
- Extra large badge element
-
-
-
-
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-badge
+ Badge element
+
+
+ p-overlay-badge
+ Wrapper of a badge and its target.
+
+
+ p-badge-dot
+ Badge element with no value.
+
+
+ p-badge-success
+ Badge element with success severity.
+
+
+ p-badge-info
+ Badge element with info severity.
+
+
+ p-badge-warning
+ Badge element with warning severity.
+
+
+ p-badge-danger
+ Badge element with danger severity.
+
+
+ p-badge-lg
+ Large badge element
+
+
+ p-badge-xl
+ Extra large badge element
+
+
+
+
- Dependencies
- None.
-
-<h5>Numbers</h5>
-<Badge value="2" class="p-mr-2"></Badge>
-<Badge value="8" severity="success" class="p-mr-2"></Badge>
-<Badge value="4" severity="info" class="p-mr-2"></Badge>
-<Badge value="12" severity="warning" class="p-mr-2"></Badge>
-<Badge value="3" severity="danger"></Badge>
-
-<h5 class="p-mb-4">Positioned Badge</h5>
-<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
-<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
-<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
-
-<h5>Button Badge</h5>
-<Button type="button" label="Emails" badge="8" class="p-mr-2" />
-<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
-
-<h5>Sizes</h5>
-<Badge value="2" class="p-mr-2"></Badge>
-<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
-<Badge value="6" size="xlarge" severity="success"></Badge>
-
-None.
+ \ No newline at end of file diff --git a/src/views/blockui/BlockUIDoc.vue b/src/views/blockui/BlockUIDoc.vue index 73df34860..36bd916d1 100755 --- a/src/views/blockui/BlockUIDoc.vue +++ b/src/views/blockui/BlockUIDoc.vue @@ -1,17 +1,15 @@ -
import BlockUI from 'primevue/blockui';
BlockUI is controlled using the blocked property, by default target element to block is the child component. In example below, panel gets blocked - with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false. -
+BlockUI is controlled using the blocked property, by default target element to block is the child component. In example below, panel gets blocked + with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false. +
<BlockUI :blocked="blockedPanel">
<Panel header="Header">
@@ -40,196 +38,135 @@ export default {
In full screen mode, instead of a particular element, the whole document gets blocked. Set fullScreen as true in order to enable this functionality.
+In full screen mode, instead of a particular element, the whole document gets blocked. Set fullScreen as true in order to enable this functionality.
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
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 | -
|---|---|---|---|
| blocked | -array | -null | -Controls the blocked state. | -
| fullscreen | -menuitem | -null | -When enabled, the whole document gets blocked. | -
| baseZIndex | -number | -0 | -Base zIndex value to use in layering. | -
| autoZIndex | -boolean | -true | -Whether to automatically manage layering. | -
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 | +
|---|---|---|---|
| blocked | +array | +null | +Controls the blocked state. | +
| fullscreen | +menuitem | +null | +When enabled, the whole document gets blocked. | +
| baseZIndex | +number | +0 | +Base zIndex value to use in layering. | +
| autoZIndex | +boolean | +true | +Whether to automatically manage layering. | +
| Name | -Parameters | -Description | -
|---|---|---|
| block | -- | -Fired when the element gets blocked. | -
| unblock | -- | -Fired when the element gets unblocked. | -
| Name | +Parameters | +Description | +
|---|---|---|
| block | +- | +Fired when the element gets blocked. | +
| unblock | +- | +Fired when the element gets unblocked. | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-blockui | -Mask element. | -
| p-blockui-document | -Mask element in full screen mode. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-blockui | +Mask element. | +
| p-blockui-document | +Mask element in full screen mode. | +
None.
-
-<h3>Document</h3>
-<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
-
-<Button type="button" label="Block" @click="blockDocument()"></Button>
-
-<h3>Panel</h3>
-<Button type="button" label="Block" @click="blockPanel()"></Button>
-<Button type="button" label="Unblock" @click="unblockPanel()"></Button>
-
-<BlockUI :blocked="blockedPanel">
- <Panel header="Godfather I" style="margin-top: 20px">
- <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
- His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
- 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.</p>
- </Panel>
-</BlockUI>
-
-
-export default {
- data() {
- return {
- blockedPanel: false,
- blockedDocument: false
- }
- },
- methods: {
- blockDocument() {
- this.blockedDocument = true;
-
- setTimeout(() => {
- this.blockedDocument = false;
- }, 3000);
- },
- blockPanel() {
- this.blockedPanel = true;
- },
- unblockPanel() {
- this.blockedPanel = false;
- }
- }
-}
-
-None.
+ \ No newline at end of file diff --git a/src/views/carousel/CarouselDoc.vue b/src/views/carousel/CarouselDoc.vue index b1f1847ed..3f36a6da1 100755 --- a/src/views/carousel/CarouselDoc.vue +++ b/src/views/carousel/CarouselDoc.vue @@ -1,15 +1,13 @@ -
import Carousel from 'primevue/carousel';
Carousel requires a collection of items as its value along with a template to render each item.
+Carousel requires a collection of items as its value along with a template to render each item.
<Carousel :value="cars">
<template #item="slotProps">
@@ -18,8 +16,8 @@ import Carousel from 'primevue/carousel';
Number of items per page is defined using the numVisible property whereas number of items to scroll is defined with the numScroll property.
+Number of items per page is defined using the numVisible property whereas number of items to scroll is defined with the numScroll property.
<Carousel :value="cars" :numVisible="3" :numScroll="1">
<template #item="slotProps">
@@ -28,9 +26,9 @@ import Carousel from 'primevue/carousel';
For responsive design, numVisible and numScroll can be defined using the responsiveOptions property that should be an array of - objects whose breakpoint defines the max-width to apply the settings.
+For responsive design, numVisible and numScroll can be defined using the responsiveOptions property that should be an array of + objects whose breakpoint defines the max-width to apply the settings.
<Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header>
@@ -83,8 +81,8 @@ data() {
Custom content projection is available using the header and footer templates.
+Custom content projection is available using the header and footer templates.
<Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
@@ -101,8 +99,8 @@ data() {
Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the orientation property.
+Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the orientation property.
<Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
@@ -112,8 +110,8 @@ data() {
When autoplayInterval is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling circular property needs to be enabled. Note that in autoplay mode, circular is enabled by default.
+When autoplayInterval is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling circular property needs to be enabled. Note that in autoplay mode, circular is enabled by default.
<Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000">
<template #header>
@@ -126,265 +124,269 @@ data() {
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| value | -array | -null | -An array of objects to display. | -
| page | -number | -null | -Index of the first item. | -
| circular | -boolean | -false | -Defines if scrolling would be infinite. | -
| autoplayInterval | -number | -null | -Time in milliseconds to scroll items automatically. | -
| numVisible | -number | -1 | -Number of items per page. | -
| numScroll | -number | -1 | -Number of items to scroll. | -
| responsiveOptions | -any | -null | -An array of options for responsive design. | -
| orientation | -string | -horizontal | -Specifies the layout of the component, valid values are "horizontal" and "vertical". | -
| verticalViewPortHeight | -string | -300px | -Height of the viewport in vertical layout. | -
| contentClass | -string | -null | -Style class of main content. | -
| containerClass | -string | -null | -Style class of the viewport container. | -
| indicatorsContentClass | -string | -null | -Style class of the indicator items. | -
| Name | +Type | +Default | +Description | +
|---|---|---|---|
| value | +array | +null | +An array of objects to display. | +
| page | +number | +null | +Index of the first item. | +
| circular | +boolean | +false | +Defines if scrolling would be infinite. | +
| autoplayInterval | +number | +null | +Time in milliseconds to scroll items automatically. | +
| numVisible | +number | +1 | +Number of items per page. | +
| numScroll | +number | +1 | +Number of items to scroll. | +
| responsiveOptions | +any | +null | +An array of options for responsive design. | +
| orientation | +string | +horizontal | +Specifies the layout of the component, valid values are "horizontal" and "vertical". | +
| verticalViewPortHeight | +string | +300px | +Height of the viewport in vertical layout. | +
| contentClass | +string | +null | +Style class of main content. | +
| containerClass | +string | +null | +Style class of the viewport container. | +
| indicatorsContentClass | +string | +null | +Style class of the indicator items. | +
| Name | -Parameters | -
|---|---|
| header | -- | -
| item | -data: Data of the component - index: Index of the item |
-
| footer | -- | -
| Name | +Parameters | +
|---|---|
| header | +- | +
| item | +data: Data of the component + index: Index of the item |
+
| footer | +- | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-carousel | -Container element. | -
| p-carousel-header | -Header section. | -
| p-carousel-footer | -Footer section. | -
| p-carousel-content | -Main content element. It contains the container of the viewport. | -
| p-carousel-container | -Container of the viewport. It contains navigation buttons and viewport. | -
| p-carousel-items-content | -Viewport. | -
| p-carousel-indicators | -Container of the indicators. | -
| p-carousel-indicator | -Indicator element. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-carousel | +Container element. | +
| p-carousel-header | +Header section. | +
| p-carousel-footer | +Footer section. | +
| p-carousel-content | +Main content element. It contains the container of the viewport. | +
| p-carousel-container | +Container of the viewport. It contains navigation buttons and viewport. | +
| p-carousel-items-content | +Viewport. | +
| p-carousel-indicators | +Container of the indicators. | +
| p-carousel-indicator | +Indicator element. | +
None.
-
-<div class="card">
-<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
- <template #header>
- <h5>Basic</h5>
- </template>
- <template #item="slotProps">
- <div class="product-item">
- <div class="product-item-content">
- <div class="p-mb-3">
- <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
- </div>
- <div>
- <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
- <h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
- <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
- <div class="car-buttons p-mt-5">
- <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
- <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
- <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
- </div>
- </div>
- </div>
- </div>
- </template>
-</Carousel>
-</div>
-
-<div class="card">
-<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
- <template #header>
- <h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
- </template>
- <template #item="slotProps">
- <div class="product-item">
- <div class="product-item-content">
- <div class="p-mb-3">
- <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
- </div>
- <div>
- <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
- <h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
- <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
- <div class="car-buttons p-mt-5">
- <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
- <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
- <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
- </div>
- </div>
- </div>
- </div>
- </template>
-</Carousel>
-</div>
-
-<div class="card">
-<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="352px"
- style="max-width: 400px; margin-top: 2em">
- <template #header>
- <h5>Vertical</h5>
- </template>
- <template #item="slotProps">
- <div class="product-item">
- <div class="product-item-content">
- <div class="p-mb-3">
- <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
- </div>
- <div>
- <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
- <h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
- <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
- <div class="car-buttons p-mt-5">
- <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
- <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
- <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
- </div>
- </div>
- </div>
- </div>
- </template>
-</Carousel>
+ Dependencies
+ None.
+
-
-import ProductService from '../../service/ProductService';
+
diff --git a/src/views/chip/ChipDoc.vue b/src/views/chip/ChipDoc.vue
index 9ea5418f0..5adb30bdc 100644
--- a/src/views/chip/ChipDoc.vue
+++ b/src/views/chip/ChipDoc.vue
@@ -1,15 +1,13 @@
-
-
-
- Import
+
+ Import
import Chip from 'primevue/chip';
- Getting Started
- Chip can display labels, icons and images.
+ Getting Started
+ Chip can display labels, icons and images.
<Chip label="Text Only" />
<Chip label="Text with icon" icon="pi pi-check" />
@@ -17,16 +15,16 @@ import Chip from 'primevue/chip';
- Removable
- Setting removable property displays an icon to close the chip, the optional remove
- event is available to get notified when a chip is hidden.
+ Removable
+ Setting removable property displays an icon to close the chip, the optional remove
+ event is available to get notified when a chip is hidden.
<Chip label="Text" removable />
- Templating
- Content can easily be customized with the default slot instead of using the built-in modes.
+ Templating
+ Content can easily be customized with the default slot instead of using the built-in modes.
<Chip>
Content
@@ -34,206 +32,210 @@ import Chip from 'primevue/chip';
- Properties
- 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
-
-
-
-
- label
- string
- null
- Defines the text to display.
-
-
- icon
- string
- null
- Defines the icon to display.
-
-
- image
- string
- null
- Defines the image to display.
-
-
- removable
- boolean
- false
- Whether to display a remove icon.
-
-
- removeIconClass
- string
- pi pi-times-circle
- Icon of the remove element.
-
-
-
-
+ Properties
+ 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
+
+
+
+
+ label
+ string
+ null
+ Defines the text to display.
+
+
+ icon
+ string
+ null
+ Defines the icon to display.
+
+
+ image
+ string
+ null
+ Defines the image to display.
+
+
+ removable
+ boolean
+ false
+ Whether to display a remove icon.
+
+
+ removeIconClass
+ string
+ pi pi-times-circle
+ Icon of the remove element.
+
+
+
+
- Events
-
-
-
-
- Name
- Parameters
- Description
-
-
-
-
- remove
- event: Browser event
- Callback to invoke when a chip is removed.
-
-
-
-
+ Events
+
+
+
+
+ Name
+ Parameters
+ Description
+
+
+
+
+ remove
+ event: Browser event
+ Callback to invoke when a chip is removed.
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
-
-
-
-
- Name
- Element
-
-
-
-
- p-chip
- Container element.
-
-
- p-chip-image
- Container element in image mode.
-
-
- p-chip-text
- Text of the chip.
-
-
- pi-chip-remove-icon
- Remove icon.
-
-
-
-
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-chip
+ Container element.
+
+
+ p-chip-image
+ Container element in image mode.
+
+
+ p-chip-text
+ Text of the chip.
+
+
+ pi-chip-remove-icon
+ Remove icon.
+
+
+
+
- Dependencies
- None.
-
-
-
-
-
- View on GitHub
-
-
-<h5>Basic</h5>
-<div class="p-d-flex p-ai-center">
- <Chip label="Action" class="p-mr-2" />
- <Chip label="Comedy" class="p-mr-2" />
- <Chip label="Mystery" class="p-mr-2" />
- <Chip label="Thriller" removable />
-</div>
-
-<h5>Icon</h5>
-<div class="p-d-flex p-ai-center">
- <Chip label="Apple" icon="pi pi-apple" class="p-mr-2" />
- <Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2" />
- <Chip label="Google" icon="pi pi-google" class="p-mr-2" />
- <Chip label="Microsoft" icon="pi pi-microsoft" removable />
-</div>
-
-<h5>Image</h5>
-<div class="p-d-flex p-ai-center">
- <Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="p-mr-2" />
- <Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" />
- <Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2" />
- <Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" removable />
-</div>
-
-<h5>Styling</h5>
-<div class="p-d-flex p-ai-center">
- <Chip label="Action" class="p-mr-2 custom-chip" />
- <Chip label="Apple" icon="pi pi-apple" class="p-mr-2 custom-chip" />
- <Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2 custom-chip" />
- <Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable />
-</div>
-
-
-
-
-
-
+ Dependencies
+ None.
+
\ No newline at end of file
diff --git a/src/views/inplace/InplaceDoc.vue b/src/views/inplace/InplaceDoc.vue
index 04dcf3b11..7e816e520 100755
--- a/src/views/inplace/InplaceDoc.vue
+++ b/src/views/inplace/InplaceDoc.vue
@@ -1,8 +1,6 @@
-
-
-
- Import
+
+ Import
import Inplace from 'primevue/inplace';
@@ -184,134 +182,59 @@ export default {
Dependencies
None.
-
-
-
-
-
- View on GitHub
-
-
-<h3>Input</h3>
-<Inplace :closable="true">
- <template #display>
- {{text || 'Click to Edit'}}
- </template>
- <template #content>
- <InputText v-model="text" autoFocus />
- </template>
-</Inplace>
-
-<h3>Image</h3>
-<Inplace>
- <template #display>
- <span class="pi pi-search" style="vertical-align: middle"></span>
- <span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
- </template>
- <template #content>
- <img src="demo/images/nature/nature1.jpg" />
- </template>
-</Inplace>
-
-<h3>Lazy Data</h3>
-<Inplace @open="loadData">
- <template #display>
- View Data
- </template>
- <template #content>
- <DataTable :value="products">
- <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>
- </template>
-</Inplace>
-
-
-
-
-import ProductService from '../../service/ProductService';
-
-export default {
- data() {
- return {
- text: null,
- products: null
- }
- },
- productService: null,
- created() {
- this.productService = new ProductService();
- },
- methods: {
- loadData() {
- this.productService.getProductsSmall().then(data => this.products = data);
- }
- }
-}
-
-
-
-
-
+
\ No newline at end of file
diff --git a/src/views/liveeditor/LiveEditor.vue b/src/views/liveeditor/LiveEditor.vue
index 63b481e79..ba7ef6e39 100644
--- a/src/views/liveeditor/LiveEditor.vue
+++ b/src/views/liveeditor/LiveEditor.vue
@@ -198,6 +198,7 @@ import Avatar from 'primevue/avatar';
import AvatarGroup from 'primevue/avatargroup';
import Badge from 'primevue/badge';
import BadgeDirective from "primevue/badgedirective";
+import BlockUI from 'primevue/blockui';
import Button from 'primevue/button';
import Breadcrumb from 'primevue/breadcrumb';
import Calendar from 'primevue/calendar';
@@ -247,6 +248,7 @@ import PanelMenu from 'primevue/panelmenu';
import Password from 'primevue/password';
import PickList from 'primevue/picklist';
import ProgressBar from 'primevue/progressbar';
+import ProgressSpinner from 'primevue/progressspinner';
import Rating from 'primevue/rating';
import RadioButton from 'primevue/radiobutton';
import Ripple from 'primevue/ripple';
@@ -269,6 +271,7 @@ import Toolbar from 'primevue/toolbar';
import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
import Tag from 'primevue/tag';
+import Terminal from 'primevue/terminal';
import Timeline from 'primevue/timeline';
import ToggleButton from 'primevue/togglebutton';
import Tooltip from 'primevue/tooltip';
@@ -299,6 +302,7 @@ app.component('AutoComplete', AutoComplete);
app.component('Avatar', Avatar);
app.component('AvatarGroup', AvatarGroup);
app.component('Badge', Badge);
+app.component('BlockUI', BlockUI);
app.component('Breadcrumb', Breadcrumb);
app.component('Button', Button);
app.component('Calendar', Calendar);
@@ -347,6 +351,7 @@ app.component('PanelMenu', PanelMenu);
app.component('Password', Password);
app.component('PickList', PickList);
app.component('ProgressBar', ProgressBar);
+app.component('ProgressSpinner', ProgressSpinner);
app.component('RadioButton', RadioButton);
app.component('Rating', Rating);
app.component('SelectButton', SelectButton);
@@ -364,6 +369,7 @@ app.component('TabView', TabView);
app.component('TabPanel', TabPanel);
app.component('Tag', Tag);
app.component('Textarea', Textarea);
+app.component('Terminal', Terminal);
app.component('TieredMenu', TieredMenu);
app.component('Timeline', Timeline);
app.component('Toast', Toast);
diff --git a/src/views/message/MessageDoc.vue b/src/views/message/MessageDoc.vue
index 96475c3c0..c517d26f5 100755
--- a/src/views/message/MessageDoc.vue
+++ b/src/views/message/MessageDoc.vue
@@ -1,21 +1,19 @@
-
-
-
- Import
+
+ Import
import Message from 'primevue/message';
- Getting Started
- Message component requires a content to display.
+ Getting Started
+ Message component requires a content to display.
<Message>Welcome to PrimeVue</Message>
- Multiple messages can be displayed using the standard v-for directive.
+ Multiple messages can be displayed using the standard v-for directive.
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
@@ -35,38 +33,38 @@ data() {
- Severities
- There are four possible values for the severity of a message. Default one is "info".
+ Severities
+ There are four possible values for the severity of a message. Default one is "info".
-
- - success
- - info
- - warn
- - error
-
+
+ - success
+ - info
+ - warn
+ - error
+
- Closable
- Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set closable to false.
+ Closable
+ Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set closable to false.
<Message severity="success" :closable="false">Order Submitted</Message>
- Sticky
- Messages are sticky by default, if you require them to be cleared automatically, disable sticky property and optionally configure the life property to specify how long the message
- should be displayed which is 3000 ms by default.
+ Sticky
+ Messages are sticky by default, if you require them to be cleared automatically, disable sticky property and optionally configure the life property to specify how long the message
+ should be displayed which is 3000 ms by default.
<Message severity="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message>
- Inline Message Component
+ Inline Message Component
import InlineMessage from 'primevue/inlinemessage';
- InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, severity of the message.
+ InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, severity of the message.
<InputText placeholder="Username" class="p-invalid" />
<InlineMessage>Field is required</InlineMessage>
@@ -74,328 +72,236 @@ import InlineMessage from 'primevue/inlinemessage';
- Properties of Message
-
-
-
-
- Name
- Type
- Default
- Description
-
-
-
-
- severity
- string
- info
- Severity level of the message.
-
-
- closable
- boolean
- true
- Whether the message can be closed manually using the close icon.
-
-
- sticky
- element
- null
- When enabled, message is not removed automatically.
-
-
- life
- number
- 3000
- Delay in milliseconds to close the message automatically.
-
-
-
-
+ Properties of Message
+
+
+
+
+ Name
+ Type
+ Default
+ Description
+
+
+
+
+ severity
+ string
+ info
+ Severity level of the message.
+
+
+ closable
+ boolean
+ true
+ Whether the message can be closed manually using the close icon.
+
+
+ sticky
+ element
+ null
+ When enabled, message is not removed automatically.
+
+
+ life
+ number
+ 3000
+ Delay in milliseconds to close the message automatically.
+
+
+
+
- Properties of ValidationMessage
-
-
-
-
- Name
- Type
- Default
- Description
-
-
-
-
- severity
- string
- info
- Severity level of the message.
-
-
-
-
+ Properties of ValidationMessage
+
+
+
+
+ Name
+ Type
+ Default
+ Description
+
+
+
+
+ severity
+ string
+ info
+ Severity level of the message.
+
+
+
+
- Events of Message
-
-
-
-
- Name
- Parameters
- Description
-
-
-
-
- close
- event: Browser event
- Callback to invoke when a message is closed.
-
-
-
-
+ Events of Message
+
+
+
+
+ Name
+ Parameters
+ Description
+
+
+
+
+ close
+ event: Browser event
+ Callback to invoke when a message is closed.
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
- Message
-
-
-
-
- Name
- Element
-
-
-
-
- p-messages
- Container element.
-
-
- p-messages-info
- Container element when displaying info messages.
-
-
- p-messages-warn
- Container element when displaying warning messages.
-
-
- p-messages-error
- Container element when displaying error messages.
-
-
- p-messages-success
- Container element when displaying success messages.
-
-
- p-messages-close
- Close icon.
-
-
- p-messages-icon
- Severity icon.
-
-
- p-messages-text
- Content of a message.
-
-
-
-
+ Message
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-messages
+ Container element.
+
+
+ p-messages-info
+ Container element when displaying info messages.
+
+
+ p-messages-warn
+ Container element when displaying warning messages.
+
+
+ p-messages-error
+ Container element when displaying error messages.
+
+
+ p-messages-success
+ Container element when displaying success messages.
+
+
+ p-messages-close
+ Close icon.
+
+
+ p-messages-icon
+ Severity icon.
+
+
+ p-messages-text
+ Content of a message.
+
+
+
+
- InlineMessage
-
-
-
-
- Name
- Element
-
-
-
-
- p-inline-message
- Container element.
-
-
- p-inline-message-info
- Container element when displaying info messages.
-
-
- p-inline-message-warn
- Container element when displaying warning messages.
-
-
- p-inline-message-error
- Container element when displaying error messages.
-
-
- p-inline-message-success
- Container element when displaying success messages.
-
-
- p-inline-message-icon
- Severity icon.
-
-
- p-inline-message-text
- Content of a message.
-
-
-
-
+ InlineMessage
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-inline-message
+ Container element.
+
+
+ p-inline-message-info
+ Container element when displaying info messages.
+
+
+ p-inline-message-warn
+ Container element when displaying warning messages.
+
+
+ p-inline-message-error
+ Container element when displaying error messages.
+
+
+ p-inline-message-success
+ Container element when displaying success messages.
+
+
+ p-inline-message-icon
+ Severity icon.
+
+
+ p-inline-message-text
+ Content of a message.
+
+
+
+
- Dependencies
- None.
-
-
-
-
-
- View on GitHub
-
-
-<h5>Severities</h5>
-<Message severity="success">Success Message Content</Message>
-<Message severity="info">Info Message Content</Message>
-<Message severity="warn">Warning Message Content</Message>
-<Message severity="error">Error Message Content</Message>
-
-<h5>Dynamic</h5>
-<Button label="Show" @click="addMessages()" />
-<transition-group name="p-message" tag="div">
- <Message v-for="msg of messages" :severity="msg.severity" :key="msg.id">{{msg.content}}</Message>
-</transition-group>
-
-<h5>Auto Dismiss</h5>
-<Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
-
-<h5>Inline Messages</h5>
-<p>Message component is used to display inline messages mostly within forms.</p>
-<div class="p-grid">
- <div class="p-col-12 p-md-3">
- <InlineMessage severity="info">Message Content</InlineMessage>
- </div>
- <div class="p-col-12 p-md-3">
- <InlineMessage severity="success">Message Content</InlineMessage>
- </div>
- <div class="p-col-12 p-md-3">
- <InlineMessage severity="warn">Message Content</InlineMessage>
- </div>
- <div class="p-col-12 p-md-3">
- <InlineMessage severity="error">Message Content</InlineMessage>
- </div>
-</div>
-
-<h5>Validation Message</h5>
-<div class="p-formgroup-inline" style="margin-bottom:.5rem">
- <label for="username" class="p-sr-only">Username</label>
- <InputText id="username" placeholder="Username" class="p-invalid" />
- <InlineMessage>Username is required</InlineMessage>
-</div>
-<div class="p-formgroup-inline">
- <label for="email" class="p-sr-only">email</label>
- <InputText id="email" placeholder="Email" class="p-invalid" />
- <InlineMessage />
-</div>
-
-
-
-
-export default {
- data() {
- return {
- messages: [],
- count: 0
- }
- },
- methods: {
- addMessages() {
- this.messages = [
- {severity: 'info', content: 'Dynamic Info Message', id: this.count++},
- {severity: 'success', content: 'Dynamic Success Message', id: this.count++},
- {severity: 'warn', content: 'Dynamic Warning Message', id: this.count++}
- ]
- }
- }
-}
-
-
-
-
-button.p-button {
- margin-right: .5rem;
-}
-
-.p-inputtext {
- margin-right: .25rem;
-}
-
-
-
-
-
+ Dependencies
+ None.
+
\ No newline at end of file
diff --git a/src/views/progressbar/ProgressBarDoc.vue b/src/views/progressbar/ProgressBarDoc.vue
index 6cd206046..67e327dc1 100755
--- a/src/views/progressbar/ProgressBarDoc.vue
+++ b/src/views/progressbar/ProgressBarDoc.vue
@@ -1,15 +1,13 @@
-
-
-
- Import
+
+ Import
import ProgressBar from 'primevue/progressbar';
- Getting Started
- ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.
+ Getting Started
+ ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.
<ProgressBar :value="value" />
@@ -23,14 +21,14 @@ data() {
- Indeterminate is simplly enabled using mode property.
+ Indeterminate is simplly enabled using mode property.
<ProgressBar mode="indeterminate"/>
- Slot
- A custom label can be placed inside the progress bar via the default slot.
+ Slot
+ A custom label can be placed inside the progress bar via the default slot.
<ProgressBar :value="value">
Percent Complete: {{value}}%
@@ -38,158 +36,99 @@ data() {
- Properties
- 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
-
-
-
-
- value
- number
- null
- Current value of the progress.
-
-
- mode
- string
- determinate
- Defines the mode of the progress, valid values are "determinate" and "indeterminate".
-
-
- showValue
- boolean
- true
- Whether to display the progress bar value.
-
-
-
-
+ Properties
+ 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
+
+
+
+
+ value
+ number
+ null
+ Current value of the progress.
+
+
+ mode
+ string
+ determinate
+ Defines the mode of the progress, valid values are "determinate" and "indeterminate".
+
+
+ showValue
+ boolean
+ true
+ Whether to display the progress bar value.
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
-
-
-
-
- Name
- Element
-
-
-
-
- p-progressbar
- Container element.
-
-
- p-progressbar-determinate
- Container element of a determinate progressbar.
-
-
- p-progressbar-indeterminate
- Container element of an indeterminate progressbar.
-
-
- p-progressbar-value
- Element whose width changes according to value.
-
-
- p-progressbar-label
- Label element that displays the current value.
-
-
-
-
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-progressbar
+ Container element.
+
+
+ p-progressbar-determinate
+ Container element of a determinate progressbar.
+
+
+ p-progressbar-indeterminate
+ Container element of an indeterminate progressbar.
+
+
+ p-progressbar-value
+ Element whose width changes according to value.
+
+
+ p-progressbar-label
+ Label element that displays the current value.
+
+
+
+
- Dependencies
- None.
-
-
-
-
-
- View on GitHub
-
-
-<h3>Dynamic</h3>
-<ProgressBar :value="value1" />
-
-<h3>Static</h3>
-<ProgressBar :value="value2" :showValue="false" />
-
-<h3>Indeterminate</h3>
-<ProgressBar mode="indeterminate" style="height: .5em" />
-
-
-
-
-export default {
- data() {
- return {
- value1: 0,
- value2: 50
- }
- },
- interval: null,
- methods: {
- startProgress() {
- this.interval = setInterval(() => {
- let newValue = this.value1 + Math.floor(Math.random() * 10) + 1;
- if (newValue >= 100) {
- newValue = 100;
- }
- this.value1 = newValue;
- }, 2000);
- },
- endProgress() {
- clearInterval(this.interval);
- this.interval = null;
- }
- },
- mounted() {
- this.startProgress();
- },
- beforeUnmount() {
- this.endProgress();
- }
-}
-
-
-
-
-
+ Dependencies
+ None.
+
diff --git a/src/views/progressspinner/ProgressSpinnerDoc.vue b/src/views/progressspinner/ProgressSpinnerDoc.vue
index 4b94584d6..10216b579 100755
--- a/src/views/progressspinner/ProgressSpinnerDoc.vue
+++ b/src/views/progressspinner/ProgressSpinnerDoc.vue
@@ -1,22 +1,20 @@
-
-
-
- Import
+
+ Import
import ProgressSpinner from 'primevue/progressspinner';
- Getting Started
- ProgressSpinner is defined using ProgressSpinner element.
+ Getting Started
+ ProgressSpinner is defined using ProgressSpinner element.
<ProgressSpinner />
- Colors
- Colors of the spinner can be changed by overriding the keyframes animation.
+ Colors
+ Colors of the spinner can be changed by overriding the keyframes animation.
@keyframes p-progress-spinner-color {
100%,
@@ -37,122 +35,118 @@ import ProgressSpinner from 'primevue/progressspinner';
- Properties
- 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
-
-
-
-
- strokeWidth
- string
- 2
- Width of the circle stroke.
-
-
- fill
- string
- null
- Color for the background of the circle.
-
-
- animationDuration
- string
- 2s
- Duration of the rotate animation.
-
-
-
-
+ Properties
+ 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
+
+
+
+
+ strokeWidth
+ string
+ 2
+ Width of the circle stroke.
+
+
+ fill
+ string
+ null
+ Color for the background of the circle.
+
+
+ animationDuration
+ string
+ 2s
+ Duration of the rotate animation.
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
-
-
-
-
- Name
- Element
-
-
-
-
- p-progress-spinner
- Container element.
-
-
- p-progress-circle
- SVG element.
-
-
- p-progress-path
- Circle element.
-
-
-
-
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-progress-spinner
+ Container element.
+
+
+ p-progress-circle
+ SVG element.
+
+
+ p-progress-path
+ Circle element.
+
+
+
+
- Dependencies
- None.
-
-
-
-
-
- View on GitHub
-
-
-<h3>Basic</h3>
-<ProgressSpinner />
-
-<h3>Custom</h3>
-<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
-
-
-
-
-
+ Dependencies
+ None.
+
\ No newline at end of file
diff --git a/src/views/ripple/RippleDoc.vue b/src/views/ripple/RippleDoc.vue
index 8726dfcd9..381536af0 100644
--- a/src/views/ripple/RippleDoc.vue
+++ b/src/views/ripple/RippleDoc.vue
@@ -1,11 +1,9 @@
-
-
-
- Getting Started
- Ripple
- Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
- your app's entry file (e.g. main.js) during the PrimeVue setup.
+
+ Getting Started
+ Ripple
+ Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
+ your app's entry file (e.g. main.js) during the PrimeVue setup.
import {createApp} from 'vue';
import PrimeVue from 'primevue/config';
@@ -15,10 +13,10 @@ app.use(PrimeVue, {ripple: true});
- Note: That would be it to enable ripple on PrimeVue components, next section describes how to use it with your own components and standard elements.
+ Note: That would be it to enable ripple on PrimeVue components, next section describes how to use it with your own components and standard elements.
- Directive
- Ripple is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the Vue.directive function.
+ Directive
+ Ripple is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the Vue.directive function.
import Ripple from 'primevue/ripple';
@@ -26,7 +24,7 @@ Vue.directive('ripple', Ripple);
- Ripple can also be configured locally using the directives property of your component.
+ Ripple can also be configured locally using the directives property of your component.
directives: {
'ripple': Ripple
@@ -34,14 +32,14 @@ directives: {
- Once the ripple is configured, add .p-ripple class to the target and attach the directive with the v- prefix.
+ Once the ripple is configured, add .p-ripple class to the target and attach the directive with the v- prefix.
<div class="p-ripple" v-ripple></div>
- Styling
- Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of .p-ink element.
+ Styling
+ Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of .p-ink element.
<div class="p-ripple purple" v-ripple></div>
@@ -55,59 +53,62 @@ directives: {
- Styling
-
-
-
-
- Name
- Element
-
-
-
-
- p-ripple
- Host element.
-
-
- p-ink
- Ripple element.
-
-
- p-ink-active
- Ripple element during animating.
-
-
-
-
+ Styling
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-ripple
+ Host element.
+
+
+ p-ink
+ Ripple element.
+
+
+ p-ink-active
+ Ripple element during animating.
+
+
+
+
- Dependencies
- None.
-
-
-
-
-
- View on GitHub
-
-
-<div class="card-container p-d-flex">
- <div class="card primary-box p-ripple" v-ripple>Default</div>
- <div class="card styled-box-green p-ripple" v-ripple>Green</div>
- <div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
- <div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
-</div>
+ Dependencies
+ None.
+
-
-
-export default {}
+
\ No newline at end of file
diff --git a/src/views/scrolltop/ScrollTopDoc.vue b/src/views/scrolltop/ScrollTopDoc.vue
index a9f65cbd5..148d802f4 100644
--- a/src/views/scrolltop/ScrollTopDoc.vue
+++ b/src/views/scrolltop/ScrollTopDoc.vue
@@ -1,30 +1,28 @@
-
-
-
- Import
+
+ Import
import ScrollTop from 'primevue/scrolltop';
- Getting Started
- Without any configuration, ScrollTop listens window scroll.
+ Getting Started
+ Without any configuration, ScrollTop listens window scroll.
<ScrollTop />
- Threshold
- When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is
- defined with the threshold property that defaults to 400.
+ Threshold
+ When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is
+ defined with the threshold property that defaults to 400.
<ScrollTop :threshold="200" />
- Target Element
- ScrollTop can also be assigned to its parent element by setting target as "parent".
+ Target Element
+ ScrollTop can also be assigned to its parent element by setting target as "parent".
<div style="height: 400px; overflow: auto">
Content that overflows to container
@@ -33,113 +31,122 @@ import ScrollTop from 'primevue/scrolltop';
- Properties
- 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
-
-
-
-
- target
- string
- window
- Target of the ScrollTop, valid values are "window" and "parent".
-
-
- threshold
- number
- 400
- Defines the threshold value of the vertical scroll position of the target to toggle the visibility.
-
-
- icon
- string
- pi pi-chevron-up
- Icon to display.
-
-
- behavior
- string
- smooth
- Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.
-
-
-
-
+ Properties
+ 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
+
+
+
+
+ target
+ string
+ window
+ Target of the ScrollTop, valid values are "window" and "parent".
+
+
+ threshold
+ number
+ 400
+ Defines the threshold value of the vertical scroll position of the target to toggle the visibility.
+
+
+ icon
+ string
+ pi pi-chevron-up
+ Icon to display.
+
+
+ behavior
+ string
+ smooth
+ Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
-
-
-
-
- Name
- Element
-
-
-
-
- p-scrolltop
- Container element.
-
-
- p-scrolltop-sticky
- Container element when attached to its parent.
-
-
-
-
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-scrolltop
+ Container element.
+
+
+ p-scrolltop-sticky
+ Container element when attached to its parent.
+
+
+
+
- Dependencies
- None.
-
-
-
-
-
- View on GitHub
-
-
-<h5>Window</h5>
-<p>Scroll down the page to display the ScrollTo component.</p>
-<ScrollTop />
-
-<h5>Element</h5>
-<ScrollPanel style="width: 250px; 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>
- <ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
-</ScrollPanel>
+ Dependencies
+ None.
+
-
-
+
\ No newline at end of file
diff --git a/src/views/skeleton/SkeletonDoc.vue b/src/views/skeleton/SkeletonDoc.vue
index 05a73b64f..f81218747 100644
--- a/src/views/skeleton/SkeletonDoc.vue
+++ b/src/views/skeleton/SkeletonDoc.vue
@@ -1,417 +1,270 @@
-
-
-
- Import
+
+ Import
import Skeleton from 'primevue/skeleton';
- Getting Started
- Skeleton displays a rectangle in its simplest form.
+ Getting Started
+ Skeleton displays a rectangle in its simplest form.
<Skeleton />
- Circle
- The other option is the circle by setting shape property as "circle".
+ Circle
+ The other option is the circle by setting shape property as "circle".
<Skeleton shape="circle"/>
- Size
- In order to customize the size, use width and height properties for rectangles and size for Circle and Square shapes.
+ Size
+ In order to customize the size, use width and height properties for rectangles and size for Circle and Square shapes.
<Skeleton width="100%" height="2rem" />
<Skeleton shape="circle" size="50px" />
- Border Radius
- The default border radius of a rectangle is specified by the theme and can be overriden using the borderRadius property.
+ Border Radius
+ The default border radius of a rectangle is specified by the theme and can be overriden using the borderRadius property.
<Skeleton borderRadius="16px" />
- Animation
- Animation can be turned of by setting animation to "none".
+ Animation
+ Animation can be turned of by setting animation to "none".
<Skeleton animation="none" />
- Properties
- 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
-
-
-
-
- shape
- string
- rectangle
- Shape of the element, options are "rectangle" and "circle".
-
-
- size
- string
- null
- Size of the Circle or Square.
-
-
- width
- string
- 100%
- Width of the element.
-
-
- height
- string
- 1rem
- Height of the element.
-
-
- borderRadius
- string
- null
- Border radius of the element, defaults to value from theme.
-
-
- animation
- string
- wave
- Type of the animation, valid options are "wave" and "none".
-
-
-
-
+ Properties
+ 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
+
+
+
+
+ shape
+ string
+ rectangle
+ Shape of the element, options are "rectangle" and "circle".
+
+
+ size
+ string
+ null
+ Size of the Circle or Square.
+
+
+ width
+ string
+ 100%
+ Width of the element.
+
+
+ height
+ string
+ 1rem
+ Height of the element.
+
+
+ borderRadius
+ string
+ null
+ Border radius of the element, defaults to value from theme.
+
+
+ animation
+ string
+ wave
+ Type of the animation, valid options are "wave" and "none".
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
-
-
-
-
- Name
- Element
-
-
-
-
- p-skeleton
- Container element.
-
-
- p-skeleton-circle
- Container element of a determinate progressbar.
-
-
- p-skeleton-animation-none
- Container element of an indeterminate progressbar.
-
-
-
-
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-skeleton
+ Container element.
+
+
+ p-skeleton-circle
+ Container element of a determinate progressbar.
+
+
+ p-skeleton-animation-none
+ Container element of an indeterminate progressbar.
+
+
+
+
- Dependencies
- None.
-
-
-
-
-
- View on GitHub
-
-
-<div class="card">
- <div class="p-grid p-formgrid">
- <div class="p-field p-col-12 p-md-6">
- <h5>Rectangle</h5>
- <Skeleton class="p-mb-2"></Skeleton>
- <Skeleton width="10rem" class="p-mb-2"></Skeleton>
- <Skeleton width="5rem" class="p-mb-2"></Skeleton>
- <Skeleton height="2rem" class="p-mb-2"></Skeleton>
- <Skeleton width="10rem" height="4rem"></Skeleton>
- </div>
- <div class="p-field p-col-12 p-md-6">
- <h5>Rounded</h5>
- <Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
- <Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
- <Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
- <Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
- <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
- </div>
- <div class="p-field p-col-12 p-md-6">
- <h5 class="p-mt-3">Square</h5>
- <div class="p-d-flex p-ai-end">
- <Skeleton size="2rem" class="p-mr-2"></Skeleton>
- <Skeleton size="3rem" class="p-mr-2"></Skeleton>
- <Skeleton size="4rem" class="p-mr-2"></Skeleton>
- <Skeleton size="5rem"></Skeleton>
- </div>
- </div>
- <div class="p-field p-col-12 p-md-6">
- <h5 class="p-mt-3">Circle</h5>
- <div class="p-d-flex p-ai-end">
- <Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
- <Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
- <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
- <Skeleton shape="circle" size="5rem"></Skeleton>
- </div>
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="p-grid p-formgrid">
- <div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
- <h5>Card</h5>
- <div class="custom-skeleton p-p-4">
- <div class="p-d-flex p-mb-3">
- <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
- <div>
- <Skeleton width="10rem" class="p-mb-2"></Skeleton>
- <Skeleton width="5rem" class="p-mb-2"></Skeleton>
- <Skeleton height=".5rem"></Skeleton>
- </div>
- </div>
- <Skeleton width="100%" height="150px"></Skeleton>
- <div class="p-d-flex p-jc-between p-mt-3">
- <Skeleton width="4rem" height="2rem"></Skeleton>
- <Skeleton width="4rem" height="2rem"></Skeleton>
- </div>
- </div>
- </div>
-
- <div class="p-field p-col-12 p-md-6">
- <h5>List</h5>
- <div class="custom-skeleton p-p-4">
- <ul class="p-m-0 p-p-0">
- <li class="p-mb-3">
- <div class="p-d-flex">
- <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
- <div style="flex: 1">
- <Skeleton width="100%" class="p-mb-2"></Skeleton>
- <Skeleton width="75%"></Skeleton>
- </div>
- </div>
- </li>
- <li class="p-mb-3">
- <div class="p-d-flex">
- <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
- <div style="flex: 1">
- <Skeleton width="100%" class="p-mb-2"></Skeleton>
- <Skeleton width="75%"></Skeleton>
- </div>
- </div>
- </li>
- <li class="p-mb-3">
- <div class="p-d-flex">
- <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
- <div style="flex: 1">
- <Skeleton width="100%" class="p-mb-2"></Skeleton>
- <Skeleton width="75%"></Skeleton>
- </div>
- </div>
- </li>
- <li>
- <div class="p-d-flex">
- <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
- <div style="flex: 1">
- <Skeleton width="100%" class="p-mb-2"></Skeleton>
- <Skeleton width="75%"></Skeleton>
- </div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
-
- <h5>DataTable</h5>
- <DataTable :value="products">
- <Column field="code" header="Code">
- <template #body>
- <Skeleton></Skeleton>
- </template>
- </Column>
- <Column field="name" header="Name">
- <template #body>
- <Skeleton></Skeleton>
- </template>
- </Column>
- <Column field="category" header="Category">
- <template #body>
- <Skeleton></Skeleton>
- </template>
- </Column>
- <Column field="quantity" header="Quantity">
- <template #body>
- <Skeleton></Skeleton>
- </template>
- </Column>
- </DataTable>
-</div>
-
-
-
-
-
-
+ Dependencies
+ None.
+
\ No newline at end of file
diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue
index da2f705de..349501dba 100755
--- a/src/views/steps/StepsDoc.vue
+++ b/src/views/steps/StepsDoc.vue
@@ -1,5 +1,5 @@
-
+
Import
import Steps from 'primevue/steps';
diff --git a/src/views/tag/TagDoc.vue b/src/views/tag/TagDoc.vue
index be2bcab4e..4812c5915 100644
--- a/src/views/tag/TagDoc.vue
+++ b/src/views/tag/TagDoc.vue
@@ -1,39 +1,37 @@
-
-
-
- Import
+
+ Import
import Tag from 'primevue/tag';
- Getting Started
- Content of the tag is specified using the value property.
+ Getting Started
+ Content of the tag is specified using the value property.
<Tag value="New"></Tag>
- Icon
- An icon can also be configured to be displayed next to the value with the icon property.
+ Icon
+ An icon can also be configured to be displayed next to the value with the icon property.
<Tag value="New" icon="pi pi-plus"></Tag>
- Severities
- Different color options are available as severity levels.
+ Severities
+ Different color options are available as severity levels.
-
- - success
- - info
- - warning
- - danger
-
+
+ - success
+ - info
+ - warning
+ - danger
+
- Templating
- Content can easily be customized with the default slot instead of using the built-in display.
+ Templating
+ Content can easily be customized with the default slot instead of using the built-in display.
<Tag>
Content
@@ -41,162 +39,158 @@ import Tag from 'primevue/tag';
- Properties
- 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
-
-
-
-
- value
- any
- null
- Value to display inside the tag.
-
-
- severity
- string
- null
- Severity type of the tag.
-
-
- rounded
- boolean
- false
- Whether the corners of the tag are rounded.
-
-
- icon
- string
- null
- Icon of the tag to display next to the value.
-
-
-
-
+ Properties
+ 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
+
+
+
+
+ value
+ any
+ null
+ Value to display inside the tag.
+
+
+ severity
+ string
+ null
+ Severity type of the tag.
+
+
+ rounded
+ boolean
+ false
+ Whether the corners of the tag are rounded.
+
+
+ icon
+ string
+ null
+ Icon of the tag to display next to the value.
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
-
-
-
-
- Name
- Element
-
-
-
-
- p-tag
- Tag element
-
-
- p-tag-rounded
- Rounded element
-
-
- p-tag-icon
- Icon of the tag
-
-
- p-tag-value
- Value of the tag
-
-
-
-
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-tag
+ Tag element
+
+
+ p-tag-rounded
+ Rounded element
+
+
+ p-tag-icon
+ Icon of the tag
+
+
+ p-tag-value
+ Value of the tag
+
+
+
+
- Dependencies
- None.
-
-
-
-
-
- View on GitHub
-
-
-<h5>Tags</h5>
-<Tag class="p-mr-2" value="Primary"></Tag>
-<Tag class="p-mr-2" severity="success" value="Success"></Tag>
-<Tag class="p-mr-2" severity="info" value="Info"></Tag>
-<Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
-<Tag severity="danger" value="Danger"></Tag>
-
-<h5>Pills</h5>
-<Tag class="p-mr-2" value="Primary" rounded></Tag>
-<Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
-<Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
-<Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
-<Tag severity="danger" value="Danger" rounded></Tag>
-
-<h5>Icons</h5>
-<Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
-<Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
-<Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
-<Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
-<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
-
-
-
-
-
+ Dependencies
+ None.
+
\ No newline at end of file
diff --git a/src/views/terminal/TerminalDoc.vue b/src/views/terminal/TerminalDoc.vue
index 40c39b5ca..4e7263c4e 100755
--- a/src/views/terminal/TerminalDoc.vue
+++ b/src/views/terminal/TerminalDoc.vue
@@ -1,18 +1,16 @@
-
-
-
- Import
+
+ Import
import Terminal from 'primevue/terminal';
import TerminalService from 'primevue/terminalservice';
- Getting Started
- Commands are processed using an EventBus implementation called TerminalService.
- Import this service into your component and subscribe to the command event to process the commands by
- sending replies with the response event.
+ Getting Started
+ Commands are processed using an EventBus implementation called TerminalService.
+ Import this service into your component and subscribe to the command event to process the commands by
+ sending replies with the response event.
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" />
@@ -58,175 +56,93 @@ export default {
- Properties
- 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
-
-
-
-
- welcomeMessage
- string
- null
- Initial text to display on terminal.
-
-
- prompt
- string
- null
- Prompt text for each command.
-
-
-
-
+ Properties
+ 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
+
+
+
+
+ welcomeMessage
+ string
+ null
+ Initial text to display on terminal.
+
+
+ prompt
+ string
+ null
+ Prompt text for each command.
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
-
-
-
-
- Name
- Element
-
-
-
-
- p-terminal
- Container element.
-
-
- p-terminal-content
- Content of terminal.
-
-
- p-terminal-prompt
- Prompt text.
-
-
- p-terminal-response
- Command response.
-
-
- p-terminal-input
- Input element to enter commands.
-
-
-
-
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-terminal
+ Container element.
+
+
+ p-terminal-content
+ Content of terminal.
+
+
+ p-terminal-prompt
+ Prompt text.
+
+
+ p-terminal-response
+ Command response.
+
+
+ p-terminal-input
+ Input element to enter commands.
+
+
+
+
- Dependencies
- None.
-
-
-
-
-
- View on GitHub
-
-
-<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
-<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
-
-
-
-
-import TerminalService from 'primevue/terminalservice';
-
-export default {
- methods: {
- commandHandler(text) {
- let response;
- let argsIndex = text.indexOf(' ');
- let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
- switch(command) {
- case "date":
- response = 'Today is ' + new Date().toDateString();
- break;
-
- case "greet":
- response = 'Hola ' + text.substring(argsIndex + 1);
- break;
-
- case "random":
- response = Math.floor(Math.random() * 100);
- break;
-
- default:
- response = "Unknown command: " + command;
- }
-
- TerminalService.emit('response', response);
- }
- },
- mounted() {
- TerminalService.on('command', this.commandHandler);
- },
- beforeUnmount() {
- TerminalService.off('command', this.commandHandler);
- }
-}
-
-
-
-
-p {
- margin-top: 0;
-}
-
-::v-deep(.dark-demo-terminal) {
- background-color: #212121;
- color: #ffffff;
-
- .p-terminal-command {
- color: #80CBC4;
- }
-
- .p-terminal-prompt {
- color: #FFD54F;
- }
-
- .p-terminal-response {
- color: #9FA8DA;
- }
-}
-
-
-
-
-
+ Dependencies
+ None.
+
\ No newline at end of file
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index 4bc3522d2..176b3869e 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/src/views/toast/ToastDoc.vue
@@ -1,10 +1,8 @@
-
-
-
- ToastService
- Toast messages are dynamically created using a ToastService that needs to be installed globally before the application
- instance is created.
+
+ ToastService
+ Toast messages are dynamically created using a ToastService that needs to be installed globally before the application
+ instance is created.
import {createApp} from 'vue';
import ToastService from 'primevue/toastservice';
@@ -14,18 +12,18 @@ app.use(ToastService);
- Import
+ Import
import Toast from 'primevue/toast';
- Getting Started
- Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface in PrimeVue that defines various properties such as severity,
- summary and detail.
+ Getting Started
+ Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface in PrimeVue that defines various properties such as severity,
+ summary and detail.
- Options API
- $toast is available as a property in the application instance.
+ Options API
+ $toast is available as a property in the application instance.
export default {
mounted() {
@@ -35,8 +33,8 @@ export default {
- Composition API
- The toast instance can be injected with the useToast function.
+ Composition API
+ The toast instance can be injected with the useToast function.
import { defineComponent } from "vue";
import { useToast } from "primevue/usetoast";
@@ -50,103 +48,103 @@ export default defineComponent({
- Message API
-
-
-
-
- Name
- Type
- Default
- Description
-
-
-
-
- severity
- string
- null
- Severity of the message.
-
-
- summary
- element
- null
- Summary content of the message.
-
-
- detail
- element
- null
- Detail content of the message.
-
-
- closable
- boolean
- true
- Whether the message can be closed manually using the close icon.
-
-
- life
- number
- null
- Delay in milliseconds to close the message automatically.
-
-
- group
- string
- null
- Key of the Toast to display the message.
-
-
-
-
+ Message API
+
+
+
+
+ Name
+ Type
+ Default
+ Description
+
+
+
+
+ severity
+ string
+ null
+ Severity of the message.
+
+
+ summary
+ element
+ null
+ Summary content of the message.
+
+
+ detail
+ element
+ null
+ Detail content of the message.
+
+
+ closable
+ boolean
+ true
+ Whether the message can be closed manually using the close icon.
+
+
+ life
+ number
+ null
+ Delay in milliseconds to close the message automatically.
+
+
+ group
+ string
+ null
+ Key of the Toast to display the message.
+
+
+
+
- MessageService API
-
-
-
-
- Name
- Type
- Default
- Description
-
-
-
-
- add
- message: Message instance
- Displays the message in a suitable Toast component.
-
-
- removeGroup
- group: Name of the message group
- Clears the messages that belongs to the group.
-
-
- removeAllGroup
- -
- Clears all the messages.
-
-
-
-
+ MessageService API
+
+
+
+
+ Name
+ Type
+ Default
+ Description
+
+
+
+
+ add
+ message: Message instance
+ Displays the message in a suitable Toast component.
+
+
+ removeGroup
+ group: Name of the message group
+ Clears the messages that belongs to the group.
+
+
+ removeAllGroup
+ -
+ Clears all the messages.
+
+
+
+
- Severities
- There are four possible values for the severity of a message. Info is the default.
+ Severities
+ There are four possible values for the severity of a message. Info is the default.
-
- - success
- - info
- - warn
- - error
-
+
+ - success
+ - info
+ - warn
+ - error
+
- Position
- There are four positions available for the toast container defined by the position property that defaults to "top-right". Other
- valid values are "top-left", "top-center", "bottom-left", "botton-center", "bottom-right" and "center".
-
+ Position
+ There are four positions available for the toast container defined by the position property that defaults to "top-right". Other
+ valid values are "top-left", "top-center", "bottom-left", "botton-center", "bottom-right" and "center".
+
<Toast />
<Toast position="top-left" />
@@ -159,10 +157,10 @@ export default defineComponent({
- Groups
- A message can be targeted to a specific Toast component if their group properties match. Messages without a group
- are forwarded to the default Toast component that does not have a group defined.
-
+ Groups
+ A message can be targeted to a specific Toast component if their group properties match. Messages without a group
+ are forwarded to the default Toast component that does not have a group defined.
+
<Toast />
@@ -176,207 +174,130 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
- Clearing Messages
- removeGroup(group) clears the messages for a specific Toast whereas removeAllGroups() method clears all messages.
+ Clearing Messages
+ removeGroup(group) clears the messages for a specific Toast whereas removeAllGroups() method clears all messages.
- Properties
-
-
-
-
- Name
- Type
- Default
- Description
-
-
-
-
- group
- string
- null
- Unique identifier of a message group.
-
-
- position
- string
- top-right
- Position of the toast in viewport.
-
-
- autoZIndex
- boolean
- true
- Whether to automatically manage layering.
-
-
- baseZIndex
- number
- 0
- Base zIndex value to use in layering.
-
-
-
-
+ Properties
+
+
+
+
+ Name
+ Type
+ Default
+ Description
+
+
+
+
+ group
+ string
+ null
+ Unique identifier of a message group.
+
+
+ position
+ string
+ top-right
+ Position of the toast in viewport.
+
+
+ autoZIndex
+ boolean
+ true
+ Whether to automatically manage layering.
+
+
+ baseZIndex
+ number
+ 0
+ Base zIndex value to use in layering.
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
-
-
-
-
- Name
- Element
-
-
-
-
- p-toast
- Main container element.
-
-
- p-toast-message
- Container of a message item.
-
-
- p-toast-icon-close
- Close icon of a message.
-
-
- p-toast-icon
- Severity icon.
-
-
- p-toast-message-content
- Container of message texts.
-
-
- p-toast-summary
- Summary of the message.
-
-
- p-toast-detail
- Detail of the message.
-
-
-
-
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-toast
+ Main container element.
+
+
+ p-toast-message
+ Container of a message item.
+
+
+ p-toast-icon-close
+ Close icon of a message.
+
+
+ p-toast-icon
+ Severity icon.
+
+
+ p-toast-message-content
+ Container of message texts.
+
+
+ p-toast-summary
+ Summary of the message.
+
+
+ p-toast-detail
+ Detail of the message.
+
+
+
+
- Dependencies
- None.
-
-
-
-
-
- View on GitHub
-
-
-<h5>Severities</h5>
-<Button label="Success" class="p-button-success" @click="showSuccess" />
-<Button label="Info" class="p-button-info" @click="showInfo" />
-<Button label="Warn" class="p-button-warning" @click="showWarn" />
-<Button label="Error" class="p-button-danger" @click="showError" />
-
-<h5>Positions</h5>
-<Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
-<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
-<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
-
-<h5>Options</h5>
-<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
-<Button @click="showSticky" label="Sticky" />
-
-<h5>Remove All</h5>
-<Button @click="clear" label="Clear" />
-
-
-
-
-export default {
- data() {
- return {
- messages: [],
- }
- },
- methods: {
- showSuccess() {
- this.$toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000});
- },
- showInfo() {
- this.$toast.add({severity:'info', summary: 'Info Message', detail:'Message Content', life: 3000});
- },
- showWarn() {
- this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', life: 3000});
- },
- showError() {
- this.$toast.add({severity:'error', summary: 'Error Message', detail:'Message Content', life: 3000});
- },
- showTopLeft() {
- this.$toast.add({severity: 'info', summary: 'Info Message', detail: 'Message Content', group: 'tl', life: 3000});
- },
- showBottomLeft() {
- this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', group: 'bl', life: 3000});
- },
- showBottomRight() {
- this.$toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', group: 'br', life: 3000});
- },
- showSticky() {
- this.$toast.add({severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
- },
- showMultiple() {
- this.$toast.add({severity:'info', summary:'Message 1', detail:'Message 1 Content', life: 3000});
- this.$toast.add({severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000});
- this.$toast.add({severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000});
- },
- clear() {
- this.$toast.removeAllGroups();
- }
- }
-}
-
-
-
-
-
+ Dependencies
+ None.
+