Angular Basics : la barre de navigation angulaire

Une NavBar est un élément HTML pour vos éléments de navigation principaux et secondaires. Ce qui fait une véritable barre de navigation, c’est la thématisation – et des dizaines de frameworks UX rendent cela facile. Voyons-en quelques-uns !

Je déteste CSS. Je me souviens quand le Cadre d’interface utilisateur jQuery était d’abord devenu populaire. Je me suis toujours demandé pourquoi plus de gens ne l’utilisaient pas. C’était l’un des premiers frameworks d’interface utilisateur, et cela simplifiait les choses.

Je ne veux pas penser à modéliser les mêmes composants CSS encore et encore dans mes applications. Je veux me concentrer sur mon application UX, la fonctionnalité et la logique. La première chose à laquelle chaque développeur d’application doit penser est la barre d’outils de navigation, également appelée Toolbar,
NavBar, AppBar et TopNav. Je ne veux pas l’écrire mille fois. Je veux que ce soit facile, et je veux que ça colle.

CSS de base

En CSS/SCSS de base, nous pouvons créer une barre de navigation « collante » qui émule le matériau angulaire comme suit :

app.component.html

<div class="nav">
  Navbar
</div>

app.component.scss

.nav {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #3f51b5;
  color: #fff;
  display: flex;
  padding: 0 16px;
  align-items: center;
  height: 56px;
  font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
}

J’ai copié la police et le schéma de couleurs du thème matériel rose indigo. La pièce la plus importante à cet égard est la position: sticky; . Cela indique à la barre de navigation de disparaître lentement lorsque vous faites défiler. Vous verrez également le position: fixed; attribut pour le rendre immeuble en général. Parfois, la navigation se fera dans un <div>, <nav> ou <header> Balise HTML.

Si vous n’avez pas besoin d’autres composants comme un calendrier, un bouton modal ou thématique, je recommande fortement le CSS de base. Mais nous sommes ici pour parler d’Angular.

Amorcer

Il existe trois façons d’utiliser Amorcer à l’intérieur de votre composant angulaire.

1. Installez-le manuellement à partir de https://getbootstrap.com/
2. Installer ng-bootstrap de https://ng-bootstrap.github.io/
3. Installer ngx-bootstrap de https://valor-software.com/ngx-bootstrap/

Bootstrap utilise des classes de base pour styliser la barre de navigation. Il n’y a pas de Barre d’outils ou Barre de navigation composant. Vous feriez quelque chose comme ceci :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

C’est super, mais encore une fois, ce n’est pas le Angulaire façon.

nébulaire

Nebular est l’un des plus beaux frameworks d’interface utilisateur pour Angular. Ils n’ont pas de composant de navigation supérieur, mais pour une raison. Ils regardent la mise en page entière comme des composants. Le composant NavBar équivalent serait le nb-layout-header composant.

<nb-layout>
 <nb-layout-header>My Navbar</nb-layout-header>
...
 <nb-layout-footer></nb-layout-footer>
 <nb-layout-column></nb-layout-column>
 <nb-sidebar></nb-sidebar>
</nb-layout>

Premier NG

Je ne crois pas que Prime NG soit fait pour les sites Web. Il ne prend pas en charge Angular Universal. Je pense que tout le monde devrait le savoir pour ne pas s’en rendre compte trop tard après avoir fait le travail.

Cela étant dit, Prime NG peut produire des composants d’entreprise tels que des graphiques, des organigrammes, des captchas et même des terminaux prêts à l’emploi. Il a littéralement tout sauf un composant NavBar. Cependant, vous pouvez facilement utiliser le Menubar ou la Toolbar composants à sa place. Après tout, vous construisez probablement une application, pas un site Web.

Conception matérielle

La Matériau angulaire Toolbar est de loin le plus populaire. Conception matérielle 3 est également en version bêta, donc Angular sera le premier framework à l’obtenir.

Pour l’utiliser, installez Matériau angulaireet utilisez le code simple suivant :

<mat-toolbar>
    <span>My Application</span>
</mat-toolbar>

C’est ça! Vous pouvez ajouter des menus ou tout autre composant Material Design simplement en important le module et en personnalisant le code HTML de base.

Interface utilisateur de Kendo pour Angular

La Interface utilisateur de Kendo pour Angular AppBar composant fonctionne exactement comme le composant Angular Material. Cependant, il existe des centaines de thèmes intégrés (clairs et sombres), des éléments de conception réactifs, des éléments faciles à positionner et la mondialisation.

Vous pouvez assez facilement créer votre propre thème, un thème Bootstrap ou un thème Material sans apprendre ces mélanges de thèmes matériels embêtants. De plus, Kendo UI for Angular vous permet de concevoir facilement la disposition de l’AppBar, en configurant les sections de contenu comme vous le souhaitez.

La valeur de Kendo UI pour Angular AppBar brille vraiment lorsque vous considérez qu’elle fait partie de l’ensemble de la bibliothèque Kendo UI pour Angular. Cet ensemble de composants est conçu pour que vous disposiez d’une source unique de composants conçus de manière cohérente et accessibles. Il n’est pas nécessaire d’apprendre plusieurs API – cette bibliothèque devrait avoir tout ce dont vous avez besoin. Dans le cas où vous auriez besoin d’utiliser des composants de Angular Material, les composants de Kendo UI pour Angular fonctionneront parfaitement côte à côte avec eux.

La manière facile

Je suis un grand fan de la méthode facile. Une NavBar est vraiment juste un élément HTML où vous placez vos éléments de navigation principaux et secondaires. Vous pouvez également le positionner pour qu’il soit inamovible. Ce qui fait une véritable barre de navigation, c’est la thématisation.

Il existe des dizaines de frameworks UX qui facilitent cela, et ils ont tous leurs différentes façons d’afficher les éléments de navigation. Ne réinventons pas la roue, et construisons quelque chose de beau.