syncfusion-blazor-sidebar

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor Sidebar Component

Syncfusion Blazor Sidebar组件实现指南

The Syncfusion Blazor Sidebar is a responsive navigation component that reserves screen space for navigation content. It supports multiple positioning modes, docking, state persistence, and integrates seamlessly with other Syncfusion components.

Syncfusion Blazor Sidebar是一款响应式导航组件，可为导航内容预留屏幕空间。它支持多种定位模式、停靠功能、状态持久化，并能与其他Syncfusion组件无缝集成。

When to Use This Skill

适用场景

Use this skill when you need to:

Add a collapsible navigation sidebar to your Blazor application
Control sidebar open/close state programmatically
Enable responsive behavior based on screen resolution
Show icons-only navigation (dock mode)
Persist sidebar state across page navigation
Display multiple sidebars with different positioning
Target specific HTML elements for sidebar context
Integrate ListView or TreeView components in sidebar
Apply custom CSS styling to sidebar appearance
Build responsive layouts in Blazor WebAssembly or .NET 8 apps

当你需要以下功能时，可以使用本技能：

为Blazor应用添加可折叠的导航侧边栏
以编程方式控制侧边栏的开合状态
基于屏幕分辨率实现响应式行为
显示仅含图标的导航（停靠模式）
在页面导航间持久化侧边栏状态
显示多个不同定位的侧边栏
为侧边栏指定特定HTML元素作为上下文
在侧边栏中集成ListView或TreeView组件
为侧边栏外观应用自定义CSS样式
在Blazor WebAssembly或.NET 8应用中构建响应式布局

Key Component Properties

核心组件属性

Property	Purpose
`IsOpen`	Gets or sets a boolean value which indicates whether the Sidebar component's state is open or close. When the Sidebar type is set to `Auto` , the component will be expanded in desktop and collapsed in mobile mode regardless of the `IsOpen` property.
`Width`	Sets sidebar width in pixels or percentage
`Type`	Sidebar behavior: `Push` , `Over` , `Slide` , `Auto`
`Position`	Sidebar position: `Left` (default) or `Right`
`EnableDock`	Shows icons-only when collapsed (default: `false` )
`DockSize`	Width of dock area in pixels
`MediaQuery`	CSS media query for responsive behavior
`Target`	Specific HTML element as sidebar context
`EnablePersistence`	Retains state in localStorage (default: `false` )
`ShowBackdrop`	Overlay behind sidebar to prevent content interaction
`Animate`	Enables animation transitions while expanding or collapsing (default: `true` )
`EnableRtl`	Displays sidebar in right-to-left direction for RTL languages (default: `false` )

属性	用途
`IsOpen`	获取或设置布尔值，指示Sidebar组件的状态是展开还是收起。当Sidebar的Type设置为 `Auto` 时，无论 `IsOpen` 属性如何，组件在桌面端会展开，在移动端会收起。
`Width`	设置侧边栏宽度，支持像素或百分比单位
`Type`	侧边栏行为模式： `Push` 、 `Over` 、 `Slide` 、 `Auto`
`Position`	侧边栏位置： `Left` （默认）或 `Right`
`EnableDock`	收起时仅显示图标（默认值： `false` ）
`DockSize`	停靠区域的宽度（像素单位）
`MediaQuery`	用于响应式行为的CSS媒体查询
`Target`	指定作为侧边栏上下文的HTML元素
`EnablePersistence`	在localStorage中保留状态（默认值： `false` ）
`ShowBackdrop`	在侧边栏后方显示遮罩层，阻止底层内容交互
`Animate`	展开或收起时启用动画过渡（默认值： `true` ）
`EnableRtl`	为RTL语言显示从右到左的侧边栏（默认值： `false` ）

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation across Visual Studio, VS Code, and .NET CLI
NuGet package setup (Syncfusion.Blazor.Navigations, Syncfusion.Blazor.Themes)
Namespace imports and service registration
Theme stylesheet and script references
Basic component rendering

📄 阅读： references/getting-started.md

Visual Studio、VS Code和.NET CLI环境下的安装步骤
NuGet包配置（Syncfusion.Blazor.Navigations、Syncfusion.Blazor.Themes）
命名空间导入与服务注册
主题样式表与脚本引用
基础组件渲染

