Skip to content

Commit

Permalink
update overlaypanel basicdoc
Browse files Browse the repository at this point in the history
  • Loading branch information
@mehmetcetin01140
mehmetcetin01140 committed May 2, 2024
1 parent 161e2cc commit 358eeca
Showing 1 changed file with 95 additions and 16 deletions.
111 changes: 95 additions & 16 deletions src/app/showcase/doc/overlaypanel/basicdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ import { Code } from '@domain/code';
</div>
<div>
<span class="font-medium text-900 block mb-2">Invite Member</span>
<p-inputGroup>
<p-chips disabled></p-chips>
<p-button label="Invite" icon="pi pi-users"></p-button>
</p-inputGroup>
<div class="flex">
<p-chips disabled />
<p-button label="Invite" icon="pi pi-users" />
</div>
</div>
<div>
<span class="font-medium text-900 block mb-2">Team Members</span>
Expand Down Expand Up @@ -57,26 +57,105 @@ export class BasicDoc {
];

code: Code = {
basic: `<p-overlayPanel #op>
<img src="https://primefaces.org/cdn/primeng/images/demo/product/bamboo-watch.jpg" alt="product" />
</p-overlayPanel>
<p-button (click)="op.toggle($event)" icon="pi pi-share-alt" label="Share" />`,
basic: `<p-button (click)="op.toggle($event)" icon="pi pi-share-alt" label="Share" />
<p-overlayPanel #op>
<div class="flex flex-column gap-3 w-25rem">
<div>
<span class="font-medium text-900 block mb-2">Share this document</span>
<p-inputGroup>
<input pInputText value="https://primeng.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem" />
<p-inputGroupAddon>
<i class="pi pi-copy"></i>
</p-inputGroupAddon>
</p-inputGroup>
</div>
<div>
<span class="font-medium text-900 block mb-2">Invite Member</span>
<div class="flex">
<p-chips disabled />
<p-button label="Invite" icon="pi pi-users" />
</div>
</div>
<div>
<span class="font-medium text-900 block mb-2">Team Members</span>
<ul class="list-none p-0 m-0 flex flex-column gap-3">
<li *ngFor="let member of members" class="flex align-items-center gap-2">
<img [src]="'https://primefaces.org/cdn/primevue/images/avatar/' + member.image" style="width: 32px" />
<div>
<span class="font-medium">{{ member.name }}</span>
<div class="text-sm text-color-secondary">{{ member.email }}</div>
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>{{ member.role }}</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
</ul>
</div>
</div>
</p-overlayPanel>`,

html: `
<div class="card flex justify-content-center">
html: `<div class="card flex justify-content-center">
<p-button (click)="op.toggle($event)" icon="pi pi-share-alt" label="Share" />
<p-overlayPanel #op>
<img src="https://primefaces.org/cdn/primeng/images/demo/product/bamboo-watch.jpg" alt="product" />
<div class="flex flex-column gap-3 w-25rem">
<div>
<span class="font-medium text-900 block mb-2">Share this document</span>
<p-inputGroup>
<input pInputText value="https://primeng.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem" />
<p-inputGroupAddon>
<i class="pi pi-copy"></i>
</p-inputGroupAddon>
</p-inputGroup>
</div>
<div>
<span class="font-medium text-900 block mb-2">Invite Member</span>
<div class="flex">
<p-chips disabled />
<p-button label="Invite" icon="pi pi-users" />
</div>
</div>
<div>
<span class="font-medium text-900 block mb-2">Team Members</span>
<ul class="list-none p-0 m-0 flex flex-column gap-3">
<li *ngFor="let member of members" class="flex align-items-center gap-2">
<img [src]="'https://primefaces.org/cdn/primevue/images/avatar/' + member.image" style="width: 32px" />
<div>
<span class="font-medium">{{ member.name }}</span>
<div class="text-sm text-color-secondary">{{ member.email }}</div>
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>{{ member.role }}</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
</ul>
</div>
</div>
</p-overlayPanel>
<p-button (click)="op.toggle($event)" icon="pi pi-share-alt" label="Share" />
</div>`,

typescript: `
import { Component } from '@angular/core';
typescript: `import { Component } from '@angular/core';
import { OverlayPanelModule } from 'primeng/overlaypanel';
import { InputGroupModule } from 'primeng/inputgroup';
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { ChipsModule } from 'primeng/chips';
import { CommonModule } from '@angular/common';
@Component({
selector: 'overlay-panel-basic-demo',
templateUrl: './overlay-panel-basic-demo.html'
templateUrl: './overlay-panel-basic-demo.html',
standalone: true,
imports: [OverlayPanelModule, InputGroupModule, InputGroupAddonModule, ButtonModule, InputTextModule, ChipsModule, CommonModule]
})
export class OverlayPanelBasicDemo {}`
export class OverlayPanelBasicDemo {
members = [
{ name: 'Amy Elsner', image: 'amyelsner.png', email: '[email protected]', role: 'Owner' },
{ name: 'Bernardo Dominic', image: 'bernardodominic.png', email: '[email protected]', role: 'Editor' },
{ name: 'Ioni Bowcher', image: 'ionibowcher.png', email: '[email protected]', role: 'Viewer' }
];
}`
};
}

0 comments on commit 358eeca

Please sign in to comment.