Personnalisation du header

Introduction

L'application Flight One dispose d'un <app-header> qui contient un nom, l'heure et la date, ainsi qu'un bouton de login, et d'un bouton pour ouvrir ou fermer le menu. Voici à quoi ressemble le header de l'application Flight One :

<app-header slot="header" fixed effects="waterfall">
    <app-toolbar id="headerMain">
    <!-- Header de l'application -->
        <paper-icon-button id="toggle" icon="menu" on-click="openMenu"></paper-icon-button>
        <div main-title>Flight One</div>
        <!-- Si l'utilisateur est connecté on affiche le nom de l'utilisateur ainsi que son profil -->
        <div hidden$="[[!user.logged]]">
            <div style="display: flex; flex-direction: row; align-items: center; padding: 0 10px 0 10px">
                <iron-icon icon="icons:account-circle"></iron-icon>
                <div style="display: flex; flex-direction: column; align-items: center;">
                    <div>[[user.id]]</div>
                    <div>[[user.profil]]</div>
                </div>
            </div>
        </div>

        <!-- Si l'utilisateur est connecté on affiche le bouton de déconnexion -->
        <div hidden$="[[!user.logged]]">
            <paper-button id="boutonLogout" on-tap="boutonLogout">Logout</paper-button>
        </div>
        <!-- Si l'utilisateur est déconnecté on affiche le bouton de connexion -->
        <div hidden$="[[user.logged]]">
            <paper-button on-tap="boutonLogin">Login</paper-button>
        </div>
        <div>[[sysDate]] [[sysTime]]</div>
    </app-toolbar>
</app-header>

Modification du nom

Pour modifier le nom du header, il faut modifier cette ligne :

<div main-title>Flight One</div>

Le nom affiché sur le header sera Flight One, si on veut le modifier par Documentation Test il suffit de remplacer Flight One par Documentation Test, comme ceci :

<div main-title>Documentation Test</div>

Modification de l'icône du bouton

Le bouton qui sert à ouvrir et fermer le menu, et afficher sous forme d'icône. On peut modifier l'icône par des icônes déjà crées.

La modification de l'icône se fait ici :

<paper-icon-button id="toggle" icon="menu" on-click="openMenu"></paper-icon-button>

L'icône affecter à notre bouton est donc l'icône menu, on peut la modifier par n'importe quel icône présent dans la liste des icônes.

<paper-icon-button id="toggle" icon="attachment" on-click="openMenu"></paper-icon-button>

Modification de l'icône du profil

Lorsque l'on est connecté une icône s'affiche suivi du nom d'utilisateur et du profil associé à l'utilisateur. On peut modifier l'icône par des icônes déjà crée.

La modification de l'icône se fait ici :

<iron-icon icon="icons:account-circle"></iron-icon>

L'icône affecter est donc l'icône account-circle, on peut la modifier par n'importe quel icône présent dans la liste des icônes.

<iron-icon icon="attachment"></iron-icon>

Ajout ou suppression de la date et l'heure

La date et l'heure est par défaut dans le header de l'application Flight One on peut l'enlever en supprimant cette ligne, ou l'ajouter sur une autre application en ajoutant la même ligne :

<div>[[sysDate]] [[sysTime]]</div>