Web App Setup (.NET 8)

.NET 8 Web应用设置

📄 Read: references/web-app-setup.md

Blazor Web App project creation
Interactive render modes (Auto, Server, WebAssembly)
Package installation for client projects
Stylesheet and script references in App.razor
Render mode directive usage

📄 阅读： references/web-app-setup.md

Blazor Web App项目创建
交互式渲染模式（Auto、Server、WebAssembly）
客户端项目的包安装
App.razor中的样式表与脚本引用
渲染模式指令的使用

Open/Close Control

开合控制

📄 Read: references/open-close-control.md

```
IsOpen
```
property and two-way binding with
```
@bind-IsOpen
```
Toggle methods for programmatic control
Button-based sidebar toggling
Combining multiple open/close triggers and standard event handling

📄 阅读： references/open-close-control.md

```
IsOpen
```
属性及
```
@bind-IsOpen
```
双向绑定
用于编程控制的切换方法
基于按钮的侧边栏切换
组合多个开合触发器与标准事件处理

Responsive & Docking Features

响应式与停靠功能

📄 Read: references/responsive-docking.md

```
MediaQuery
```
property for responsive behavior
```
EnableDock
```
property for icon-only navigation mode
```
DockSize
```
to control icon area width
Icon styling and font-face setup
Docking with ListItems and icon management

📄 阅读： references/responsive-docking.md

用于响应式行为的
```
MediaQuery
```
属性
用于仅图标导航模式的
```
EnableDock
```
属性
控制图标区域宽度的
```
DockSize
```
图标样式与字体设置
与列表项结合的停靠功能及图标管理

State Persistence & Target Context

状态持久化与目标上下文

📄 Read: references/state-persistence-targets.md

```
EnablePersistence
```
for localStorage support
ID requirement for persistence to work
```
Target
```
property for sidebar context
Applying sidebar to specific HTML elements
Toolbar and AppBar integration

📄 阅读： references/state-persistence-targets.md

支持localStorage的
```
EnablePersistence
```
持久化功能生效所需的ID要求
用于侧边栏上下文的
```
Target
```
属性
将侧边栏应用于特定HTML元素
工具栏与AppBar集成

Styling & Animation

样式与动画

📄 Read: references/styling-customization.md

Animation control using
```
Animate
```
property
RTL (right-to-left) support using
```
EnableRtl
```
property
CSS transitions and custom animation effects
State-based styling and visual customization
Backdrop customization and dock styling

📄 阅读： references/styling-customization.md

使用
```
Animate
```
属性控制动画
使用
```
EnableRtl
```
属性支持RTL（从右到左）布局
CSS过渡与自定义动画效果
基于状态的样式与视觉定制
遮罩层定制与停靠样式

Multiple Sidebars

多侧边栏配置

📄 Read: references/multiple-sidebars.md

Managing multiple sidebar instances
```
Position
```
property (Left/Right)
```
e-main-content
```
class for multi-sidebar layouts
Left and right sidebar toggling
Coordinating multiple sidebar states

📄 阅读： references/multiple-sidebars.md

管理多个侧边栏实例
```
Position
```
属性（左/右）
用于多侧边栏布局的
```
e-main-content
```
类
左右侧边栏的切换
协调多个侧边栏的状态

Content Integration

内容集成

📄 Read: references/content-integration.md

Integrating ListView component in sidebar
ListViewFieldSettings configuration
TreeView integration for hierarchical menus
Toolbar component integration
MainLayout integration in .NET 8 apps

📄 阅读： references/content-integration.md

在侧边栏中集成ListView组件
ListViewFieldSettings配置
用于层级菜单的TreeView集成
Toolbar组件集成
.NET 8应用中的MainLayout集成

API Reference

API参考

📄 Read: references/api-reference.md

Complete API documentation for SfSidebar component
All 22 properties with descriptions and accepted values
Methods and their return types
Complete event system (Changed, Created, Destroyed, IsOpenChanged, OnClose, OnOpen)
Event arguments (ChangeEventArgs, EventArgs)
SfSidebarContainer documentation
9+ comprehensive usage examples with code
Property use cases with practical implementations

📄 阅读： references/api-reference.md

