syncfusion-angular-sidebar

用途

Syncfusion Angular Sidebar 是一个可展开、可折叠的导航组件，作为侧边容器与主内容并排显示，用于承载主导航或辅助内容。它适用于实现可折叠导航菜单、随屏幕尺寸自适应的响应式导航、带图标停靠状态的展开面板、触摸设备上的手势开合侧边栏，以及多级导航（结合 TreeView 或 ListView）。

主要能力

展开类型：Push（推开主内容）、Slide（滑动并平移主内容）、Over（浮于主内容之上）、Auto（移动端为 Over，桌面端为 Push）。
定位：Left、Right、Top、Bottom；支持固定定位。
停靠：通过 enableDock 与 dockSize 实现仅显示图标的紧凑状态，悬停或点击时展开。
交互控制：show()、hide()、toggle() 方法；closeOnDocumentClick 处理外部点击关闭；showBackdrop 显示遮罩；enableGestures 支持触摸滑动手势；提供打开与关闭事件。
响应式：mediaQuery 在匹配时自动打开侧边栏。
内容集成：ListView、TreeView、自定义 HTML 与菜单项；通过 target 指定受影响元素。
动画与样式：animate 控制动画；支持 Material3 等主题、RTL（enableRtl）、CRG（Custom Resource Generator）。
高级特性：enablePersistence 持久化状态、无障碍、路由隐藏侧边栏、性能优化等。

使用方式

安装 Syncfusion 包并导入 SidebarModule 与 CSS 样式，即可在组件模板中使用 <ejs-sidebar>。可通过 Angular CLI 初始化项目（推荐），也支持 SystemJS 方式。

快速开始示例：

import { SidebarModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [SidebarModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-sidebar #sidebar id="default-sidebar">
              <div class="title">Sidebar Content</div>
            </ejs-sidebar>
            <div>
              <div class="title">Main Content</div>
              <button (click)="toggleSidebar()">Toggle Sidebar</button>
            </div>`,
  styles: [`
    .title { padding: 20px; font-weight: bold; }
  `]
})
export class AppComponent {
  @ViewChild('sidebar') sidebar?: SidebarComponent;

  toggleSidebar() {
    this.sidebar?.toggle();
  }
}

target 属性行为

隐式定位（推荐，默认）：不指定 target，侧边栏自动作用于下一个同级 <div>，无需包裹元素。
显式定位（高级）：使用 [target]="'#selector'" 指定受影响元素；使用 Push/Slide 等变换类型时，目标容器内必须包含内层包裹 <div>，否则 CSS 变换无法正确工作。

适用场景

需要可折叠导航菜单或侧边栏的应用。
需要随屏幕尺寸自适应的响应式导航。
需要图标停靠紧凑状态的展开面板。
需要在触摸设备上通过手势开合侧边栏。
需要多级导航（TreeView/ListView）。
需要遮罩聚焦侧边栏内容、自动关闭行为或 RTL 支持。

限制

当侧边栏类型为 'Auto' 时，isOpen 属性在移动设备上会被忽略。
zIndex 仅在类型为 'Over' 或移动端 'Auto' 时适用。
使用显式 target 配合 Push/Slide 变换类型时，必须添加内层包裹 <div>。
资料未提供收费、价格、平台支持范围等具体信息，暂未提供。

技能介绍

用途

主要能力

使用方式

target 属性行为

适用场景

限制