web-dev-qa-db-fra.com

Comment faire une barre de navigation horizontale pour un matériau angular

C'est ma première utilisation de Angular Material et je demande simplement si vous pouvez m'aider à ajouter une barre de navigation horizontale pour mon projet en utilisant Angular Material? J'ai du mal à en chercher un. Merci d'avance! Restez génial :)

angularjsnavbarangular-material
14
user4037785

Regardez cet exemple:

<div layout="row" layout-padding class="bg-dark-blue nav-dark" layout-align="space-between center">
<div>
    <md-button>Home</md-button>
    <md-button>Item 1</md-button>
    <md-button>Item 2</md-button>
    <md-menu>
        <md-button md-menu-Origin ng-click="$mdOpenMenu()">Help</md-button>
        <md-menu-content width="2">
            <md-menu-item>
                <md-button>Help</md-button>
            </md-menu-item>
            <md-menu-item>
                <md-button>About</md-button>
            </md-menu-item>
        </md-menu-content>
    </md-menu>
</div>
<div class="nav-buttons">
    <md-button class="md-raised md-accent">My profile</md-button>
    <md-button class="md-raised md-warn">Log Out</md-button>
</div>

Certaines de ses classes sont juste pour coloriser le contenu, ne faites pas trop attention à elles :)

19
soroush gholamzadeh

Selon la documentation officielle , la création de la barre de navigation horizontale est aussi simple que d'utiliser un md-toolbar.

    <md-toolbar layout="row" class="md-whiteframe-z3" style="padding:0px;margin:0px;position:fixed;">
<h2>Sample navbar</h2>
</md-toolbar>`

Vous pouvez ajouter autant d'éléments que vous le souhaitez dans la barre de navigation et l'alignement de chaque élément peut être corrigé à l'aide de <span flex></span>.

Dans le flex d'envergure, nous pouvons également lui spécifier des valeurs pour des alignements spécifiques.

6
Varun N R

C'est ainsi que vous créez une barre de navigation dans angular material: (J'ai également utilisé des icônes de matériau angulaire ici :)

<md-content class="md-padding" style="background:#086A87">
    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
      <md-nav-item md-nav-click="goto('page1')" name="page1">
              <ng-md-icon icon="phone" style="fill:wheat" size="20"></ng-md-icon>Personal Information
      </md-nav-item>
      <md-nav-item md-nav-click="goto('page2')" name="page2">
              <ng-md-icon icon="mode_edit" style="fill: wheat" size="20"></ng-md-icon>Edit
      </md-nav-item>
      <md-nav-item md-nav-click="goto('page3')" name="page3">
              <ng-md-icon icon="print" style="fill: wheat" size="20"></ng-md-icon>Print Detail1
      </md-nav-item>
      <md-nav-item md-nav-click="goto('page4')" name="page4">
                <ng-md-icon icon="print" style="fill: wheat" size="20"></ng-md-icon>Print Detail2      
      </md-nav-item>
    </md-nav-bar>
</md-content>
3
Plankton