dynamic menu
Tuğçe Küçükoğlu
parent
6da1925a85
commit
3af3a3387f
|
|
@ -0,0 +1,773 @@
|
|||
{
|
||||
"data": [
|
||||
{
|
||||
"name": "Vue 2",
|
||||
"meta": ["general"],
|
||||
"children": [
|
||||
{
|
||||
"name": "PrimeVue 2",
|
||||
"href": "https://www.primefaces.org/primevue/showcase-v2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "General",
|
||||
"meta": ["general"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Get Started",
|
||||
"to": "/setup"
|
||||
},
|
||||
{
|
||||
"name": "Forum",
|
||||
"href": "https://forum.primefaces.org/viewforum.php?f=110"
|
||||
},
|
||||
{
|
||||
"name": "Discord Channel",
|
||||
"href": "https://discord.gg/gzKFYnpmCY"
|
||||
},
|
||||
{
|
||||
"name": "Source Code",
|
||||
"href": "https://github.com/primefaces/primevue"
|
||||
},
|
||||
{
|
||||
"name": "Support",
|
||||
"to": "/support"
|
||||
},
|
||||
{
|
||||
"name": "Store",
|
||||
"href": "https://www.primefaces.org/store"
|
||||
},
|
||||
{
|
||||
"name": "Locale",
|
||||
"to": "/locale",
|
||||
"badge": "New"
|
||||
},
|
||||
{
|
||||
"name": "Accessibility",
|
||||
"to": "/accessibility"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Theming",
|
||||
"meta": ["theming"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Guide",
|
||||
"to": "/theming"
|
||||
},
|
||||
{
|
||||
"name": "Theme Design",
|
||||
"href": "https://www.primefaces.org/designer/primevue"
|
||||
},
|
||||
{
|
||||
"name": "Visual Editor",
|
||||
"href": "https://www.primefaces.org/designer-vue"
|
||||
},
|
||||
{
|
||||
"name": "SASS API",
|
||||
"href": "https://www.primefaces.org/designer/api/primevue/3.0.0"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "PrimeFlex",
|
||||
"meta": ["primeflex"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Setup",
|
||||
"to": "/primeflex"
|
||||
},
|
||||
{
|
||||
"name": "Display",
|
||||
"to": "/display"
|
||||
},
|
||||
{
|
||||
"name": "Elevation",
|
||||
"to": "/elevation"
|
||||
},
|
||||
{
|
||||
"name": "Flexbox",
|
||||
"to": "/flexbox"
|
||||
},
|
||||
{
|
||||
"name": "Form Layout",
|
||||
"to": "/formlayout"
|
||||
},
|
||||
{
|
||||
"name": "Grid System",
|
||||
"to": "/grid"
|
||||
},
|
||||
{
|
||||
"name": "Spacing",
|
||||
"to": "/spacing"
|
||||
},
|
||||
{
|
||||
"name": "Text",
|
||||
"to": "/text"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "PrimeIcons",
|
||||
"meta": ["primeicons"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Icons v4.0",
|
||||
"to": "/icons"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Form",
|
||||
"meta": ["form"],
|
||||
"children": [
|
||||
{
|
||||
"name": "AutoComplete",
|
||||
"to": "/autocomplete"
|
||||
},
|
||||
{
|
||||
"name": "Calendar",
|
||||
"to": "/calendar"
|
||||
},
|
||||
{
|
||||
"name": "CascadeSelect",
|
||||
"to": "/cascadeselect",
|
||||
"badge": "New"
|
||||
},
|
||||
{
|
||||
"name": "Checkbox",
|
||||
"to": "/checkbox"
|
||||
},
|
||||
{
|
||||
"name": "Chips",
|
||||
"to": "/chips"
|
||||
},
|
||||
{
|
||||
"name": "ColorPicker",
|
||||
"to": "/colorpicker"
|
||||
},
|
||||
{
|
||||
"name": "Dropdown",
|
||||
"to": "/dropdown"
|
||||
},
|
||||
{
|
||||
"name": "Editor",
|
||||
"to": "/editor"
|
||||
},
|
||||
{
|
||||
"name": "InputGroup",
|
||||
"to": "/inputgroup"
|
||||
},
|
||||
{
|
||||
"name": "InputMask",
|
||||
"to": "/inputmask"
|
||||
},
|
||||
{
|
||||
"name": "InputNumber",
|
||||
"to": "/inputnumber"
|
||||
},
|
||||
{
|
||||
"name": "InputSwitch",
|
||||
"to": "/inputswitch"
|
||||
},
|
||||
{
|
||||
"name": "InputText",
|
||||
"to": "/inputtext"
|
||||
},
|
||||
{
|
||||
"name": "FloatLabel",
|
||||
"to": "/floatlabel"
|
||||
},
|
||||
{
|
||||
"name": "Knob",
|
||||
"to": "/knob",
|
||||
"badge": "New"
|
||||
},
|
||||
{
|
||||
"name": "Listbox",
|
||||
"to": "/listbox"
|
||||
},
|
||||
{
|
||||
"name": "MultiSelect",
|
||||
"to": "/multiselect"
|
||||
},
|
||||
{
|
||||
"name": "Password",
|
||||
"to": "/password"
|
||||
},
|
||||
{
|
||||
"name": "RadioButton",
|
||||
"to": "/radiobutton"
|
||||
},
|
||||
{
|
||||
"name": "Rating",
|
||||
"to": "/rating"
|
||||
},
|
||||
{
|
||||
"name": "SelectButton",
|
||||
"to": "/selectbutton"
|
||||
},
|
||||
{
|
||||
"name": "Slider",
|
||||
"to": "/slider"
|
||||
},
|
||||
{
|
||||
"name": "Textarea",
|
||||
"to": "/textarea"
|
||||
},
|
||||
{
|
||||
"name": "ToggleButton",
|
||||
"to": "/togglebutton"
|
||||
},
|
||||
{
|
||||
"name": "TriStateCheckbox",
|
||||
"to": "/tristatecheckbox"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Button",
|
||||
"meta": ["button"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Button",
|
||||
"to": "/button"
|
||||
},
|
||||
{
|
||||
"name": "SplitButton",
|
||||
"to": "/splitbutton"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Data",
|
||||
"meta": ["datatable"],
|
||||
"children": [
|
||||
{
|
||||
"name": "DataTable",
|
||||
"meta": ["datatable"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Documentation",
|
||||
"to": "/datatable"
|
||||
},
|
||||
{
|
||||
"name": "Basic",
|
||||
"to": "/datatable/basic"
|
||||
},
|
||||
{
|
||||
"name": "Dynamic",
|
||||
"to": "/datatable/dynamiccolumns"
|
||||
},
|
||||
{
|
||||
"name": "Templating",
|
||||
"to": "/datatable/templating"
|
||||
},
|
||||
{
|
||||
"name": "Size",
|
||||
"to": "/datatable/size"
|
||||
},
|
||||
{
|
||||
"name": "Gridlines",
|
||||
"to": "/datatable/gridlines"
|
||||
},
|
||||
{
|
||||
"name": "Striped",
|
||||
"to": "/datatable/striped"
|
||||
},
|
||||
{
|
||||
"name": "ColGroup",
|
||||
"to": "/datatable/colgroup"
|
||||
},
|
||||
{
|
||||
"name": "Paginator",
|
||||
"to": "/datatable/paginator"
|
||||
},
|
||||
{
|
||||
"name": "Sort",
|
||||
"to": "/datatable/sort"
|
||||
},
|
||||
{
|
||||
"name": "Filter",
|
||||
"to": "/datatable/filter"
|
||||
},
|
||||
{
|
||||
"name": "Selection",
|
||||
"to": "/datatable/selection"
|
||||
},
|
||||
{
|
||||
"name": "Lazy",
|
||||
"to": "/datatable/lazy"
|
||||
},
|
||||
{
|
||||
"name": "Scroll",
|
||||
"to": "/datatable/scroll"
|
||||
},
|
||||
{
|
||||
"name": "FlexScroll",
|
||||
"to": "/datatable/flexscroll"
|
||||
},
|
||||
{
|
||||
"name": "Expand",
|
||||
"to": "/datatable/rowexpand"
|
||||
},
|
||||
{
|
||||
"name": "Edit",
|
||||
"to": "/datatable/edit"
|
||||
},
|
||||
{
|
||||
"name": "ColToggle",
|
||||
"to": "/datatable/coltoggle"
|
||||
},
|
||||
{
|
||||
"name": "ColResize",
|
||||
"to": "/datatable/colresize"
|
||||
},
|
||||
{
|
||||
"name": "Reorder",
|
||||
"to": "/datatable/reorder"
|
||||
},
|
||||
{
|
||||
"name": "RowGroup",
|
||||
"to": "/datatable/rowgroup"
|
||||
},
|
||||
{
|
||||
"name": "ContextMenu",
|
||||
"to": "/datatable/contextmenu"
|
||||
},
|
||||
{
|
||||
"name": "Responsive",
|
||||
"to": "/datatable/responsive"
|
||||
},
|
||||
{
|
||||
"name": "Export",
|
||||
"to": "/datatable/export"
|
||||
},
|
||||
{
|
||||
"name": "State",
|
||||
"to": "/datatable/state"
|
||||
},
|
||||
{
|
||||
"name": "Style",
|
||||
"to": "/datatable/style"
|
||||
},
|
||||
{
|
||||
"name": "Crud",
|
||||
"to": "/datatable/crud"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "DataView",
|
||||
"to": "/dataview"
|
||||
},
|
||||
{
|
||||
"name": "FullCalendar",
|
||||
"to": "/fullcalendar"
|
||||
},
|
||||
{
|
||||
"name": "OrderList",
|
||||
"to": "/orderlist"
|
||||
},
|
||||
{
|
||||
"name": "OrganizationChart",
|
||||
"to": "/organizationchart"
|
||||
},
|
||||
{
|
||||
"name": "Paginator",
|
||||
"to": "/paginator"
|
||||
},
|
||||
{
|
||||
"name": "PickList",
|
||||
"to": "/picklist"
|
||||
},
|
||||
{
|
||||
"name": "Timeline",
|
||||
"to": "/timeline"
|
||||
},
|
||||
{
|
||||
"name": "Tree",
|
||||
"meta": ["tree"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Documentation",
|
||||
"to": "/tree"
|
||||
},
|
||||
{
|
||||
"name": "Selection",
|
||||
"to": "/tree/selection"
|
||||
},
|
||||
{
|
||||
"name": "Lazy",
|
||||
"to": "/tree/lazy"
|
||||
},
|
||||
{
|
||||
"name": "Templating",
|
||||
"to": "/tree/templating"
|
||||
},
|
||||
{
|
||||
"name": "Filter",
|
||||
"to": "/tree/filter"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "TreeTable",
|
||||
"meta": ["treetable"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Documentation",
|
||||
"to": "/treetable"
|
||||
},
|
||||
{
|
||||
"name": "Templating",
|
||||
"to": "/treetable/templating"
|
||||
},
|
||||
{
|
||||
"name": "Size",
|
||||
"to": "/treetable/size"
|
||||
},
|
||||
{
|
||||
"name": "Paginator",
|
||||
"to": "/treetable/paginator"
|
||||
},
|
||||
{
|
||||
"name": "Sort",
|
||||
"to": "/treetable/sort"
|
||||
},
|
||||
{
|
||||
"name": "Filter",
|
||||
"to": "/treetable/filter"
|
||||
},
|
||||
{
|
||||
"name": "Selection",
|
||||
"to": "/treetable/selection"
|
||||
},
|
||||
{
|
||||
"name": "Lazy",
|
||||
"to": "/treetable/lazy"
|
||||
},
|
||||
{
|
||||
"name": "ColToggle",
|
||||
"to": "/treetable/coltoggle"
|
||||
},
|
||||
{
|
||||
"name": "Tempalting",
|
||||
"to": "/treetable/templating"
|
||||
},
|
||||
{
|
||||
"name": "Filter",
|
||||
"to": "/treetable/filter"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Panel",
|
||||
"meta": ["panel"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Accordion",
|
||||
"to": "/accordion"
|
||||
},
|
||||
{
|
||||
"name": "Card",
|
||||
"to": "/card"
|
||||
},
|
||||
{
|
||||
"name": "Deferred",
|
||||
"to": "/deferredcontent"
|
||||
},
|
||||
{
|
||||
"name": "Divider",
|
||||
"to": "/divider"
|
||||
},
|
||||
{
|
||||
"name": "Fieldset",
|
||||
"to": "/fieldset"
|
||||
},
|
||||
{
|
||||
"name": "Panel",
|
||||
"to": "/panel"
|
||||
},
|
||||
{
|
||||
"name": "Splitter",
|
||||
"to": "/splitter",
|
||||
"badge": "New"
|
||||
},
|
||||
{
|
||||
"name": "ScrollPanel",
|
||||
"to": "/scrollpanel"
|
||||
},
|
||||
{
|
||||
"name": "Tabview",
|
||||
"to": "/tabview"
|
||||
},
|
||||
{
|
||||
"name": "Toolbar",
|
||||
"to": "/toolbar"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Overlay",
|
||||
"meta": ["overlay"],
|
||||
"children": [
|
||||
{
|
||||
"name": "ConfirmDialog",
|
||||
"to": "/confirmdialog",
|
||||
"badge": "New"
|
||||
},
|
||||
{
|
||||
"name": "ConfirmPopup",
|
||||
"to": "/confirmpopup",
|
||||
"badge": "New"
|
||||
},
|
||||
{
|
||||
"name": "Dialog",
|
||||
"to": "/dialog"
|
||||
},
|
||||
{
|
||||
"name": "OverlayPanel",
|
||||
"to": "/overlaypanel"
|
||||
},
|
||||
{
|
||||
"name": "Sidebar",
|
||||
"to": "/sidebar"
|
||||
},
|
||||
{
|
||||
"name": "Tooltip",
|
||||
"to": "/tooltip"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "File",
|
||||
"meta": ["file"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Upload",
|
||||
"to": "/fileupload"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Menu",
|
||||
"meta": ["menu"],
|
||||
"children": [
|
||||
{
|
||||
"name": "MenuModel",
|
||||
"to": "/menumodel"
|
||||
},
|
||||
{
|
||||
"name": "BreadCrumb",
|
||||
"to": "/breadCrumb"
|
||||
},
|
||||
{
|
||||
"name": "ContextMenu",
|
||||
"to": "/contextmenu"
|
||||
},
|
||||
{
|
||||
"name": "MegaMenu",
|
||||
"to": "/megamenu"
|
||||
},
|
||||
{
|
||||
"name": "Menu",
|
||||
"to": "/menu"
|
||||
},
|
||||
{
|
||||
"name": "Menubar",
|
||||
"to": "/menubar"
|
||||
},
|
||||
{
|
||||
"name": "PanelMenu",
|
||||
"to": "/panelmenu"
|
||||
},
|
||||
{
|
||||
"name": "Steps",
|
||||
"to": "/steps"
|
||||
},
|
||||
{
|
||||
"name": "TabMenu",
|
||||
"to": "/tabmenu"
|
||||
},
|
||||
{
|
||||
"name": "TieredMenu",
|
||||
"to": "/tieredmenu"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Chart",
|
||||
"meta": ["chart"],
|
||||
"children": [
|
||||
{
|
||||
"name": "ChartModel",
|
||||
"to": "/chart"
|
||||
},
|
||||
{
|
||||
"name": "Pie",
|
||||
"to": "/chart/pie"
|
||||
},
|
||||
{
|
||||
"name": "Doughnut",
|
||||
"to": "/chart/doughnut"
|
||||
},
|
||||
{
|
||||
"name": "Bar",
|
||||
"to": "/chart/bar"
|
||||
},
|
||||
{
|
||||
"name": "Line",
|
||||
"to": "/chart/line"
|
||||
},
|
||||
{
|
||||
"name": "PolarArea",
|
||||
"to": "/chart/polararea"
|
||||
},
|
||||
{
|
||||
"name": "Radar",
|
||||
"to": "/chart/radar"
|
||||
},
|
||||
{
|
||||
"name": "Combo",
|
||||
"to": "/chart/combo"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Messages",
|
||||
"meta": ["messages"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Message",
|
||||
"to": "/message"
|
||||
},
|
||||
{
|
||||
"name": "Toast",
|
||||
"to": "/toast"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Media",
|
||||
"meta": ["media"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Carousel",
|
||||
"to": "/carousel"
|
||||
},
|
||||
{
|
||||
"name": "Galleria",
|
||||
"meta": ["galleria"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Documentation",
|
||||
"to": "/galleria"
|
||||
},
|
||||
{
|
||||
"name": "Programmatic",
|
||||
"to": "/galleria/programmatic"
|
||||
},
|
||||
{
|
||||
"name": "Indicator",
|
||||
"to": "/galleria/indicator"
|
||||
},
|
||||
{
|
||||
"name": "Thumbnail",
|
||||
"to": "/galleria/thumbnail"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Navigator",
|
||||
"to": "/galleria/navigator"
|
||||
},
|
||||
{
|
||||
"name": "Responsive",
|
||||
"to": "/galleria/responsive"
|
||||
},
|
||||
{
|
||||
"name": "FullScreen",
|
||||
"to": "/galleria/fullScreen"
|
||||
},
|
||||
{
|
||||
"name": "AutoPlay",
|
||||
"to": "/galleria/autoplay"
|
||||
},
|
||||
{
|
||||
"name": "Caption",
|
||||
"to": "/galleria/caption"
|
||||
},
|
||||
{
|
||||
"name": "Advanced",
|
||||
"to": "/galleria/advanced"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Misc",
|
||||
"meta": ["misc"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Avatar",
|
||||
"to": "/avatar",
|
||||
"badge": "New"
|
||||
},
|
||||
{
|
||||
"name": "Badge",
|
||||
"to": "/badge",
|
||||
"badge": "New"
|
||||
},
|
||||
{
|
||||
"name": "Chip",
|
||||
"to": "/chip",
|
||||
"badge": "New"
|
||||
},
|
||||
{
|
||||
"name": "BlockUI",
|
||||
"to": "/blockui"
|
||||
},
|
||||
{
|
||||
"name": "Inplace",
|
||||
"to": "/inplace"
|
||||
},
|
||||
{
|
||||
"name": "ScrollTop",
|
||||
"to": "/scrolltop",
|
||||
"badge": "New"
|
||||
},
|
||||
{
|
||||
"name": "Skeleton",
|
||||
"to": "/skeleton",
|
||||
"badge": "New"
|
||||
},
|
||||
{
|
||||
"name": "ProgressBar",
|
||||
"to": "/progressbar"
|
||||
},
|
||||
{
|
||||
"name": "ProgressSpinner",
|
||||
"to": "/progressspinner"
|
||||
},
|
||||
{
|
||||
"name": "Ripple",
|
||||
"to": "/ripple"
|
||||
},
|
||||
{
|
||||
"name": "Tag",
|
||||
"to": "/tag",
|
||||
"badge": "New"
|
||||
},
|
||||
{
|
||||
"name": "Terminal",
|
||||
"to": "/terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
310
src/AppMenu.vue
310
src/AppMenu.vue
|
|
@ -1,286 +1,61 @@
|
|||
<template>
|
||||
<div :class="['layout-sidebar', {'active': active}]">
|
||||
<div class="layout-menu">
|
||||
<div class="menu-category">Vue 2</div>
|
||||
<div class="menu-items">
|
||||
<a href="https://www.primefaces.org/primevue/showcase-v2" target="_blank">PrimeVue v2</a>
|
||||
</div>
|
||||
<div class="menu-category">General</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/setup">Get Started</router-link>
|
||||
<a href="https://forum.primefaces.org/viewforum.php?f=110" target="_blank">Forum</a>
|
||||
<a href="https://discord.gg/gzKFYnpmCY" target="_blank">Discord Chat</a>
|
||||
<a href="https://github.com/primefaces/primevue" target="_blank">Source Code</a>
|
||||
<router-link to="/support">Support</router-link>
|
||||
<a href="https://www.primefaces.org/store" target="_blank">Store</a>
|
||||
<router-link to="/locale">Locale <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/accessibility">Accessibility</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">Theming</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/theming">Guide</router-link>
|
||||
<a href="https://www.primefaces.org/designer/primevue">Theme Designer</a>
|
||||
<a href="https://www.primefaces.org/designer-vue">Visual Editor</a>
|
||||
<a href="https://www.primefaces.org/designer/api/primevue/3.0.0">SASS API</a>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">PrimeFlex</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/primeflex">Setup</router-link>
|
||||
<router-link to="/display">Display</router-link>
|
||||
<router-link to="/elevation">Elevation</router-link>
|
||||
<router-link to="/flexbox">FlexBox</router-link>
|
||||
<router-link to="/formlayout">Form Layout</router-link>
|
||||
<router-link to="/grid">Grid System</router-link>
|
||||
<router-link to="/spacing">Spacing</router-link>
|
||||
<router-link to="/text">Text</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">PrimeIcons</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/icons">Icons v4.0</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">Form</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/autocomplete">AutoComplete</router-link>
|
||||
<router-link to="/calendar">Calendar</router-link>
|
||||
<router-link to="/cascadeselect">CascadeSelect <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/checkbox">Checkbox</router-link>
|
||||
<router-link to="/chips">Chips</router-link>
|
||||
<router-link to="/colorpicker">ColorPicker</router-link>
|
||||
<router-link to="/dropdown">Dropdown</router-link>
|
||||
<router-link to="/editor">Editor</router-link>
|
||||
<router-link to="/inputgroup">InputGroup</router-link>
|
||||
<router-link to="/inputmask">InputMask</router-link>
|
||||
<router-link to="/inputnumber">InputNumber</router-link>
|
||||
<router-link to="/inputswitch">InputSwitch</router-link>
|
||||
<router-link to="/inputtext">InputText</router-link>
|
||||
<router-link to="/floatlabel">FloatLabel</router-link>
|
||||
<router-link to="/knob">Knob <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/listbox">Listbox</router-link>
|
||||
<router-link to="/multiselect">MultiSelect</router-link>
|
||||
<router-link to="/password">Password</router-link>
|
||||
<router-link to="/radiobutton">RadioButton</router-link>
|
||||
<router-link to="/rating">Rating</router-link>
|
||||
<router-link to="/selectbutton">SelectButton</router-link>
|
||||
<router-link to="/slider">Slider</router-link>
|
||||
<router-link to="/textarea">Textarea</router-link>
|
||||
<router-link to="/togglebutton">ToggleButton</router-link>
|
||||
<router-link to="/tristatecheckbox">TriStateCheckbox</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">Button</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/button">Button</router-link>
|
||||
<router-link to="/splitbutton">SplitButton</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">Data</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/datatable" v-slot="{isActive}" custom>
|
||||
<div>
|
||||
<a tabindex="0" @click="toggleSubmenu($event, 'datatable')">DataTable</a>
|
||||
<transition name="p-toggleable-content">
|
||||
<div class="p-toggleable-content" v-show="isSubmenuActive('datatable', isActive)">
|
||||
<ul>
|
||||
<li><router-link to="/datatable">Documentation</router-link></li>
|
||||
<li><router-link to="/datatable/basic">Basic</router-link></li>
|
||||
<li><router-link to="/datatable/dynamiccolumns">Dynamic</router-link></li>
|
||||
<li><router-link to="/datatable/templating">Templating</router-link></li>
|
||||
<li><router-link to="/datatable/size">Size</router-link></li>
|
||||
<li><router-link to="/datatable/gridlines">GridLines</router-link></li>
|
||||
<li><router-link to="/datatable/striped">Striped</router-link></li>
|
||||
<li><router-link to="/datatable/colgroup">ColGroup</router-link></li>
|
||||
<li><router-link to="/datatable/paginator">Paginator</router-link></li>
|
||||
<li><router-link to="/datatable/sort">Sort</router-link></li>
|
||||
<li><router-link to="/datatable/filter">Filter</router-link></li>
|
||||
<li><router-link to="/datatable/selection">Selection</router-link></li>
|
||||
<li><router-link to="/datatable/lazy">Lazy</router-link></li>
|
||||
<li><router-link to="/datatable/scroll">Scroll</router-link></li>
|
||||
<li><router-link to="/datatable/flexscroll">FlexScroll</router-link></li>
|
||||
<li><router-link to="/datatable/rowexpand">Expand</router-link></li>
|
||||
<li><router-link to="/datatable/edit">Edit</router-link></li>
|
||||
<li><router-link to="/datatable/coltoggle">ColToggle</router-link></li>
|
||||
<li><router-link to="/datatable/colresize">ColResize</router-link></li>
|
||||
<li><router-link to="/datatable/reorder">Reorder</router-link></li>
|
||||
<li><router-link to="/datatable/rowgroup">RowGroup</router-link></li>
|
||||
<li><router-link to="/datatable/contextmenu">ContextMenu</router-link></li>
|
||||
<li><router-link to="/datatable/responsive">Responsive</router-link></li>
|
||||
<li><router-link to="/datatable/export">Export</router-link></li>
|
||||
<li><router-link to="/datatable/state">State</router-link></li>
|
||||
<li><router-link to="/datatable/style">Style</router-link></li>
|
||||
<li><router-link to="/datatable/crud">Crud</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/dataview">DataView</router-link>
|
||||
<router-link to="/fullcalendar">FullCalendar</router-link>
|
||||
<router-link to="/orderlist">OrderList</router-link>
|
||||
<router-link to="/organizationchart">OrganizationChart</router-link>
|
||||
<router-link to="/paginator">Paginator</router-link>
|
||||
<router-link to="/picklist">PickList</router-link>
|
||||
<router-link to="/timeline">Timeline </router-link>
|
||||
<router-link to="/tree" v-slot="{isActive}" custom>
|
||||
<div>
|
||||
<a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a>
|
||||
<transition name="p-toggleable-content">
|
||||
<div class="p-toggleable-content" v-show="isSubmenuActive('tree', isActive)">
|
||||
<ul>
|
||||
<li><router-link to="/tree">Documentation</router-link></li>
|
||||
<li><router-link to="/tree/selection">Selection</router-link></li>
|
||||
<li><router-link to="/tree/lazy">Lazy</router-link></li>
|
||||
<li><router-link to="/tree/templating">Templating</router-link></li>
|
||||
<li><router-link to="/tree/filter">Filter</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link to="/treetable" v-slot="{isActive}" custom>
|
||||
<div>
|
||||
<a tabindex="0" @click="toggleSubmenu($event, 'treetable')">TreeTable</a>
|
||||
<transition name="p-toggleable-content">
|
||||
<div class="p-toggleable-content" v-show="isSubmenuActive('treetable', isActive)">
|
||||
<ul>
|
||||
<li><router-link to="/treetable">Documentation</router-link></li>
|
||||
<li><router-link to="/treetable/templating">Templating</router-link></li>
|
||||
<li><router-link to="/treetable/size">Size</router-link></li>
|
||||
<li><router-link to="/treetable/paginator">Paginator</router-link></li>
|
||||
<li><router-link to="/treetable/sort">Sort</router-link></li>
|
||||
<li><router-link to="/treetable/filter">Filter</router-link></li>
|
||||
<li><router-link to="/treetable/selection">Selection</router-link></li>
|
||||
<li><router-link to="/treetable/lazy">Lazy</router-link></li>
|
||||
<li><router-link to="/treetable/coltoggle">ColToggle</router-link></li>
|
||||
<li><router-link to="/treetable/colresize">Resize</router-link></li>
|
||||
<li><router-link to="/treetable/responsive">Responsive</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">Panel</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/accordion">Accordion</router-link>
|
||||
<router-link to="/card">Card</router-link>
|
||||
<router-link to="/deferredcontent">Deferred</router-link>
|
||||
<router-link to="/divider">Divider <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/fieldset">Fieldset</router-link>
|
||||
<router-link to="/panel">Panel</router-link>
|
||||
<router-link to="/splitter">Splitter <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/scrollpanel">ScrollPanel</router-link>
|
||||
<router-link to="/tabview">TabView</router-link>
|
||||
<router-link to="/toolbar">Toolbar</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">Overlay</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/confirmdialog">ConfirmDialog <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/confirmpopup">ConfirmPopup <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/dialog">Dialog</router-link>
|
||||
<router-link to="/overlaypanel">OverlayPanel</router-link>
|
||||
<router-link to="/sidebar">Sidebar</router-link>
|
||||
<router-link to="/tooltip">Tooltip</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">File</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/fileupload">Upload</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">Menu</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/menumodel">MenuModel</router-link>
|
||||
<router-link to="/breadcrumb">Breadcrumb</router-link>
|
||||
<router-link to="/contextmenu">ContextMenu</router-link>
|
||||
<router-link to="/megamenu">MegaMenu</router-link>
|
||||
<router-link to="/menu">Menu</router-link>
|
||||
<router-link to="/menubar">Menubar</router-link>
|
||||
<router-link to="/panelmenu">PanelMenu</router-link>
|
||||
<router-link to="/steps">Steps</router-link>
|
||||
<router-link to="/tabmenu">TabMenu</router-link>
|
||||
<router-link to="/tieredmenu">TieredMenu</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">Chart</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/chart">ChartModel</router-link>
|
||||
<router-link to="/chart/pie">Pie</router-link>
|
||||
<router-link to="/chart/doughnut">Doughnut</router-link>
|
||||
<router-link to="/chart/bar">Bar</router-link>
|
||||
<router-link to="/chart/line">Line</router-link>
|
||||
<router-link to="/chart/polararea">PolarArea</router-link>
|
||||
<router-link to="/chart/radar">Radar</router-link>
|
||||
<router-link to="/chart/combo">Combo</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">Messages</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/message">Message</router-link>
|
||||
<router-link to="/toast">Toast</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">Media</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/carousel">Carousel</router-link>
|
||||
<router-link to="/galleria" v-slot="{isActive}" custom>
|
||||
<div>
|
||||
<a tabindex="0" @click="toggleSubmenu($event, 'galleria')">Galleria</a>
|
||||
<transition name="p-toggleable-content">
|
||||
<div class="p-toggleable-content" v-show="isSubmenuActive('galleria', isActive)">
|
||||
<ul>
|
||||
<li><router-link to="/galleria">Documentation</router-link></li>
|
||||
<li><router-link to="/galleria/programmatic">Programmatic</router-link></li>
|
||||
<li><router-link to="/galleria/indicator">Indicator</router-link></li>
|
||||
<li><router-link to="/galleria/thumbnail">Thumbnail</router-link></li>
|
||||
<li><router-link to="/galleria/navigator">Navigator</router-link></li>
|
||||
<li><router-link to="/galleria/responsive">Responsive</router-link></li>
|
||||
<li><router-link to="/galleria/fullscreen">FullScreen</router-link></li>
|
||||
<li><router-link to="/galleria/autoplay">AutoPlay</router-link></li>
|
||||
<li><router-link to="/galleria/caption">Caption</router-link></li>
|
||||
<li><router-link to="/galleria/advanced">Advanced</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">Misc</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/avatar">Avatar <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/badge">Badge <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/chip">Chip <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/blockui">BlockUI</router-link>
|
||||
<router-link to="/inplace">Inplace</router-link>
|
||||
<router-link to="/scrolltop">ScrollTop <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/skeleton">Skeleton <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/progressbar">ProgressBar</router-link>
|
||||
<router-link to="/progressspinner">ProgressSpinner</router-link>
|
||||
<router-link to="/ripple">Ripple</router-link>
|
||||
<router-link to="/tag">Tag <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/terminal">Terminal</router-link>
|
||||
</div>
|
||||
<template v-for="item of menu" :key="item.name">
|
||||
<div class="menu-category">{{item.name}}</div>
|
||||
<div class="menu-items">
|
||||
<template v-for="child of item.children" :key="child.name">
|
||||
<a v-if="child.href" :href="child.href" target="_blank">{{child.name}}</a>
|
||||
<router-link v-if="child.to" :to="child.to">
|
||||
{{child.name}}
|
||||
<Tag v-if="child.badge" :value="child.badge"></Tag>
|
||||
</router-link>
|
||||
<template v-if="child.children">
|
||||
<router-link :to="child.meta[0]" v-slot="{isActive}" custom>
|
||||
<div>
|
||||
<a tabindex="0" @click="toggleSubmenu($event, child.meta[0])">{{child.name}}</a>
|
||||
<transition name="p-toggleable-content">
|
||||
<div class="p-toggleable-content" v-show="isSubmenuActive(child.meta[0], isActive)">
|
||||
<ul>
|
||||
<li v-for="(submenuitem, i) of child.children" :key="i">
|
||||
<router-link :to="submenuitem.to">{{submenuitem.name}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuService from './service/MenuService';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
active: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeSubmenus: {}
|
||||
activeSubmenus: {},
|
||||
menu: null
|
||||
}
|
||||
},
|
||||
menuService: null,
|
||||
created() {
|
||||
this.menuService = new MenuService();
|
||||
},
|
||||
mounted() {
|
||||
this.menuService.getMenu().then(data => {
|
||||
this.menu = data;
|
||||
this.filteredMenu = data;
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
toggleSubmenu(event, name) {
|
||||
this.activeSubmenus[name] = this.activeSubmenus[name] ? false: true;
|
||||
|
|
@ -295,7 +70,6 @@ export default {
|
|||
this.activeSubmenus[name] = true;
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import axios from 'axios';
|
||||
|
||||
export default class MenuService {
|
||||
|
||||
getMenu() {
|
||||
return axios.get('demo/menu/menu.json').then(res => res.data.data);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue