syncfusion-angular-dashboard-layout

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Dashboard Layout

实现Syncfusion Angular Dashboard Layout

The Dashboard Layout component is a powerful grid-structured layout control that helps you create responsive, interactive dashboards with dynamic panels. Panels can be dragged, resized, added, removed, and their state can be persisted. This skill guides you through all aspects of implementing, configuring, and customizing dashboard layouts in Angular.

Dashboard Layout组件是一个功能强大的网格结构布局控件，可帮助您创建带有动态面板的响应式交互式仪表盘。面板支持拖拽、调整大小、添加、移除，并且其状态可持久化保存。本技能将引导您完成Angular中仪表盘布局的实现、配置和自定义的所有环节。

When to Use This Skill

何时使用本技能

Creating customizable dashboard layouts with multiple panels
Implementing drag-and-drop panel repositioning
Enabling panel resizing in multiple directions
Dynamically adding or removing dashboard panels
Making dashboards responsive across device sizes
Saving and restoring dashboard layout configurations
Styling dashboard components with CSS customization
Integrating Syncfusion charts, grids, or other components as panel content

创建包含多个面板的可自定义仪表盘布局
实现面板拖拽重定位功能
支持多方向调整面板大小
动态添加或移除仪表盘面板
实现跨设备尺寸的响应式仪表盘
保存和恢复仪表盘布局配置
通过CSS自定义仪表盘组件样式
将Syncfusion图表、网格或其他组件集成作为面板内容

Component Overview

组件概述

The Dashboard Layout component provides:

Grid-based layout system with configurable columns and cell dimensions
Drag-and-drop support for reordering panels with visual feedback
Resizing in multiple directions (east, west, north, south, etc.)
Floating panels that automatically fill empty spaces
Responsive behavior with custom media query breakpoints
State persistence through serialize/deserialize methods
Dynamic panel management with add, remove, and move operations
Event-driven architecture for tracking user interactions

Dashboard Layout组件提供以下功能：

支持可配置列数和单元格尺寸的网格布局系统
支持面板重新排序的拖拽功能，并提供视觉反馈
支持多方向（东、西、北、南等）的调整大小功能
可自动填充空白区域的浮动面板
支持自定义媒体查询断点的响应式行为
通过序列化/反序列化方法实现状态持久化
支持添加、移除和移动操作的动态面板管理
用于跟踪用户交互的事件驱动架构

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Angular CLI setup and project initialization
Installing Dashboard Layout package (Ivy and ngcc variants)
CSS imports and theme configuration
Two panel definition approaches (HTML attributes vs property binding)
Basic component rendering and first dashboard creation
Cell spacing and layout initialization

📄 阅读： references/getting-started.md

Angular CLI设置与项目初始化
安装Dashboard Layout包（Ivy和ngcc版本）
CSS导入与主题配置
两种面板定义方式（HTML属性 vs 属性绑定）
基础组件渲染与首个仪表盘创建
单元格间距与布局初始化

Adding and Removing Panels

添加与移除面板

📄 Read: references/adding-removing-panels.md

Dynamic panel management with addPanel() method
Removing individual panels with removePanel(id)
Bulk removal with removeAll() method
Panel configuration properties for dynamic generation
Event handling and callbacks for lifecycle management

📄 阅读： references/adding-removing-panels.md

使用addPanel()方法进行动态面板管理
使用removePanel(id)移除单个面板
使用removeAll()方法批量移除面板
用于动态生成的面板配置属性
生命周期管理的事件处理与回调

Setting Panel Headers

设置面板标题

📄 Read: references/panel-headers.md

Configuring panel headers with header property
Adding titles, labels, and HTML content to headers
Styling headers with CSS customization
Embedding Syncfusion components in panel headers
Header interaction and user experience patterns

📄 阅读： references/panel-headers.md

使用header属性配置面板标题
为标题添加文本、标签和HTML内容
通过CSS自定义标题样式
在面板标题中嵌入Syncfusion组件
标题交互与用户体验模式

Dragging and Dropping Panels

拖拽面板

📄 Read: references/dragging-and-dropping.md

Default drag-drop behavior and panel collision handling
Drag events: dragStart, drag, dragStop
Customizing drag handles with draggableHandle property
Programmatic panel movement with movePanel(id, row, col)
Disabling drag functionality with allowDragging
Touch support and user interaction patterns

📄 阅读： references/dragging-and-dropping.md

默认拖拽行为与面板碰撞处理
拖拽事件：dragStart、drag、dragStop
使用draggableHandle属性自定义拖拽手柄
使用movePanel(id, row, col)实现面板程序化移动
通过allowDragging禁用拖拽功能
触摸支持与用户交互模式

Moving Panels Programmatically

程序化移动面板

📄 Read: references/moving-panels.md

Using movePanel(id, row, col) to reposition panels
Moving panels without user interaction
Tracking panel movements with change events
Swapping panel positions programmatically
Panel rearrangement patterns and use cases

📄 阅读： references/moving-panels.md

使用movePanel(id, row, col)重新定位面板
无需用户交互即可移动面板
通过change事件跟踪面板移动
程序化交换面板位置
面板重排模式与应用场景

Resizing and Floating Panels

调整面板大小与浮动面板

📄 Read: references/resizing-and-floating.md

Enabling panel resizing with allowResizing
Resize handles in different directions (e-south-east, e-east, e-west, e-north, e-south)
Resize events: resizeStart, resize, resizeStop
Programmatic resizing with resizePanel(id, sizeX, sizeY)
Min and max size constraints (minSizeX, minSizeY, maxSizeX, maxSizeY)
Floating behavior and automatic panel repositioning
Disabling floating for fixed grid layouts

📄 阅读： references/resizing-and-floating.md

通过allowResizing启用面板调整大小功能
不同方向的调整手柄（e-south-east、e-east、e-west、e-north、e-south）
调整大小事件：resizeStart、resize、resizeStop
使用resizePanel(id, sizeX, sizeY)实现程序化调整大小
最小/最大尺寸限制（minSizeX、minSizeY、maxSizeX、maxSizeY）
浮动行为与面板自动重定位
为固定网格布局禁用浮动功能

Saving and Restoring State

保存与恢复状态

📄 Read: references/save-restore-state.md

Serializing dashboard layout with serialize()
Saving layout state to localStorage, sessionStorage, or backend
Restoring layouts from persisted configuration
Implementing layout templates and presets
State persistence patterns and best practices

📄 阅读： references/save-restore-state.md

使用serialize()序列化仪表盘布局
将布局状态保存到localStorage、sessionStorage或后端
从持久化配置中恢复布局
实现布局模板与预设
状态持久化模式与最佳实践

Responsive and Adaptive Design

响应式与自适应设计

📄 Read: references/responsive-and-adaptive.md

Built-in responsive behavior and auto-adaptation
Customizing responsive breakpoints with mediaQuery
Stacked layout on mobile devices (vertical columns)
Cell aspect ratio configuration with cellAspectRatio
Testing responsive layouts at different resolutions
Parent element sizing (percentage vs static dimensions)

📄 阅读： references/responsive-and-adaptive.md

内置响应式行为与自动适配
使用mediaQuery自定义响应式断点
移动设备上的堆叠布局（垂直列）
使用cellAspectRatio配置单元格宽高比
在不同分辨率下测试响应式布局
父元素尺寸设置（百分比 vs 静态尺寸）

Configuring Cell Spacing

配置单元格间距

📄 Read: references/cell-spacing-configuration.md

Setting [horizontal, vertical] spacing with cellSpacing property
Adjusting spacing for compact or spacious layouts
Dynamic spacing adjustment for responsive designs
Asymmetric spacing patterns for visual hierarchy
Practical examples: compact dashboards, executive layouts

