Guide étape par étape d'une barre latérale angulaire extensible et pliable avec des icônes

Créer une barre latérale angulaire extensible et pliable avec des icônes

La création d'une barre latérale extensible et pliable dans Angular peut améliorer considérablement l'expérience utilisateur de votre application. Ce didacticiel fournit un guide étape par étape pour créer une telle barre latérale, avec des icônes et des transitions fluides. Nous couvrirons tout, de la configuration de la structure des composants à l'application de styles et de logique pour basculer la barre latérale.

---

Pourquoi utiliser une barre latérale pliable ?

Une barre latérale pliable améliore la convivialité d'une application en :

• Économie d'espace sur l'écran.
• Fournir une navigation facile.
• Garder l'interface propre et organisée.

Guide étape par étape pour créer la barre latérale

1. Configurez votre projet angulaire

Tout d’abord, assurez-vous que Angular CLI est installé. Sinon, exécutez :

npm install -g @angular/cli

Créer un nouveau projet Angular :

ng new angular-sidebar
cd angular-sidebar

Générer les composants nécessaires :

ng generate component sidebar

---

2. Définir la structure de la barre latérale

app.component.html

Ceci servira de conteneur principal pour l'application. Ajoutez la barre latérale et un bouton pour basculer son état :

<div>



<h4>
  
  
  <strong>app.component.ts</strong>
</h4>

<p>Add the logic to manage the sidebar's state:<br>
</p>

<pre class="brush:php;toolbar:false">import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  isSidebarCollapsed = false;

  onSidebarToggle() {
    this.isSidebarCollapsed = !this.isSidebarCollapsed;
  }
}

---

3. Implémenter le composant de la barre latérale

sidebar.component.html

Définissez la structure HTML de la barre latérale, y compris un menu avec des éléments imbriqués :

<div>



<h4>
  
  
  <strong>sidebar.component.ts</strong>
</h4>

<p>Handle the toggle logic for menu items and sidebar:<br>
</p>

<pre class="brush:php;toolbar:false">import { Component, EventEmitter, Input, Output } from '@angular/core';

interface MenuItem {
  icon: string;
  label: string;
  children?: MenuItem[];
  isOpen?: boolean;
}

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss'],
})
export class SidebarComponent {
  @Input() isSidebarCollapsed = false;
  @Output() sidebarToggle = new EventEmitter<void>();

  menuItems: MenuItem[] = [
    {
      icon: 'fas fa-home',
      label: 'Dashboard',
      isOpen: false,
      children: [
        { icon: 'fas fa-chart-pie', label: 'Analytics' },
        { icon: 'fas fa-tasks', label: 'Projects' },
      ]
    },
    {
      icon: 'fas fa-cog',
      label: 'Settings',
      isOpen: false,
      children: [
        { icon: 'fas fa-user', label: 'Profile' },
        { icon: 'fas fa-lock', label: 'Security' },
      ]
    },
    {
      icon: 'fas fa-envelope',
      label: 'Messages'
    }
  ];

  toggleSidebar() {
    this.sidebarToggle.emit();
  }

  toggleMenuItem(item: MenuItem) {
    // Only toggle if sidebar is not collapsed and item has children
    if (!this.isSidebarCollapsed && item.children) {
      item.isOpen = !item.isOpen;
    }
  }
}

---

4. Stylisez la barre latérale

app.component.scss

Ajoutez des styles globaux pour la mise en page et les transitions :

.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.content {
  flex-grow: 1;
  margin-left: 250px;
  transition: all 0.3s ease-in-out;
  background-color: #f4f6f7;
  overflow-y: auto;

  &-inner {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  &-expanded {
    margin-left: 50px;
  }
}

.sidebar-toggle-btn {
  position: absolute;
  top: 1rem;
  left: 200px; // Default position when sidebar is expanded
  background-color: #2c3e50;
  border: none;
  color: #fff;
  padding: 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  cursor: pointer;
  z-index: 1001;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
    background-color: #34495e;
  }

  &.sidebar-collapsed {
    left: 15px; // Position when sidebar is collapsed
  }
}

sidebar.component.scss

Définissez les styles pour la barre latérale et le menu :

.sidebar {
  background-color: #2c3e50;
  color: #ecf0f1;
  height: 100vh;
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: all 0.3s ease-in-out;
  overflow-x: hidden;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.sidebar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  position: relative;
}

.sidebar-logo {
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.sidebar-menu {
  padding: 1rem 0;

  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
}

.sidebar-menu-item {
  position: relative;
}

.sidebar-item {
  display: flex;
  align-items: center;
  color: #ecf0f1;
  text-decoration: none;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
  cursor: pointer;

  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  &.menu-item-active {
    background-color: rgba(255, 255, 255, 0.2);
  }

  i {
    margin-right: 0.75rem;

    &.sidebar-item-arrow {
      margin-left: auto;
      font-size: 0.8rem;
      transition: transform 0.3s ease;

      &.rotated {
        transform: rotate(180deg);
      }
    }
  }

  &-text {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }

  &.has-children {
    position: relative;
  }
}

.sidebar-submenu {
  background-color: rgba(0, 0, 0, 0.1);

  .sidebar-item {
    padding-left: 3rem;
    font-size: 0.9rem;
  }
}

.sidebar-collapsed {
  width: 50px;

  .sidebar-menu-item {
    position: static;
  }

  .sidebar-item {
    i {
      margin-right: 0;
    }
    &-text,
    &-arrow {
      opacity: 0;
      width: 0;
      overflow: hidden;
    }
  }

  .sidebar-submenu {
    display: none;
  }
}

---

5. Exécutez l'application

Démarrez le serveur de développement :

ng serve

Accédez à http://localhost:4200/ pour voir votre barre latérale en action.

---

FAQ

Comment personnaliser les icônes de la barre latérale ?

Modifiez le tableau menuItems dans sidebar.component.ts et fournissez les classes d'icônes appropriées.

Puis-je ajouter des animations pour l’extension du menu ?

Oui, utilisez le module d'animation d'Angular pour ajouter des transitions fluides lorsque les menus s'ouvrent et se ferment.

Comment puis-je ajuster la largeur de la barre latérale ?

Mettez à jour la propriété width dans sidebar.component.scss pour les états développé et réduit.

---

Ce guide couvre toutes les étapes essentielles pour créer une barre latérale fonctionnelle extensible et pliable dans Angular. Vous pouvez personnaliser davantage la conception et les fonctionnalités pour répondre aux besoins de votre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!