import Breadcrumb from 'primevue/breadcrumb';
Breadcrumb uses the common MenuModel API to define the items, visit
Breadcrumb uses the common MenuModel API to define the items, visit
Breadcrumb requires a collection of menuitems as its model and a home item.
+Breadcrumb requires a collection of menuitems as its model and a home item.
<Breadcrumb :home="home" :model="items" />
@@ -36,118 +34,82 @@ export default {
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 | -
|---|---|---|---|
| model | -array | -null | -An array of menuitems. | -
| home | -menuitem | -null | -Configuration for the home icon. | -
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 | +
|---|---|---|---|
| model | +array | +null | +An array of menuitems. | +
| home | +menuitem | +null | +Configuration for the home icon. | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-breadcrumb | -Container element. | -
| p-menuitem | -Menuitem element. | -
| p-menuitem-text | -Label of a menuitem. | -
| p-breadcrumb-chevron | -Chevron element. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-breadcrumb | +Container element. | +
| p-menuitem | +Menuitem element. | +
| p-menuitem-text | +Label of a menuitem. | +
| p-breadcrumb-chevron | +Chevron element. | +
None.
-
-<Breadcrumb :home="home" :model="items" />
-
-
-export default {
- data() {
- return {
- home: {icon: 'pi pi-home', to: '/'},
- items: [
- {label: 'Computer'},
- {label: 'Notebook'},
- {label: 'Accessories'},
- {label: 'Backpacks'},
- {label: 'Item'}
- ]
- }
- }
-}
-
-None.
+ \ No newline at end of file diff --git a/src/views/contextmenu/ContextMenuDoc.vue b/src/views/contextmenu/ContextMenuDoc.vue index 3c385cc7a..de9c60a25 100755 --- a/src/views/contextmenu/ContextMenuDoc.vue +++ b/src/views/contextmenu/ContextMenuDoc.vue @@ -1,18 +1,16 @@ -
import ContextMenu from 'primevue/contextmenu';
ContextMenu uses the common MenuModel API to define the items, visit
ContextMenu uses the common MenuModel API to define the items, visit
ContextMenu requires a collection of menuitems as its model.
+ContextMenu requires a collection of menuitems as its model.
export default {
@@ -155,15 +153,15 @@ export default {
Setting global property attaches the context menu to the document.
+Setting global property attaches the context menu to the document.
<ContextMenu :global="true" :model="items" />
ContextMenu is attached to a custom element manually using the reference and calling the show(event) method.
+ContextMenu is attached to a custom element manually using the reference and calling the show(event) method.
<img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick">
@@ -187,304 +185,139 @@ export default {
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 | -
|---|---|---|---|
| model | -array | -null | -An array of menuitems. | -
| appendTo | -string | -body | -A valid query selector or an HTMLElement to specify where the overlay gets attached. | -
| baseZIndex | -number | -0 | -Base zIndex value to use in layering. | -
| autoZIndex | -boolean | -true | -Whether to automatically manage layering. | -
| global | -boolean | -false | -Attaches the menu to document instead of a particular item. | -
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 | +
|---|---|---|---|
| model | +array | +null | +An array of menuitems. | +
| appendTo | +string | +body | +A valid query selector or an HTMLElement to specify where the overlay gets attached. | +
| baseZIndex | +number | +0 | +Base zIndex value to use in layering. | +
| autoZIndex | +boolean | +true | +Whether to automatically manage layering. | +
| global | +boolean | +false | +Attaches the menu to document instead of a particular item. | +
| Name | -Parameters | -Description | -
|---|---|---|
| toggle | -event: Browser event | -Toggles the visibility of the menu. | -
| show | -event: Browser event | -Shows the menu. | -
| hide | -- | -Hides the menu. | -
| Name | +Parameters | +Description | +
|---|---|---|
| toggle | +event: Browser event | +Toggles the visibility of the menu. | +
| show | +event: Browser event | +Shows the menu. | +
| hide | +- | +Hides the menu. | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-contextmenu | -Container element. | -
| p-submenu-list | -Submenu list element. | -
| p-menuitem | -Menuitem element. | -
| p-menuitem-text | -Label of a menuitem. | -
| p-menuitem-icon | -Icon of a menuitem. | -
| p-submenu-icon | -Arrow icon of a submenu. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-contextmenu | +Container element. | +
| p-submenu-list | +Submenu list element. | +
| p-menuitem | +Menuitem element. | +
| p-menuitem-text | +Label of a menuitem. | +
| p-menuitem-icon | +Icon of a menuitem. | +
| p-submenu-icon | +Arrow icon of a submenu. | +
None.
-
-<img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true">
-<ContextMenu ref="menu" :model="items" />
-
-
-export default {
- data() {
- return {
- items: [
- {
- label:'File',
- icon:'pi pi-fw pi-file',
- items:[
- {
- label:'New',
- icon:'pi pi-fw pi-plus',
- items:[
- {
- label:'Bookmark',
- icon:'pi pi-fw pi-bookmark'
- },
- {
- label:'Video',
- icon:'pi pi-fw pi-video'
- },
-
- ]
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-trash'
- },
- {
- separator:true
- },
- {
- label:'Export',
- icon:'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label:'Edit',
- icon:'pi pi-fw pi-pencil',
- items:[
- {
- label:'Left',
- icon:'pi pi-fw pi-align-left'
- },
- {
- label:'Right',
- icon:'pi pi-fw pi-align-right'
- },
- {
- label:'Center',
- icon:'pi pi-fw pi-align-center'
- },
- {
- label:'Justify',
- icon:'pi pi-fw pi-align-justify'
- },
-
- ]
- },
- {
- label:'Users',
- icon:'pi pi-fw pi-user',
- items:[
- {
- label:'New',
- icon:'pi pi-fw pi-user-plus',
-
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-user-minus',
-
- },
- {
- label:'Search',
- icon:'pi pi-fw pi-users',
- items:[
- {
- label:'Filter',
- icon:'pi pi-fw pi-filter',
- items:[
- {
- label:'Print',
- icon:'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon:'pi pi-fw pi-bars',
- label:'List'
- }
- ]
- }
- ]
- },
- {
- label:'Events',
- icon:'pi pi-fw pi-calendar',
- items:[
- {
- label:'Edit',
- icon:'pi pi-fw pi-pencil',
- items:[
- {
- label:'Save',
- icon:'pi pi-fw pi-calendar-plus'
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-calendar-minus'
- },
-
- ]
- },
- {
- label:'Archieve',
- icon:'pi pi-fw pi-calendar-times',
- items:[
- {
- label:'Remove',
- icon:'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- separator:true
- },
- {
- label:'Quit',
- icon:'pi pi-fw pi-power-off'
- }
- ]
- }
- },
- methods: {
- onImageRightClick(event) {
- this.$refs.menu.show(event);
- }
- }
-}
-
-None.
+ \ No newline at end of file diff --git a/src/views/megamenu/MegaMenuDoc.vue b/src/views/megamenu/MegaMenuDoc.vue index 4ae1a3be5..e660d840f 100755 --- a/src/views/megamenu/MegaMenuDoc.vue +++ b/src/views/megamenu/MegaMenuDoc.vue @@ -1,15 +1,13 @@ -
import MegaMenu from 'primevue/megamenu';
MegaMenu uses the common MenuModel API to define the items of the model, visit
MegaMenu uses the common MenuModel API to define the items of the model, visit
<MegaMenu :model="items" />
@@ -137,15 +135,15 @@ export default {
Default orientation is "horizontal" with "vertical" as the alternative.
+Default orientation is "horizontal" with "vertical" as the alternative.
<MegaMenu :model="items" orientation="vertical" />
Any content inside the megamenu will be displayed on the right side by default. You may use ".p-megamenu-custom" style class to change the location of the content.
+Any content inside the megamenu will be displayed on the right side by default. You may use ".p-megamenu-custom" style class to change the location of the content.
<MegaMenu :model="items">
<InputText placeholder="Search" type="text" />
@@ -154,266 +152,114 @@ export default {
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 | -
|---|---|---|---|
| model | -array | -null | -An array of menuitems. | -
| orientation | -string | -horizontal | -Defines the orientation, valid values are horizontal and vertical. | -
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 | +
|---|---|---|---|
| model | +array | +null | +An array of menuitems. | +
| orientation | +string | +horizontal | +Defines the orientation, valid values are horizontal and vertical. | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-megamenu | -Container element. | -
| p-megamenu-horizontal | -Container element in horizontal orientation. | -
| p-megamenu-vertical | -Container element in vertical orientation. | -
| p-megamenu-root-list | -Root list element. | -
| p-megamenu-panel | -Submenu container. | -
| p-megamenu-submenu | -Submenu list element. | -
| p-menuitem | -Menuitem element. | -
| p-menuitem-text | -Label of a menuitem. | -
| p-menuitem-icon | -Icon of a menuitem. | -
| p-submenu-icon | -Arrow icon of a submenu. | -
| p-megamenu-custom | -Container of the default slot. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-megamenu | +Container element. | +
| p-megamenu-horizontal | +Container element in horizontal orientation. | +
| p-megamenu-vertical | +Container element in vertical orientation. | +
| p-megamenu-root-list | +Root list element. | +
| p-megamenu-panel | +Submenu container. | +
| p-megamenu-submenu | +Submenu list element. | +
| p-menuitem | +Menuitem element. | +
| p-menuitem-text | +Label of a menuitem. | +
| p-menuitem-icon | +Icon of a menuitem. | +
| p-submenu-icon | +Arrow icon of a submenu. | +
| p-megamenu-custom | +Container of the default slot. | +
None.
-
-<h3>Horizontal</h3>
-<MegaMenu :model="items" />
-
-<h3>Vertical</h3>
-<MegaMenu :model="items" orientation="vertical"/>
-
-
-export default {
- data() {
- return {
- items: [
- {
- label: 'Videos', icon: 'pi pi-fw pi-video',
- items: [
- [
- {
- label: 'Video 1',
- items: [{label: 'Video 1.1'}, {label: 'Video 1.2'}]
- },
- {
- label: 'Video 2',
- items: [{label: 'Video 2.1'}, {label: 'Video 2.2'}]
- }
- ],
- [
- {
- label: 'Video 3',
- items: [{label: 'Video 3.1'}, {label: 'Video 3.2'}]
- },
- {
- label: 'Video 4',
- items: [{label: 'Video 4.1'}, {label: 'Video 4.2'}]
- }
- ]
- ]
- },
- {
- label: 'Users', icon: 'pi pi-fw pi-users',
- items: [
- [
- {
- label: 'User 1',
- items: [{label: 'User 1.1'}, {label: 'User 1.2'}]
- },
- {
- label: 'User 2',
- items: [{label: 'User 2.1'}, {label: 'User 2.2'}]
- },
- ],
- [
- {
- label: 'User 3',
- items: [{label: 'User 3.1'}, {label: 'User 3.2'}]
- },
- {
- label: 'User 4',
- items: [{label: 'User 4.1'}, {label: 'User 4.2'}]
- }
- ],
- [
- {
- label: 'User 5',
- items: [{label: 'User 5.1'}, {label: 'User 5.2'}]
- },
- {
- label: 'User 6',
- items: [{label: 'User 6.1'}, {label: 'User 6.2'}]
- }
- ]
- ]
- },
- {
- label: 'Events', icon: 'pi pi-fw pi-calendar',
- items: [
- [
- {
- label: 'Event 1',
- items: [{label: 'Event 1.1'}, {label: 'Event 1.2'}]
- },
- {
- label: 'Event 2',
- items: [{label: 'Event 2.1'}, {label: 'Event 2.2'}]
- }
- ],
- [
- {
- label: 'Event 3',
- items: [{label: 'Event 3.1'}, {label: 'Event 3.2'}]
- },
- {
- label: 'Event 4',
- items: [{label: 'Event 4.1'}, {label: 'Event 4.2'}]
- }
- ]
- ]
- },
- {
- label: 'Settings', icon: 'pi pi-fw pi-cog',
- items: [
- [
- {
- label: 'Setting 1',
- items: [{label: 'Setting 1.1'}, {label: 'Setting 1.2'}]
- },
- {
- label: 'Setting 2',
- items: [{label: 'Setting 2.1'}, {label: 'Setting 2.2'}]
- },
- {
- label: 'Setting 3',
- items: [{label: 'Setting 3.1'}, {label: 'Setting 3.2'}]
- }
- ],
- [
- {
- label: 'Setting 4',
- items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}]
- }
- ]
- ]
- }
- ]
- }
- }
-}
-
-None.
+ \ No newline at end of file diff --git a/src/views/menu/MenuDoc.vue b/src/views/menu/MenuDoc.vue index 002644963..0691cd767 100755 --- a/src/views/menu/MenuDoc.vue +++ b/src/views/menu/MenuDoc.vue @@ -1,18 +1,16 @@ -
import Menu from 'primevue/menu';
Menu uses the common MenuModel API to define the items, visit
Menu uses the common MenuModel API to define the items, visit
Menu requires a collection of menuitems as its model.
+Menu requires a collection of menuitems as its model.
<Menu :model="items" />
@@ -54,8 +52,8 @@ export default {
Menu supports one level of nesting via subitems of an item.
+Menu supports one level of nesting via subitems of an item.
const items: [
{
@@ -72,8 +70,8 @@ const items: [
Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.
+Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.
<Button type="button" label="Toggle" @click="toggle" />
@@ -88,214 +86,142 @@ toggle(event) {
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 | -
|---|---|---|---|
| model | -array | -null | -An array of menuitems. | -
| popup | -boolean | -false | -Defines if menu would displayed as a popup. | -
| appendTo | -string | -body | -A valid query selector or an HTMLElement to specify where the overlay gets attached. | -
| 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 | +
|---|---|---|---|
| model | +array | +null | +An array of menuitems. | +
| popup | +boolean | +false | +Defines if menu would displayed as a popup. | +
| appendTo | +string | +body | +A valid query selector or an HTMLElement to specify where the overlay gets attached. | +
| baseZIndex | +number | +0 | +Base zIndex value to use in layering. | +
| autoZIndex | +boolean | +true | +Whether to automatically manage layering. | +
| Name | -Parameters | -Description | -
|---|---|---|
| toggle | -event: Browser event | -Toggles the visibility of the overlay. | -
| show | -event: Browser event - target: Optional target if event.target would not be used |
- Shows the overlay. | -
| hide | -- | -Hides the overlay. | -
| Name | +Parameters | +Description | +
|---|---|---|
| toggle | +event: Browser event | +Toggles the visibility of the overlay. | +
| show | +event: Browser event + target: Optional target if event.target would not be used |
+ Shows the overlay. | +
| hide | +- | +Hides the overlay. | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-menu | -Container element. | -
| p-menu-list | -List element. | -
| p-menuitem | -Menuitem element. | -
| p-menuitem-text | -Label of a menuitem. | -
| p-menuitem-icon | -Icon of a menuitem. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-menu | +Container element. | +
| p-menu-list | +List element. | +
| p-menuitem | +Menuitem element. | +
| p-menuitem-text | +Label of a menuitem. | +
| p-menuitem-icon | +Icon of a menuitem. | +
None.
-
-<h3>Inline</h3>
-<Menu :model="items" />
-
-<h3>Overlay</h3>
-<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
-<Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
-
-
-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.
+ diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue index 0c8ffd4d5..d6b37cf38 100755 --- a/src/views/menubar/MenubarDoc.vue +++ b/src/views/menubar/MenubarDoc.vue @@ -1,18 +1,16 @@ -
import Menubar from 'primevue/menubar';
Menubar uses the common MenuModel API to define the items, visit
Menubar uses the common MenuModel API to define the items, visit
Menubar requires a collection of menuitems as its model.
+Menubar requires a collection of menuitems as its model.
<Menubar :model="items" />
@@ -156,8 +154,8 @@ export default {
Two slots named "start" and "end" are provided to embed content before or after the menubar.
+Two slots named "start" and "end" are provided to embed content before or after the menubar.
<Menubar :model="items">
<template #start>
@@ -170,281 +168,117 @@ export default {
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 | -
|---|---|---|---|
| model | -array | -null | -An array of menuitems. | -
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 | +
|---|---|---|---|
| model | +array | +null | +An array of menuitems. | +
| Name | -Parameters | -
|---|---|
| start | -- | -
| end | -- | -
| Name | +Parameters | +
|---|---|
| start | +- | +
| end | +- | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-menubar | -Container element. | -
| p-menubar-root-list | -Root list element. | -
| p-submenu-list | -Submenu list element. | -
| p-menuitem | -Menuitem element. | -
| p-menuitem-text | -Label of a menuitem. | -
| p-menuitem-icon | -Icon of a menuitem. | -
| p-submenu-icon | -Arrow icon of a submenu. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-menubar | +Container element. | +
| p-menubar-root-list | +Root list element. | +
| p-submenu-list | +Submenu list element. | +
| p-menuitem | +Menuitem element. | +
| p-menuitem-text | +Label of a menuitem. | +
| p-menuitem-icon | +Icon of a menuitem. | +
| p-submenu-icon | +Arrow icon of a submenu. | +
None.
-
-<Menubar :model="items">
- <template #start>
- <img alt="logo" src="../../assets/images/logo.svg" height="40" class="p-mr-2">
- </template>
- <template #end>
- <InputText placeholder="Search" type="text" />
- <Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '0 .5em'}"/>
- </template>
-</Menubar>
-
-
-export default {
- data() {
- return {
- items: [
- {
- label:'File',
- icon:'pi pi-fw pi-file',
- items:[
- {
- label:'New',
- icon:'pi pi-fw pi-plus',
- items:[
- {
- label:'Bookmark',
- icon:'pi pi-fw pi-bookmark'
- },
- {
- label:'Video',
- icon:'pi pi-fw pi-video'
- },
-
- ]
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-trash'
- },
- {
- separator:true
- },
- {
- label:'Export',
- icon:'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label:'Edit',
- icon:'pi pi-fw pi-pencil',
- items:[
- {
- label:'Left',
- icon:'pi pi-fw pi-align-left'
- },
- {
- label:'Right',
- icon:'pi pi-fw pi-align-right'
- },
- {
- label:'Center',
- icon:'pi pi-fw pi-align-center'
- },
- {
- label:'Justify',
- icon:'pi pi-fw pi-align-justify'
- },
-
- ]
- },
- {
- label:'Users',
- icon:'pi pi-fw pi-user',
- items:[
- {
- label:'New',
- icon:'pi pi-fw pi-user-plus',
-
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-user-minus',
-
- },
- {
- label:'Search',
- icon:'pi pi-fw pi-users',
- items:[
- {
- label:'Filter',
- icon:'pi pi-fw pi-filter',
- items:[
- {
- label:'Print',
- icon:'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon:'pi pi-fw pi-bars',
- label:'List'
- }
- ]
- }
- ]
- },
- {
- label:'Events',
- icon:'pi pi-fw pi-calendar',
- items:[
- {
- label:'Edit',
- icon:'pi pi-fw pi-pencil',
- items:[
- {
- label:'Save',
- icon:'pi pi-fw pi-calendar-plus'
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-calendar-minus'
- },
-
- ]
- },
- {
- label:'Archieve',
- icon:'pi pi-fw pi-calendar-times',
- items:[
- {
- label:'Remove',
- icon:'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- label:'Quit',
- icon:'pi pi-fw pi-power-off'
- }
- ]
- }
- }
-}
-
-None.
+ \ No newline at end of file diff --git a/src/views/panelmenu/PanelMenuDoc.vue b/src/views/panelmenu/PanelMenuDoc.vue index 76f3e9409..b81145546 100755 --- a/src/views/panelmenu/PanelMenuDoc.vue +++ b/src/views/panelmenu/PanelMenuDoc.vue @@ -1,18 +1,16 @@ -
import PanelMenu from 'primevue/panelmenu';
PanelMenu uses the common MenuModel API to define the items, visit
PanelMenu uses the common MenuModel API to define the items, visit
PanelMenu requires a collection of menuitems as its model.
+PanelMenu requires a collection of menuitems as its model.
<PanelMenu :model="items" />
@@ -145,237 +143,92 @@ export default {
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 | -
|---|---|---|---|
| model | -array | -null | -An array of menuitems. | -
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 | +
|---|---|---|---|
| model | +array | +null | +An array of menuitems. | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-panelmenu | -Container element. | -
| p-panelmenu-header | -Accordion header of root submenu. | -
| p-panelmenu-content | -Accordion content of root submenu. | -
| p-submenu-list | -List element. | -
| p-menuitem | -Menuitem element. | -
| p-menuitem-text | -Label of a menuitem. | -
| p-menuitem-icon | -Icon of a menuitem. | -
| p-panelmenu-icon | -Arrow icon of an accordion header. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-panelmenu | +Container element. | +
| p-panelmenu-header | +Accordion header of root submenu. | +
| p-panelmenu-content | +Accordion content of root submenu. | +
| p-submenu-list | +List element. | +
| p-menuitem | +Menuitem element. | +
| p-menuitem-text | +Label of a menuitem. | +
| p-menuitem-icon | +Icon of a menuitem. | +
| p-panelmenu-icon | +Arrow icon of an accordion header. | +
None.
-
-<PanelMenu :model="items" />
-
-
-export default {
- data() {
- return {
- items: [
- {
- label: 'File',
- icon:'pi pi-fw pi-file',
- items: [
- {
- label: 'New',
- icon:'pi pi-fw pi-plus',
- items: [
- {
- label: 'Bookmark',
- icon:'pi pi-fw pi-bookmark'
- },
- {
- label: 'Video',
- icon:'pi pi-fw pi-video'
- }
- ]
- },
- {
- label: 'Delete',
- icon:'pi pi-fw pi-trash'
- },
- {
- label: 'Export',
- icon:'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label: 'Edit',
- icon:'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Left',
- icon:'pi pi-fw pi-align-left'
- },
- {
- label: 'Right',
- icon:'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon:'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon:'pi pi-fw pi-align-justify'
- }
- ]
- },
- {
- label: 'Users',
- icon:'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon:'pi pi-fw pi-user-plus',
-
- },
- {
- label: 'Delete',
- icon:'pi pi-fw pi-user-minus',
- },
- {
- label: 'Search',
- icon:'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon:'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon:'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon:'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
- }
- ]
- },
- {
- label: 'Events',
- icon:'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon:'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon:'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon:'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archieve',
- icon:'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon:'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- }
- ]
- }
- }
-}
-
-None.
+ \ No newline at end of file diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue index 349501dba..c05611c62 100755 --- a/src/views/steps/StepsDoc.vue +++ b/src/views/steps/StepsDoc.vue @@ -6,11 +6,11 @@ import Steps from 'primevue/steps'; -Steps uses the common MenuModel API to define the items, visit
Steps uses the common MenuModel API to define the items, visit
Steps is integrated with Vue Router and requires a collection of menuitems as its model.
+Steps is integrated with Vue Router and requires a collection of menuitems as its model.
<Steps :model="items" />
<router-view />
@@ -43,82 +43,82 @@ export default {
Items are readonly by default, if you'd like to make them interactive then disable readonly property.
+Items are readonly by default, if you'd like to make them interactive then disable readonly property.
<Steps :model="items" :readonly="false" />
<router-view />
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 | -
|---|---|---|---|
| id | -string | -null | -Unique identifier of the element. | -
| model | -array | -null | -An array of menuitems. | -
| readonly | -boolean | -true | -Whether the items are clickable or not. | -
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 | +
|---|---|---|---|
| id | +string | +null | +Unique identifier of the element. | +
| model | +array | +null | +An array of menuitems. | +
| readonly | +boolean | +true | +Whether the items are clickable or not. | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-steps | -Container element. | -
| p-steps-item | -Menuitem element. | -
| p-steps-number | -Number of menuitem. | -
| p-steps-title | -Label of menuitem. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-steps | +Container element. | +
| p-steps-item | +Menuitem element. | +
| p-steps-number | +Number of menuitem. | +
| p-steps-title | +Label of menuitem. | +
None.
+None.
@@ -133,11 +133,13 @@ export default { content: `
import TieredMenu from 'primevue/tieredmenu';
TieredMenu uses the common MenuModel API to define the items, visit
TieredMenu uses the common MenuModel API to define the items, visit
TieredMenu requires a collection of menuitems as its model.
+TieredMenu requires a collection of menuitems as its model.
<TieredMenu :model="items" />
@@ -159,8 +157,8 @@ export default {
TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.
+TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.
<Button type="button" label="Toggle" @click="toggle" />
@@ -175,313 +173,144 @@ toggle(event) {
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 | -
|---|---|---|---|
| model | -array | -null | -An array of menuitems. | -
| popup | -boolean | -false | -Defines if menu would displayed as a popup. | -
| appendTo | -string | -body | -A valid query selector or an HTMLElement to specify where the overlay gets attached. | -
| 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 | +
|---|---|---|---|
| model | +array | +null | +An array of menuitems. | +
| popup | +boolean | +false | +Defines if menu would displayed as a popup. | +
| appendTo | +string | +body | +A valid query selector or an HTMLElement to specify where the overlay gets attached. | +
| baseZIndex | +number | +0 | +Base zIndex value to use in layering. | +
| autoZIndex | +boolean | +true | +Whether to automatically manage layering. | +
| Name | -Parameters | -Description | -
|---|---|---|
| toggle | -event: Browser event | -Toggles the visibility of the overlay. | -
| show | -event: Browser event - target: Optional target if event.target would not be used |
- Shows the overlay. | -
| hide | -- | -Hides the overlay. | -
| Name | +Parameters | +Description | +
|---|---|---|
| toggle | +event: Browser event | +Toggles the visibility of the overlay. | +
| show | +event: Browser event + target: Optional target if event.target would not be used |
+ Shows the overlay. | +
| hide | +- | +Hides the overlay. | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-tieredmenu | -Container element. | -
| p-submenu-list | -Submenu list element. | -
| p-menuitem | -Menuitem element. | -
| p-menuitem-text | -Label of a menuitem. | -
| p-menuitem-icon | -Icon of a menuitem. | -
| p-submenu-icon | -Arrow icon of a submenu. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-tieredmenu | +Container element. | +
| p-submenu-list | +Submenu list element. | +
| p-menuitem | +Menuitem element. | +
| p-menuitem-text | +Label of a menuitem. | +
| p-menuitem-icon | +Icon of a menuitem. | +
| p-submenu-icon | +Arrow icon of a submenu. | +
None.
-
-<h3>Inline</h3>
-<TieredMenu :model="items" />
-
-<h3>Overlay</h3>
-<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
-<TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" />
-
-
-export default {
- data() {
- return {
- items: [
- {
- label:'File',
- icon:'pi pi-fw pi-file',
- items:[
- {
- label:'New',
- icon:'pi pi-fw pi-plus',
- items:[
- {
- label:'Bookmark',
- icon:'pi pi-fw pi-bookmark'
- },
- {
- label:'Video',
- icon:'pi pi-fw pi-video'
- },
-
- ]
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-trash'
- },
- {
- separator:true
- },
- {
- label:'Export',
- icon:'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label:'Edit',
- icon:'pi pi-fw pi-pencil',
- items:[
- {
- label:'Left',
- icon:'pi pi-fw pi-align-left'
- },
- {
- label:'Right',
- icon:'pi pi-fw pi-align-right'
- },
- {
- label:'Center',
- icon:'pi pi-fw pi-align-center'
- },
- {
- label:'Justify',
- icon:'pi pi-fw pi-align-justify'
- },
-
- ]
- },
- {
- label:'Users',
- icon:'pi pi-fw pi-user',
- items:[
- {
- label:'New',
- icon:'pi pi-fw pi-user-plus',
-
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-user-minus',
-
- },
- {
- label:'Search',
- icon:'pi pi-fw pi-users',
- items:[
- {
- label:'Filter',
- icon:'pi pi-fw pi-filter',
- items:[
- {
- label:'Print',
- icon:'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon:'pi pi-fw pi-bars',
- label:'List'
- }
- ]
- }
- ]
- },
- {
- label:'Events',
- icon:'pi pi-fw pi-calendar',
- items:[
- {
- label:'Edit',
- icon:'pi pi-fw pi-pencil',
- items:[
- {
- label:'Save',
- icon:'pi pi-fw pi-calendar-plus'
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-calendar-minus'
- },
-
- ]
- },
- {
- label:'Archieve',
- icon:'pi pi-fw pi-calendar-times',
- items:[
- {
- label:'Remove',
- icon:'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- separator:true
- },
- {
- label:'Quit',
- icon:'pi pi-fw pi-power-off'
- }
- ]
- }
- },
- methods: {
- toggle(event) {
- this.$refs.menu.toggle(event);
- }
- }
-}
-
-None.
+ \ No newline at end of file