📄 阅读： references/cell-spacing-configuration.md

使用cellSpacing属性设置[水平, 垂直]间距
调整间距以实现紧凑或宽松的布局
为响应式设计动态调整间距
用于视觉层级的不对称间距模式
实际示例：紧凑仪表盘、高管布局

Graphical Representation and Grid Lines

图形展示与网格线

📄 Read: references/grid-lines-and-visualization.md

Visualizing grid structure with showGridLines property
Understanding grid cells, rows, columns, and spacing
Design-time grid visualization for layout planning
Debugging panel positioning and sizing
Best practices for grid line usage

📄 阅读： references/grid-lines-and-visualization.md

使用showGridLines属性可视化网格结构
了解网格单元格、行、列和间距
用于布局规划的设计时网格可视化
调试面板定位与尺寸
网格线使用的最佳实践

Right-to-Left Language Support

从右到左（RTL）语言支持

📄 Read: references/rtl-support.md

Enabling RTL rendering with enableRtl property
Supporting Arabic, Hebrew, Farsi, and Urdu languages
Dynamic RTL toggling for language switching
HTML dir attribute integration
CSS logical properties for RTL-aware styling
RTL considerations with drag-drop interactions

📄 阅读： references/rtl-support.md

使用enableRtl属性启用RTL渲染
支持阿拉伯语、希伯来语、波斯语和乌尔都语
用于语言切换的动态RTL切换
HTML dir属性集成
用于RTL感知样式的CSS逻辑属性
拖拽交互的RTL注意事项

Styling and Customization

样式与自定义

📄 Read: references/styling-and-customization.md

CSS selectors for customizing panels, headers, and content
Panel header and content styling (.e-panel-header, .e-panel-content)
Resize handle customization (.e-resize)
Dashboard background styling
Panel positioning and sizing with row, col, sizeX, sizeY properties
Min/max size constraints and grid structure
Integrating Syncfusion components (Charts, Grids, Gauges) as panel content
SystemJS configuration for legacy Angular setups

For detailed examples and code samples, see:

getting-started.md - Quick start and basic setup examples
Common patterns and implementation examples in specific reference files

📄 阅读： references/styling-and-customization.md

用于自定义面板、标题和内容的CSS选择器
面板标题与内容样式（.e-panel-header、.e-panel-content）
调整手柄自定义（.e-resize）
仪表盘背景样式
使用row、col、sizeX、sizeY属性设置面板定位与尺寸
最小/最大尺寸限制与网格结构
将Syncfusion组件（图表、网格、仪表）集成为面板内容
旧版Angular设置的SystemJS配置

如需详细示例与代码片段，请查看：

getting-started.md - 快速入门与基础设置示例
特定参考文件中的常见模式与实现示例

API Reference

API参考

Component Properties (14 total)

组件属性（共14个）

Layout Configuration

布局配置

Property	Type	Default	Description
`columns`	number	5	Number of columns in the grid layout. Panels are positioned within this column-based grid.
`cellSpacing`	number[]	[10, 10]	Spacing between panels: [horizontal, vertical] in pixels. Creates visual separation and padding around panels.
`cellAspectRatio`	number	Auto (1:1)	Width/height ratio of cells. Example: 100/50 creates cells that are twice as wide as tall.
`mediaQuery`	string	'max-width: 600px'	CSS media query breakpoint for responsive stacked layout. Panels stack vertically below this breakpoint.
`showGridLines`	boolean	false	When true, visualizes grid cells and structure for design-time debugging and layout planning.

属性	类型	默认值	描述
`columns`	number	5	网格布局中的列数。面板将在此基于列的网格中定位。
`cellSpacing`	number[]	[10, 10]	面板之间的间距：[水平, 垂直]，单位为像素。在面板周围创建视觉分隔和内边距。
`cellAspectRatio`	number	自动（1:1）	单元格的宽高比。示例：100/50创建宽度为高度两倍的单元格。
`mediaQuery`	string	'max-width: 600px'	用于响应式堆叠布局的CSS媒体查询断点。低于此断点时，面板将垂直堆叠。
`showGridLines`	boolean	false	设置为true时，可视化网格单元格和结构，用于设计时调试和布局规划。

Interaction Features

交互功能

Property	Type	Default	Description
`allowDragging`	boolean	true	Enables/disables panel drag-drop functionality. When true, users can reorder panels by dragging.
`allowResizing`	boolean	false	Enables/disables panel resizing. When true, resize handles appear on panel edges.
`allowFloating`	boolean	true	Enables/disables floating behavior. When true, panels automatically move upward to fill empty spaces left by moved/resized panels.
`resizableHandles`	string[]	['e-south-east']	Array of resize handle directions: 'e-south-east', 'e-east', 'e-west', 'e-north', 'e-south', 'e-south-west'. Controls which directions users can resize panels.
`draggableHandle`	string	null	CSS selector string for drag handle element. If set, dragging only works when user grabs this specific element (e.g., '.e-panel-header').

属性	类型	默认值	描述
`allowDragging`	boolean	true	启用/禁用面板拖拽功能。设置为true时，用户可通过拖拽重新排序面板。
`allowResizing`	boolean	false	启用/禁用面板调整大小功能。设置为true时，面板边缘将显示调整手柄。
`allowFloating`	boolean	true	启用/禁用浮动行为。设置为true时，面板会自动向上移动以填充因移动/调整大小而留下的空白区域。
`resizableHandles`	string[]	['e-south-east']	调整手柄方向数组：'e-south-east'、'e-east'、'e-west'、'e-north'、'e-south'、'e-south-west'。控制用户可调整面板大小的方向。
`draggableHandle`	string	null	拖拽手柄元素的CSS选择器字符串。如果设置，仅当用户抓住此特定元素（例如'.e-panel-header'）时才能进行拖拽。

Content and Styling

内容与样式

Property	Type	Default	Description
`panels`	PanelModel[]	[]	Array of panel configurations defining the dashboard layout structure and content.
`enableRtl`	boolean	false	Enables right-to-left rendering for RTL languages (Arabic, Hebrew, Farsi, Urdu).
`enableHtmlSanitizer`	boolean	true	Sanitizes HTML content in panels to prevent XSS attacks. Set to false only with trusted content.
`enablePersistence`	boolean	false	When true, automatically saves/restores dashboard state in browser storage between page reloads.

属性	类型	默认值	描述
`panels`	PanelModel[]	[]	定义仪表盘布局结构和内容的面板配置数组。
`enableRtl`	boolean	false	为RTL语言（阿拉伯语、希伯来语、波斯语、乌尔都语）启用从右到左渲染。
`enableHtmlSanitizer`	boolean	true	对面板中的HTML内容进行 sanitize 处理，以防止XSS攻击。仅在内容可信时设置为false。
`enablePersistence`	boolean	false	设置为true时，会在页面重新加载时自动在浏览器存储中保存/恢复仪表盘状态。

Panel Properties (13 total)

面板属性（共13个）

