avatar in header of ionic-menu ioic

Question

avatar in header of ionic-menu ioic

Navigation

#1 by (0 votes)

0

I'm trying to place an avatar in the header of a menu in IONIC 3, but I do not get the result I want.

What I have tried to do is the following:

<ion-menu id="menuNave" [content]="miNav" padding> 
    <ion-header>
        <ion-toolbar color="dark">
            <ion-title>Menu Versus 23</ion-title>
            <ion-list>
                    <ion-item>
                        <ion-avatar item-start>
                        <img [src]="jugadorVariables2.imgperfil">
                        </ion-avatar>
                        <p>{{ jugadorVariables2.nombre }}</p>
                    </ion-item>
            </ion-list>
        </ion-toolbar>
    </ion-header>

ionic-framework ionic3

asked by Juan Hernandez 09.04.2018 в 21:32

source

1 answer

Problems with wordpress categories Clean file name php file

score 0 · Answer 1

To properly display an ion-avatar, it must be inside an item. However, in your case I suggest doing it through a CSS class, something like this:

.avatar {
    width:32px;
    height:32px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    object-fit: cover;
  }

Then the html inside the header:

  <div no-padding no-margin style='float:left'>
      <img class='avatar' src="..."  
  </div>