Bina Sidebar Boleh Dikembangkan dan Boleh Dilipat Sudut dengan Ikon

Mencipta bar sisi yang boleh dikembangkan dan boleh dilipat dalam Angular boleh meningkatkan pengalaman pengguna aplikasi anda dengan ketara. Tutorial ini menyediakan panduan langkah demi langkah untuk membina bar sisi sedemikian, lengkap dengan ikon dan peralihan yang lancar. Kami akan merangkumi segala-galanya daripada menyediakan struktur komponen kepada menggunakan gaya dan logik untuk menogol bar sisi.

Mengapa Menggunakan Bar Sisi Boleh Dilipat?

Bar sisi boleh lipat meningkatkan kebolehgunaan aplikasi dengan:

• Menjimatkan ruang skrin.
• Menyediakan navigasi yang mudah.
• Memastikan antara muka bersih dan teratur.

Panduan Langkah demi Langkah untuk Membina Bar Sisi

1. Sediakan Projek Sudut Anda

Pertama, pastikan anda telah memasang Angular CLI. Jika tidak, jalankan:

npm install -g @angular/cli

Buat projek Angular baharu:

ng new angular-sidebar
cd angular-sidebar

Jana komponen yang diperlukan:

ng generate component sidebar

2. Tentukan Struktur Sidebar

app.component.html

Ini akan berfungsi sebagai bekas utama untuk aplikasi. Tambahkan bar sisi dan butang untuk menogol keadaannya:

<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. Laksanakan Komponen Sidebar

sidebar.component.html

Tentukan struktur HTML bar sisi, termasuk menu dengan item bersarang:

<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. Gayakan Bar Sisi

app.component.scss

Tambah gaya global untuk reka letak dan peralihan:

.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

Tentukan gaya untuk bar sisi dan 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. Jalankan Aplikasi

Mulakan pelayan pembangunan:

ng serve

Navigasi ke http://localhost:4200/ untuk melihat bar sisi anda sedang beraksi.

Soalan Lazim

Bagaimana Saya Menyesuaikan Ikon Bar Sisi?

Ubah suai tatasusunan menuItems dalam sidebar.component.ts dan sediakan kelas ikon yang sesuai.

Bolehkah saya Tambah Animasi untuk Peluasan Menu?

Ya, gunakan modul animasi Angular untuk menambah peralihan lancar apabila menu dibuka dan ditutup.

Bagaimana Saya Melaraskan Lebar Bar Sisi?

Kemas kini sifat lebar dalam sidebar.component.scss untuk keadaan dikembangkan dan runtuh.

Panduan ini merangkumi semua langkah penting untuk mencipta bar sisi yang boleh dikembangkan dan boleh dilipat berfungsi dalam Angular. Anda boleh menyesuaikan lagi reka bentuk dan kefungsian untuk memenuhi keperluan aplikasi anda.

Atas ialah kandungan terperinci Panduan Langkah demi Langkah untuk Bar Sisi Boleh Dikembangkan dan Boleh Dilipat Sudut dengan Ikon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!