Property	Type	Default	Description
Position & Size
`row`	number	0	Starting row position (0-based indexing) in the grid. Determines vertical placement.
`col`	number	0	Starting column position (0-based indexing) in the grid. Determines horizontal placement.
`sizeX`	number	1	Width of panel in cells. Example: sizeX=2 spans 2 grid columns.
`sizeY`	number	1	Height of panel in cells. Example: sizeY=2 spans 2 grid rows.
Size Constraints
`minSizeX`	number	1	Minimum width in cells. Prevents panel from being resized smaller than this value.
`minSizeY`	number	1	Minimum height in cells. Prevents panel from being resized smaller than this value.
`maxSizeX`	number	null	Maximum width in cells. Null means no limit. Prevents panel from being resized larger than this value.
`maxSizeY`	number	null	Maximum height in cells. Null means no limit. Prevents panel from being resized larger than this value.
Content
`id`	string	''	Unique identifier for the panel. Required for methods like movePanel(), resizePanel(), removePanel().
`header`	string \| HTMLElement \| Function	undefined	Header/title content. Can be HTML string, DOM element, or function returning content.
`content`	string \| HTMLElement \| Function	undefined	Main body content. Can be HTML string, DOM element, or function returning content (e.g., charts, grids).
Styling & State
`cssClass`	string	''	Custom CSS class names to apply to the panel for styling and theming.
`enabled`	boolean	true	When false, disables the panel and makes it non-interactive.
`zIndex`	number	1000	CSS z-index for layer ordering. Higher values appear on top.

属性	类型	默认值	描述
位置与尺寸
`row`	number	0	网格中的起始行位置（从0开始索引）。决定垂直位置。
`col`	number	0	网格中的起始列位置（从0开始索引）。决定水平位置。
`sizeX`	number	1	面板的宽度（以单元格为单位）。示例：sizeX=2跨越2个网格列。
`sizeY`	number	1	面板的高度（以单元格为单位）。示例：sizeY=2跨越2个网格行。
尺寸限制
`minSizeX`	number	1	最小宽度（以单元格为单位）。防止面板被调整得小于此值。
`minSizeY`	number	1	最小高度（以单元格为单位）。防止面板被调整得小于此值。
`maxSizeX`	number	null	最大宽度（以单元格为单位）。null表示无限制。防止面板被调整得大于此值。
`maxSizeY`	number	null	最大高度（以单元格为单位）。null表示无限制。防止面板被调整得大于此值。
内容
`id`	string	''	面板的唯一标识符。是movePanel()、resizePanel()、removePanel()等方法必需的参数。
`header`	string \| HTMLElement \| Function	undefined	标题/头部内容。可以是HTML字符串、DOM元素或返回内容的函数。
`content`	string \| HTMLElement \| Function	undefined	主体内容。可以是HTML字符串、DOM元素或返回内容的函数（例如图表、网格）。
样式与状态
`cssClass`	string	''	应用于面板的自定义CSS类名，用于样式和主题设置。
`enabled`	boolean	true	设置为false时，禁用面板并使其无法交互。
`zIndex`	number	1000	用于层级排序的CSS z-index值。值越高，显示层级越靠上。

Events (9 total)

事件（共9个）

Drag Events

拖拽事件

Event	Arguments	Description
`dragStart`	DragStartArgs	Fires when user begins dragging a panel. Arguments: cancel (bool to prevent drag), element (HTMLElement), event (MouseEvent\|TouchEvent). Use to validate or prevent specific drag operations.
`drag`	DraggedEventArgs	Fires continuously while dragging. Arguments: element (HTMLElement being dragged), event (MouseEvent\|TouchEvent), target (HTMLElement under cursor). Use for visual feedback during drag. Fires 60+ times/second—throttle expensive operations.
`dragStop`	DragStopArgs	Fires when drag completes/releases. Arguments: cancel (bool to revert position), element, event, panels (PanelModel[] of affected panels), target. Use to save final positions or validate drop location.

事件	参数	描述
`dragStart`	DragStartArgs	用户开始拖拽面板时触发。参数：cancel（布尔值，用于阻止拖拽）、element（HTMLElement）、event（MouseEvent\|TouchEvent）。用于验证或阻止特定拖拽操作。
`drag`	DraggedEventArgs	拖拽过程中持续触发。参数：element（正在拖拽的HTMLElement）、event（MouseEvent\|TouchEvent）、target（光标下的HTMLElement）。用于拖拽期间的视觉反馈。每秒触发60+次——需限制高开销操作。
`dragStop`	DragStopArgs	拖拽完成/释放时触发。参数：cancel（布尔值，用于还原位置）、element、event、panels（受影响的PanelModel数组）、target。用于保存最终位置或验证放置位置。