SfSidebar组件的完整API文档
所有22个属性的描述与可接受值
方法及其返回类型
完整事件系统（Changed、Created、Destroyed、IsOpenChanged、OnClose、OnOpen）
事件参数（ChangeEventArgs、EventArgs）
SfSidebarContainer文档
9+个综合使用示例及代码
属性的实际应用场景

Quick Start Example

快速入门示例

blazor

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfSidebar @ref="sidebarObj" Width="250px" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <div style="text-align: center; padding: 3rem;">
            <p>Sidebar Content</p>
            <SfButton @onclick="Close" CssClass="e-btn">Close</SfButton>
        </div>
    </ChildContent>
</SfSidebar>

<div style="padding: 3rem;">
    <div>Main Content</div>
    <SfButton @onclick="Toggle" IsToggle="true">Toggle Sidebar</SfButton>
</div>

@code {
    SfSidebar sidebarObj;
    public bool SidebarToggle = false;

    public void Toggle() => SidebarToggle = !SidebarToggle;
    public void Close() => SidebarToggle = false;
}

blazor

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfSidebar @ref="sidebarObj" Width="250px" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <div style="text-align: center; padding: 3rem;">
            <p>Sidebar Content</p>
            <SfButton @onclick="Close" CssClass="e-btn">Close</SfButton>
        </div>
    </ChildContent>
</SfSidebar>

<div style="padding: 3rem;">
    <div>Main Content</div>
    <SfButton @onclick="Toggle" IsToggle="true">Toggle Sidebar</SfButton>
</div>

@code {
    SfSidebar sidebarObj;
    public bool SidebarToggle = false;

    public void Toggle() => SidebarToggle = !SidebarToggle;
    public void Close() => SidebarToggle = false;
}

Common Implementation Patterns

常见实现模式

Pattern 1: Basic Toggle Sidebar

模式1：基础切换侧边栏

Use

IsOpen

property with button click to show/hide sidebar.

使用

IsOpen

属性结合按钮点击来显示/隐藏侧边栏。

Pattern 2: Responsive Sidebar

模式2：响应式侧边栏

Use

MediaQuery

to automatically hide sidebar on mobile and show on desktop.

使用

MediaQuery

在移动端自动隐藏侧边栏，在桌面端自动显示。

Pattern 3: Docked Navigation

模式3：停靠式导航

Use

EnableDock

with

DockSize

for icon-only navigation that expands on hover/click.

结合

EnableDock

与

DockSize

实现仅图标导航， hover/点击时展开。

Pattern 4: Persistent State

模式4：持久化状态

Use

EnablePersistence

+ unique

ID

to remember sidebar state across page navigation.

使用

EnablePersistence

+ 唯一

ID

在页面导航间记住侧边栏状态。

Pattern 5: Target Property Behavior

模式5：Target属性行为

Implicit (Default): No
```
Target
```
property → sidebar targets next sibling element automatically
Explicit (Advanced):
```
Target=".selector"
```
→ requires inner wrapper
<div>
for CSS transforms
✓ Use implicit for most cases | Use explicit only for scoped layout control
See State Persistence & Target Context for detailed patterns

隐式（默认）： 未设置
```
Target
```
属性 → 侧边栏自动以相邻的下一个元素为目标
显式（进阶）：
```
Target=".selector"
```
→ 需要内部包装
```
<div>
```
以支持CSS变换
✓ 大多数场景使用隐式模式 | 仅在需要作用域布局控制时使用显式模式
详细模式请参考状态持久化与目标上下文

Pattern 6: Sidebar with Menu

模式6：带菜单的侧边栏

Combine with ListView or TreeView for structured navigation menus.

与ListView或TreeView结合构建结构化导航菜单。

Pattern 7: Multiple Sidebars

模式7：多侧边栏布局

Use

Position

property with left/right sidebars flanking main content.

Next Steps:

Choose your platform: WebAssembly or .NET 8 Web App
Follow the Getting Started guide for installation
Select features from the navigation guide above
Implement your sidebar with appropriate styling

For detailed examples and advanced scenarios, refer to individual reference files.

使用

Position

属性在主内容两侧配置左右侧边栏。

下一步：

选择平台：WebAssembly或.NET 8 Web App
遵循入门指南完成安装
从上方导航指南中选择所需功能
实现侧边栏并应用合适的样式

如需详细示例和进阶场景，请参考各个参考文档。