Add menudoc
This commit is contained in:
Çetin
500
src/views/uikit/menudoc.ts
Normal file
500
src/views/uikit/menudoc.ts
Normal file
@@ -0,0 +1,500 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { BreadcrumbModule } from 'primeng/breadcrumb';
|
||||||
|
import { TieredMenuModule } from 'primeng/tieredmenu';
|
||||||
|
import { ContextMenuModule } from 'primeng/contextmenu';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { MenuModule } from 'primeng/menu';
|
||||||
|
import { ButtonModule } from 'primeng/button';
|
||||||
|
import { MegaMenuModule } from 'primeng/megamenu';
|
||||||
|
import { PanelMenuModule } from 'primeng/panelmenu';
|
||||||
|
import { TabsModule } from 'primeng/tabs';
|
||||||
|
import { MenubarModule } from 'primeng/menubar';
|
||||||
|
import { InputTextModule } from 'primeng/inputtext';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
standalone:true,
|
||||||
|
imports: [CommonModule, BreadcrumbModule, TieredMenuModule, MenuModule, ButtonModule, ContextMenuModule, MegaMenuModule, PanelMenuModule, TabsModule, MenubarModule, InputTextModule],
|
||||||
|
template: `<div class="grid p-fluid">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="card card-w-title">
|
||||||
|
<h5>MenuBar</h5>
|
||||||
|
<p-menubar [model]="nestedMenuItems">
|
||||||
|
<ng-template #end>
|
||||||
|
<span class="p-input-icon-right">
|
||||||
|
<input type="text" pInputText placeholder="Search">
|
||||||
|
<i class="pi pi-search"></i>
|
||||||
|
</span>
|
||||||
|
</ng-template>
|
||||||
|
</p-menubar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="card card-w-title">
|
||||||
|
<h5>Breadcrumb</h5>
|
||||||
|
<p-breadcrumb [model]="breadcrumbItems" [home]="breadcrumbHome"></p-breadcrumb>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="col-12 md:col-4">
|
||||||
|
<div class="card card-w-title">
|
||||||
|
<h5>TieredMenu</h5>
|
||||||
|
<p-tieredMenu [model]="tieredMenuItems"></p-tieredMenu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-4">
|
||||||
|
<div class="card card-w-title">
|
||||||
|
<h5>Plain Menu</h5>
|
||||||
|
<p-menu [model]="menuItems"></p-menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-4">
|
||||||
|
|
||||||
|
<div class="card card-w-title">
|
||||||
|
<h5>Overlay Menu</h5>
|
||||||
|
|
||||||
|
<p-menu #menu [popup]="true" [model]="overlayMenuItems"></p-menu>
|
||||||
|
<button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card card-w-title" #anchor>
|
||||||
|
<h5>ContextMenu</h5>
|
||||||
|
Right click to display.
|
||||||
|
<p-contextMenu [target]="anchor" [model]="contextMenuItems"></p-contextMenu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-6">
|
||||||
|
<div class="card card-w-title">
|
||||||
|
<h5>MegaMenu - Horizontal</h5>
|
||||||
|
<p-megaMenu [model]="megaMenuItems"></p-megaMenu>
|
||||||
|
|
||||||
|
<h5>MegaMenu - Vertical</h5>
|
||||||
|
<p-megaMenu [model]="megaMenuItems" orientation="vertical" [style]="{'width':'200px'}"></p-megaMenu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-6">
|
||||||
|
<div class="card card-w-title">
|
||||||
|
<h5>PanelMenu</h5>
|
||||||
|
<p-panelMenu [model]="panelMenuItems"></p-panelMenu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class MenuDoc {
|
||||||
|
|
||||||
|
nestedMenuItems = [
|
||||||
|
{
|
||||||
|
label: 'Customers',
|
||||||
|
icon: 'pi pi-fw pi-table',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'New',
|
||||||
|
icon: 'pi pi-fw pi-user-plus',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Customer',
|
||||||
|
icon: 'pi pi-fw pi-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Duplicate',
|
||||||
|
icon: 'pi pi-fw pi-copy'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-user-edit'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Orders',
|
||||||
|
icon: 'pi pi-fw pi-shopping-cart',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'View',
|
||||||
|
icon: 'pi pi-fw pi-list'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Search',
|
||||||
|
icon: 'pi pi-fw pi-search'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Shipments',
|
||||||
|
icon: 'pi pi-fw pi-envelope',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Tracker',
|
||||||
|
icon: 'pi pi-fw pi-compass'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Map',
|
||||||
|
icon: 'pi pi-fw pi-map-marker'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Manage',
|
||||||
|
icon: 'pi pi-fw pi-pencil'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Profile',
|
||||||
|
icon: 'pi pi-fw pi-user',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Settings',
|
||||||
|
icon: 'pi pi-fw pi-cog'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Billing',
|
||||||
|
icon: 'pi pi-fw pi-file'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Quit',
|
||||||
|
icon: 'pi pi-fw pi-sign-out'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
breadcrumbHome = { icon: 'pi pi-home', to: '/' };
|
||||||
|
breadcrumbItems = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }];
|
||||||
|
tieredMenuItems = [
|
||||||
|
{
|
||||||
|
label: 'Customers',
|
||||||
|
icon: 'pi pi-fw pi-table',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'New',
|
||||||
|
icon: 'pi pi-fw pi-user-plus',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Customer',
|
||||||
|
icon: 'pi pi-fw pi-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Duplicate',
|
||||||
|
icon: 'pi pi-fw pi-copy'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-user-edit'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Orders',
|
||||||
|
icon: 'pi pi-fw pi-shopping-cart',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'View',
|
||||||
|
icon: 'pi pi-fw pi-list'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Search',
|
||||||
|
icon: 'pi pi-fw pi-search'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Shipments',
|
||||||
|
icon: 'pi pi-fw pi-envelope',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Tracker',
|
||||||
|
icon: 'pi pi-fw pi-compass'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Map',
|
||||||
|
icon: 'pi pi-fw pi-map-marker'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Manage',
|
||||||
|
icon: 'pi pi-fw pi-pencil'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Profile',
|
||||||
|
icon: 'pi pi-fw pi-user',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Settings',
|
||||||
|
icon: 'pi pi-fw pi-cog'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Billing',
|
||||||
|
icon: 'pi pi-fw pi-file'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
separator: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Quit',
|
||||||
|
icon: 'pi pi-fw pi-sign-out'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
overlayMenuItems = [
|
||||||
|
{
|
||||||
|
label: 'Save',
|
||||||
|
icon: 'pi pi-save'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Update',
|
||||||
|
icon: 'pi pi-refresh'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-trash'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
separator: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Home',
|
||||||
|
icon: 'pi pi-home'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
menuItems = [
|
||||||
|
{
|
||||||
|
label: 'Customers',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'New',
|
||||||
|
icon: 'pi pi-fw pi-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-user-edit'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Orders',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'View',
|
||||||
|
icon: 'pi pi-fw pi-list'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Search',
|
||||||
|
icon: 'pi pi-fw pi-search'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
contextMenuItems = [
|
||||||
|
{
|
||||||
|
label: 'Save',
|
||||||
|
icon: 'pi pi-save'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Update',
|
||||||
|
icon: 'pi pi-refresh'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-trash'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
separator: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Options',
|
||||||
|
icon: 'pi pi-cog'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
megaMenuItems = [
|
||||||
|
{
|
||||||
|
label: 'Fashion',
|
||||||
|
icon: 'pi pi-fw pi-tag',
|
||||||
|
items: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
label: 'Woman',
|
||||||
|
items: [{ label: 'Woman Item' }, { label: 'Woman Item' }, { label: 'Woman Item' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Men',
|
||||||
|
items: [{ label: 'Men Item' }, { label: 'Men Item' }, { label: 'Men Item' }]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
label: 'Kids',
|
||||||
|
items: [{ label: 'Kids Item' }, { label: 'Kids Item' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Luggage',
|
||||||
|
items: [{ label: 'Luggage Item' }, { label: 'Luggage Item' }, { label: 'Luggage Item' }]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Electronics',
|
||||||
|
icon: 'pi pi-fw pi-desktop',
|
||||||
|
items: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
label: 'Computer',
|
||||||
|
items: [{ label: 'Computer Item' }, { label: 'Computer Item' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Camcorder',
|
||||||
|
items: [{ label: 'Camcorder Item' }, { label: 'Camcorder Item' }, { label: 'Camcorder Item' }]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
label: 'TV',
|
||||||
|
items: [{ label: 'TV Item' }, { label: 'TV Item' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Audio',
|
||||||
|
items: [{ label: 'Audio Item' }, { label: 'Audio Item' }, { label: 'Audio Item' }]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
label: 'Sports.7',
|
||||||
|
items: [{ label: 'Sports.7.1' }, { label: 'Sports.7.2' }]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Furniture',
|
||||||
|
icon: 'pi pi-fw pi-image',
|
||||||
|
items: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
label: 'Living Room',
|
||||||
|
items: [{ label: 'Living Room Item' }, { label: 'Living Room Item' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Kitchen',
|
||||||
|
items: [{ label: 'Kitchen Item' }, { label: 'Kitchen Item' }, { label: 'Kitchen Item' }]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
label: 'Bedroom',
|
||||||
|
items: [{ label: 'Bedroom Item' }, { label: 'Bedroom Item' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Outdoor',
|
||||||
|
items: [{ label: 'Outdoor Item' }, { label: 'Outdoor Item' }, { label: 'Outdoor Item' }]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Sports',
|
||||||
|
icon: 'pi pi-fw pi-star',
|
||||||
|
items: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
label: 'Basketball',
|
||||||
|
items: [{ label: 'Basketball Item' }, { label: 'Basketball Item' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Football',
|
||||||
|
items: [{ label: 'Football Item' }, { label: 'Football Item' }, { label: 'Football Item' }]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
label: 'Tennis',
|
||||||
|
items: [{ label: 'Tennis Item' }, { label: 'Tennis Item' }]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
panelMenuItems = [
|
||||||
|
{
|
||||||
|
label: 'Customers',
|
||||||
|
icon: 'pi pi-fw pi-table',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'New',
|
||||||
|
icon: 'pi pi-fw pi-user-plus',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Customer',
|
||||||
|
icon: 'pi pi-fw pi-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Duplicate',
|
||||||
|
icon: 'pi pi-fw pi-copy'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-user-edit'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Orders',
|
||||||
|
icon: 'pi pi-fw pi-shopping-cart',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'View',
|
||||||
|
icon: 'pi pi-fw pi-list'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Search',
|
||||||
|
icon: 'pi pi-fw pi-search'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Shipments',
|
||||||
|
icon: 'pi pi-fw pi-envelope',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Tracker',
|
||||||
|
icon: 'pi pi-fw pi-compass'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Map',
|
||||||
|
icon: 'pi pi-fw pi-map-marker'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Manage',
|
||||||
|
icon: 'pi pi-fw pi-pencil'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Profile',
|
||||||
|
icon: 'pi pi-fw pi-user',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Settings',
|
||||||
|
icon: 'pi pi-fw pi-cog'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Billing',
|
||||||
|
icon: 'pi pi-fw pi-file'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user