Schritt-für-Schritt-Anleitung für eine eckige erweiterbare und zusammenklappbare Seitenleiste mit Symbolen

Erstellen Sie eine eckige erweiterbare und reduzierbare Seitenleiste mit Symbolen

Das Erstellen einer erweiterbaren und reduzierbaren Seitenleiste in Angular kann das Benutzererlebnis Ihrer Anwendung erheblich verbessern. Dieses Tutorial bietet eine Schritt-für-Schritt-Anleitung zum Erstellen einer solchen Seitenleiste, komplett mit Symbolen und fließenden Übergängen. Wir behandeln alles von der Einrichtung der Komponentenstruktur bis hin zur Anwendung von Stilen und Logik zum Umschalten der Seitenleiste.

---

Warum eine zusammenklappbare Seitenleiste verwenden?

Eine zusammenklappbare Seitenleiste verbessert die Benutzerfreundlichkeit einer Anwendung durch:

• Platzersparnis auf dem Bildschirm.
• Bereitstellung einer einfachen Navigation.
• Halten Sie die Benutzeroberfläche sauber und organisiert.

Schritt-für-Schritt-Anleitung zum Erstellen der Seitenleiste

1. Richten Sie Ihr Angular-Projekt ein

Stellen Sie zunächst sicher, dass Angular CLI installiert ist. Wenn nicht, führen Sie Folgendes aus:

npm install -g @angular/cli

Erstellen Sie ein neues Angular-Projekt:

ng new angular-sidebar
cd angular-sidebar

Generieren Sie die erforderlichen Komponenten:

ng generate component sidebar

---

2. Definieren Sie die Seitenleistenstruktur

app.component.html

Dies dient als Hauptcontainer für die Anwendung. Fügen Sie die Seitenleiste und eine Schaltfläche zum Umschalten des Status hinzu:

<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. Implementieren Sie die Sidebar-Komponente

sidebar.component.html

Definieren Sie die HTML-Struktur der Seitenleiste, einschließlich eines Menüs mit verschachtelten Elementen:

<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. Stil der Seitenleiste

app.component.scss

Globale Stile für Layout und Übergänge hinzufügen:

.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

Stile für die Seitenleiste und das Menü definieren:

.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. Führen Sie die Anwendung aus

Starten Sie den Entwicklungsserver:

ng serve

Navigieren Sie zu http://localhost:4200/, um Ihre Seitenleiste in Aktion zu sehen.

---

FAQs

Wie kann ich Seitenleistensymbole anpassen?

Ändern Sie das menuItems-Array in sidebar.component.ts und stellen Sie entsprechende Symbolklassen bereit.

Kann ich Animationen zur Menüerweiterung hinzufügen?

Ja, verwenden Sie das Animationsmodul von Angular, um beim Öffnen und Schließen von Menüs sanfte Übergänge hinzuzufügen.

Wie stelle ich die Breite der Seitenleiste ein?

Aktualisieren Sie die Breiteneigenschaft in sidebar.component.scss für den erweiterten und minimierten Zustand.

---

Diese Anleitung behandelt alle wesentlichen Schritte zum Erstellen einer funktionalen erweiterbaren und reduzierbaren Seitenleiste in Angular. Sie können das Design und die Funktionalität weiter an Ihre Anwendungsanforderungen anpassen.

Das obige ist der detaillierte Inhalt vonSchritt-für-Schritt-Anleitung für eine eckige erweiterbare und zusammenklappbare Seitenleiste mit Symbolen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!