Resize Events

调整大小事件

Event	Arguments	Description
`resizeStart`	ResizeArgs	Fires when resize begins. Arguments: element (HTMLElement), event (MouseEvent\|TouchEvent), isInteracted (true=user, false=programmatic), panels (PanelModel[] affected).
`resize`	ResizeArgs	Fires continuously during resize. Same arguments as resizeStart. Use for real-time validation or display of new dimensions. Fires frequently—throttle expensive operations.
`resizeStop`	ResizeArgs	Fires when resize completes. Same arguments as resize. Use to finalize panel sizes or save state.

事件	参数	描述
`resizeStart`	ResizeArgs	开始调整大小时触发。参数：element（HTMLElement）、event（MouseEvent\|TouchEvent）、isInteracted（true=用户操作，false=程序化操作）、panels（受影响的PanelModel数组）。
`resize`	ResizeArgs	调整大小过程中持续触发。参数与resizeStart相同。用于实时验证或显示新尺寸。触发频率高——需限制高开销操作。
`resizeStop`	ResizeArgs	调整大小完成时触发。参数与resize相同。用于确定面板最终尺寸或保存状态。

Layout Change Events

布局变更事件

Event	Arguments	Description
`change`	ChangeEventArgs	Fires when layout changes (panel added, removed, moved, resized). Arguments: addedPanels (PanelModel[]), changedPanels (PanelModel[]), isInteracted (bool), removedPanels (PanelModel[]). Use to detect and react to all layout modifications.
`created`	Object	Fires when dashboard component is fully initialized and rendered. Use for post-initialization setup.
`destroyed`	Object	Fires when dashboard component is destroyed. Use for cleanup operations.

事件	参数	描述
`change`	ChangeEventArgs	布局变更时触发（面板添加、移除、移动、调整大小）。参数：addedPanels（PanelModel数组）、changedPanels（PanelModel数组）、isInteracted（布尔值）、removedPanels（PanelModel数组）。用于检测和响应所有布局修改。
`created`	Object	仪表盘组件完全初始化并渲染完成时触发。用于初始化后的设置。
`destroyed`	Object	仪表盘组件被销毁时触发。用于清理操作。

Methods

方法

Panel Management

面板管理

Method	Signature	Returns	Description
`addPanel`	`addPanel(panel: PanelModel)`	void	Dynamically add a new panel to the dashboard. Panel will be positioned according to its row/col properties. Triggers `change` event.
`removePanel`	`removePanel(panelId: string)`	void	Remove a specific panel by its ID. Triggers `change` event. Other panels may float up if allowFloating=true.
`removeAll`	`removeAll()`	void	Remove all panels from the dashboard. Clears the entire layout.
`movePanel`	`movePanel(panelId: string, row: number, col: number)`	void	Reposition a panel to a new grid location. Triggers drag-like behavior with floating if enabled. Triggers `change` event.
`resizePanel`	`resizePanel(panelId: string, sizeX: number, sizeY: number)`	void	Resize a panel to new dimensions (in cells). Respects minSize/maxSize constraints. Triggers resize events with isInteracted=false. Triggers `change` event.

方法	签名	返回值	描述
`addPanel`	`addPanel(panel: PanelModel)`	void	向仪表盘动态添加新面板。面板将根据其row/col属性定位。触发 `change` 事件。
`removePanel`	`removePanel(panelId: string)`	void	通过ID移除特定面板。触发 `change` 事件。如果allowFloating=true，其他面板可能会向上浮动。
`removeAll`	`removeAll()`	void	移除仪表盘上的所有面板。清空整个布局。
`movePanel`	`movePanel(panelId: string, row: number, col: number)`	void	将面板重新定位到新的网格位置。如果启用浮动，会触发类似拖拽的行为。触发 `change` 事件。
`resizePanel`	`resizePanel(panelId: string, sizeX: number, sizeY: number)`	void	将面板调整为新的尺寸（以单元格为单位）。遵循minSize/maxSize限制。触发resize事件，且isInteracted=false。触发 `change` 事件。

