carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add menudoc

Browse Source
This commit is contained in:
Çetin
2025-01-03 00:12:51 +03:00
parent 1ee16703f8
commit 53d00960fd
1 changed files with 80 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/views/uikit/menudoc.ts
View File

@@ -10,15 +10,15 @@ 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>
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">
@@ -28,60 +28,82 @@ import { InputTextModule } from 'primeng/inputtext';
</ng-template>
</p-menubar>
</div>
</div>
<div class="col-12">
<div class="card card-w-title">
<h5>Breadcrumb</h5>
<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 md:col-4">
<div class="card card-w-title">
<h5>TieredMenu</h5>
<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="col-12 md:col-4">
<div class="card card-w-title">
<h5>Plain Menu</h5>
<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="col-12 md:col-4">
<div class="card card-w-title">
<h5>Overlay Menu</h5>
<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 card-w-title" #anchor>
<h5>ContextMenu</h5>
<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 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 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="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>