Add menudoc
This commit is contained in:
Çetin
@@ -10,80 +10,102 @@ import { PanelMenuModule } from 'primeng/panelmenu';
|
||||
import { TabsModule } from 'primeng/tabs';
|
||||
import { MenubarModule } from 'primeng/menubar';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { StepperModule } from 'primeng/stepper';
|
||||
|
||||
|
||||
@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>
|
||||
imports: [CommonModule, BreadcrumbModule, TieredMenuModule, MenuModule, ButtonModule, ContextMenuModule, MegaMenuModule, PanelMenuModule, TabsModule, MenubarModule, InputTextModule, TabsModule, StepperModule, TabsModule],
|
||||
template: `
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Menubar</div>
|
||||
<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>
|
||||
</ng-template>
|
||||
</p-menubar>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Breadcrumb</div>
|
||||
<p-breadcrumb [model]="breadcrumbItems" [home]="breadcrumbHome"></p-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-8">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Steps</div>
|
||||
<p-stepper [value]="1">
|
||||
<p-step-list>
|
||||
<p-step [value]="1">Header I</p-step>
|
||||
<p-step [value]="2">Header II</p-step>
|
||||
<p-step [value]="3">Header III</p-step>
|
||||
</p-step-list>
|
||||
</p-stepper>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">TabMenu</div>
|
||||
<p-tabs [value]="0">
|
||||
<p-tablist>
|
||||
<p-tab [value]="0">Header I</p-tab>
|
||||
<p-tab [value]="1">Header II</p-tab>
|
||||
<p-tab [value]="2">Header III</p-tab>
|
||||
</p-tablist>
|
||||
</p-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card card-w-title">
|
||||
<h5>Breadcrumb</h5>
|
||||
<p-breadcrumb [model]="breadcrumbItems" [home]="breadcrumbHome"></p-breadcrumb>
|
||||
<div class="flex flex-col md:flex-row gap-8 mt-6">
|
||||
<div class="md:w-1/3">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Tiered Menu</div>
|
||||
<p-tieredMenu [model]="tieredMenuItems"></p-tieredMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Plain Menu</div>
|
||||
<p-menu [model]="menuItems"></p-menu>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Overlay Menu</div>
|
||||
<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" #anchor>
|
||||
<div class="font-semibold text-xl mb-4">Context Menu</div>
|
||||
Right click to display.
|
||||
<p-contextMenu [target]="anchor" [model]="contextMenuItems"></p-contextMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-8 mt-8">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div>
|
||||
<p-megaMenu [model]="megaMenuItems" />
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card card-w-title">
|
||||
<h5>TieredMenu</h5>
|
||||
<p-tieredMenu [model]="tieredMenuItems"></p-tieredMenu>
|
||||
<div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div>
|
||||
<p-megaMenu [model]="megaMenuItems" orientation="vertical" />
|
||||
</div>
|
||||
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">PanelMenu</div>
|
||||
<p-panelMenu [model]="panelMenuItems" />
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
`,
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user