State Management

状态管理

Method	Signature	Returns	Description
`serialize`	`serialize()`	PanelModel[]	Captures and returns the current dashboard layout state as an array of PanelModel objects. Use with localStorage or database to persist user configurations. Can be used to create layout templates/presets.

方法	签名	返回值	描述
`serialize`	`serialize()`	PanelModel[]	捕获并返回当前仪表盘布局状态，格式为PanelModel对象数组。可与localStorage或数据库配合使用，以持久化用户配置。可用于创建布局模板/预设。

Component Lifecycle

组件生命周期

Method	Signature	Returns	Description
`updatePanel`	`updatePanel(panelId: string, panelModel: PanelModel)`	void	Update properties of an existing panel. Useful for changing header, content, or other panel properties without removing and re-adding the panel. Triggers `change` event with changedPanels.
`refreshDraggableHandle`	`refreshDraggableHandle()`	void	Refreshes the draggable handle selector. Call this when DOM structure changes or draggableHandle CSS selector needs to be re-evaluated. Useful after external DOM modifications.
`destroy`	`destroy()`	void	Destroys the Dashboard Layout component and cleans up all resources. Triggers `destroyed` event. Call before component unmounting to prevent memory leaks.

方法	签名	返回值	描述
`updatePanel`	`updatePanel(panelId: string, panelModel: PanelModel)`	void	更新现有面板的属性。无需移除并重新添加面板即可修改标题、内容或其他面板属性。触发 `change` 事件，并传入changedPanels。
`refreshDraggableHandle`	`refreshDraggableHandle()`	void	刷新拖拽手柄选择器。当DOM结构变更或draggableHandle CSS选择器需要重新评估时调用。在外部DOM修改后非常有用。
`destroy`	`destroy()`	void	销毁Dashboard Layout组件并清理所有资源。触发 `destroyed` 事件。在组件卸载前调用，以防止内存泄漏。

Event Arguments Reference

事件参数参考

DragStartArgs

typescript

{
  cancel: boolean;              // Set to true to prevent the drag operation
  element: HTMLElement;         // The panel element being dragged
  event: MouseEvent | TouchEvent; // The original browser event
}

typescript

{
  cancel: boolean;              // 设置为true以阻止拖拽操作
  element: HTMLElement;         // 正在拖拽的面板元素
  event: MouseEvent | TouchEvent; // 原始浏览器事件
}

DraggedEventArgs

typescript

{
  element: HTMLElement;         // The panel element being dragged
  event: MouseEvent | TouchEvent; // The original browser event (fires 60+ times/sec)
  target: HTMLElement;          // The element currently under the cursor
}

typescript

{
  element: HTMLElement;         // 正在拖拽的面板元素
  event: MouseEvent | TouchEvent; // 原始浏览器事件（每秒触发60+次）
  target: HTMLElement;          // 光标当前下方的元素
}

DragStopArgs

typescript

{
  cancel: boolean;              // Set to true to cancel/revert the drag
  element: HTMLElement;         // The panel element that was dragged
  event: MouseEvent | TouchEvent; // The drop/release event
  panels: PanelModel[];         // Array of panels affected by the drag (position changed)
  target: HTMLElement;          // The element at the drop location
}

typescript

{
  cancel: boolean;              // 设置为true以取消/还原拖拽
  element: HTMLElement;         // 已拖拽的面板元素
  event: MouseEvent | TouchEvent; // 释放/放置事件
  panels: PanelModel[];         // 受拖拽影响的面板数组（位置已变更）
  target: HTMLElement;          // 放置位置的元素
}

ResizeArgs

typescript

