È la prima volta che utilizzo Angular Material e sto solo chiedendo se voi ragazzi potete aiutarmi ad aggiungere una barra di navigazione orizzontale per il mio progetto usando Angular Material? Ho qualche problema a cercarne uno. Grazie in anticipo! Rimanere impressionante :)Come creare una barra di navigazione orizzontale per materiale angolare
risposta
Guardate questo esempio:
<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>
alcuni dei suoi corsi sono solo per colorare il contenuto, non prestare attenzione a molto a loro :)
wow, questo è bello. ma questo non è reattivo però. Puoi insegnarmi? : D –
Controlla il riferimento API per le opzioni di layout, Puoi aggiungere layout-sm e ... per renderlo reattivo –
Come da the official documentation, la creazione della barra di navigazione orizzontale è facile come usare uno md-toolbar
.
<md-toolbar layout="row" class="md-whiteframe-z3" style="padding:0px;margin:0px;position:fixed;">
<h2>Sample navbar</h2>
</md-toolbar>`
È possibile aggiungere il numero di elementi che si desidera all'interno della barra di navigazione e l'allineamento di ogni oggetti possono essere fissati mediante <span flex></span>
.
Nello span flex possiamo anche specificare valori per allineamenti specifici.
Questo è come u creare una barra di navigazione in materiale angolare: (ho usato angolare-materiali-icons anche qui :)
<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>
- 1. Come creare una barra di navigazione reattiva usando il materiale angolare 2?
- 2. Creazione di una barra di navigazione con materiale-ui
- 3. come posso creare una griglia di carte con materiale angolare?
- 4. barra di ridimensionamento per sidenav in materiale angolare.
- 5. Come posso creare uno sfondo sfumato orizzontale per la mia barra di navigazione iOS?
- 6. Come creare una barra di navigazione personalizzata come l'app BestBuy?
- 7. Creare un progetto di avviamento per materiale angolare
- 8. Android: come creare una barra di avanzamento orizzontale usando Interpolator?
- 9. Aggiungi barra di navigazione dinamica in una riga con barra di scorrimento orizzontale
- 10. Centratura verticale di una barra di navigazione
- 11. Come trasformare la barra di navigazione e il controller di navigazione in modalità orizzontale
- 12. come visualizzare una barra di scorrimento orizzontale
- 13. sistema di griglia per materiale angolare
- 14. Aggiungi icona per inserire materiale angolare
- 15. Nascondi barra di scorrimento orizzontale (griglia ad angolo angolare)
- 16. Transizione diapositiva materiale angolare nel nav laterale?
- 17. come creare il pulsante Indietro nella barra di navigazione
- 18. problema di modalità orizzontale con una barra di spostamento
- 19. Passaggio di una direttiva al materiale angolare Servizio mdPanel
- 20. Creare una navigazione numerica
- 21. flex condizionale in materiale angolare
- 22. Layout materiale angolare-align = "centro" non funziona
- 23. Cercando di avere una griglia di carta con materiale angolare
- 24. Materiale angolare: come rendere scorrevole il contenuto
- 25. Allinea verticalmente e orizzontalmente con materiale angolare
- 26. Come utilizzare il tema del materiale angolare?
- 27. Barra degli strumenti angolare Materiale fisso e piè di pagina appiccicoso
- 28. Una tela con una barra di scorrimento orizzontale in js_of_ocaml
- 29. Direttiva di impaginazione in materiale angolare
- 30. Posso usare materiale angolare con cordova?
hanno aggiunto strumento barra di navigazione nella nuova release v1.1.0-RC.5 qui https://material.angularjs.org/latest/demo/navBar –