Menubar -how to create menubar with items and custom-content in HTML without 'model' binding?

UI Components for Angular
Post Reply
aruyc
Posts: 2
Joined: 09 Jun 2021, 14:22

09 Jun 2021, 14:25

How to create menubar with items and custom-content in html without binding model like with help of hierarchy of <ul> and <li> or something like <p-menuitem> or may be else?

PhilHuhn
Posts: 131
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA
Contact:

09 Jun 2021, 17:44

Why? What is the use case?

aruyc
Posts: 2
Joined: 09 Jun 2021, 14:22

10 Jun 2021, 07:51

Menubar: has facility to set custom content in left and right but not in center. any option or way to set custom content in center?

like below:

Code: Select all

<p-menubar [model]="items">
<ng-template pTemplate="start">
<button pButton class="p-mr-2 p-button-success" icon="pi pi-home"></button>
</ng-template>
<ng-template pTemplate="center">
<span>App Title</span>
</ng-template>
<ng-template pTemplate="end">
<div>
<button pButton class="p-mr-2 p-button-success" icon="pi pi-check"></button>
<img src="assets/images/logo.png" width="45" class="p-pl-2">
</div>
</ng-template>
</p-menubar>
Here in code : i want something like - application title in center of menubar. how can i do that?? may be possible like below code:

Code: Select all

<ng-template pTemplate="center"> <span>App Title</span> </ng-template>
or may be we can use

Code: Select all

<ui> <li>
hierarchy for menu items like :

Code: Select all

<p-menubar>
<div class="custom-content-start"></div>
<p-menuitem>
   ///menu hierarchy here 
</p-menuitem>
<div class="custom-content-center"></div>
<div class="custom-content-end"></div>
</p-menubar>
image for reference : https://drive.google.com/file/d/1U_1946 ... sp=sharing

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 10 guests