{
  element: HTMLElement;         // The panel element being resized
  event: MouseEvent | TouchEvent; // The original browser event
  isInteracted: boolean;        // true = user resize, false = programmatic resize
  panels: PanelModel[];         // Array of panels affected by the resize
}

typescript

{
  element: HTMLElement;         // 正在调整大小的面板元素
  event: MouseEvent | TouchEvent; // 原始浏览器事件
  isInteracted: boolean;        // true = 用户调整大小, false = 程序化调整大小
  panels: PanelModel[];         // 受调整大小影响的面板数组
}

ChangeEventArgs

typescript

{
  addedPanels: PanelModel[];    // Panels added in this change
  changedPanels: PanelModel[];  // Panels whose position/size changed
  isInteracted: boolean;        // true = user action, false = programmatic
  removedPanels: PanelModel[];  // Panels removed in this change
}

For detailed method examples and security configuration, see:

adding-removing-panels.md - Method examples for panel management
styling-and-customization.md - Security and configuration examples

typescript

{
  addedPanels: PanelModel[];    // 本次变更中添加的面板
  changedPanels: PanelModel[];  // 位置/尺寸已变更的面板
  isInteracted: boolean;        // true = 用户操作, false = 程序化操作
  removedPanels: PanelModel[];  // 本次变更中移除的面板
}

如需详细方法示例与安全配置，请查看：

adding-removing-panels.md - 面板管理的方法示例
styling-and-customization.md - 安全与配置示例

Common Use Cases

常见应用场景

Analytics Dashboard: Display charts and metrics in resizable panels for data monitoring
Admin Panel: Dynamic widget system with add/remove and drag-drop functionality
Real-time Monitoring: Update panel content while maintaining layout state
Mobile-responsive Portal: Stacked panels on mobile, grid layout on desktop
User Customizable Layout: Allow users to save their preferred dashboard arrangement
Widget Store: Add new panels dynamically from a widget library

分析仪表盘： 在可调整大小的面板中显示图表和指标，用于数据监控
管理面板： 带有添加/移除和拖拽功能的动态小部件系统
实时监控： 更新面板内容的同时保持布局状态
移动端响应式门户： 移动端使用堆叠面板，桌面端使用网格布局
用户可自定义布局： 允许用户保存其偏好的仪表盘布局
小部件商店： 从小部件库中动态添加新面板

syncfusion-angular-dashboard-layout

Original

Translation

Implementing Syncfusion Angular Dashboard Layout

实现Syncfusion Angular Dashboard Layout

When to Use This Skill

何时使用本技能

Component Overview

组件概述

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

Adding and Removing Panels

添加与移除面板

Setting Panel Headers

设置面板标题

Dragging and Dropping Panels

拖拽面板

Moving Panels Programmatically

程序化移动面板

Resizing and Floating Panels

调整面板大小与浮动面板

Saving and Restoring State

保存与恢复状态

Responsive and Adaptive Design

响应式与自适应设计

Configuring Cell Spacing

配置单元格间距

Graphical Representation and Grid Lines

图形展示与网格线

Right-to-Left Language Support

从右到左（RTL）语言支持

Styling and Customization

样式与自定义

API Reference

API参考

Component Properties (14 total)

组件属性（共14个）

Layout Configuration

布局配置

Interaction Features

交互功能

Content and Styling

内容与样式

Panel Properties (13 total)

面板属性（共13个）

Events (9 total)

事件（共9个）

Drag Events

拖拽事件

Resize Events

调整大小事件

Layout Change Events

布局变更事件

Methods

方法

Panel Management

面板管理

State Management

状态管理

Component Lifecycle

组件生命周期

Event Arguments Reference

事件参数参考

DragStartArgs

DragStartArgs

DraggedEventArgs

DraggedEventArgs

DragStopArgs

DragStopArgs

ResizeArgs

ResizeArgs

ChangeEventArgs

ChangeEventArgs

Common Use Cases

常见应用场景

Related Topics

相关主题

Component Setup & Configuration