Angular-Gridster2
Angular-Gridster演示的角度实现
需要角20.x
对于其他角版本，请检查其他分支。
浏览器支持
在这里有什么角度支撑
安装
npm install angular-gridster2 --save
如何使用
import { Component } from '@angular/core' ;
import { GridsterComponent , GridsterItemComponent } from 'angular-gridster2' ;
@ Component ( {
standalone : true ,
imports : [ GridsterComponent , GridsterItemComponent ] ,
...
} ) < gridster [options] =" options " >
@for (item of dashboard; track item) {
< gridster-item [item] =" item " >
<!-- your content here -->
</ gridster-item >
}
</ gridster >初始化一个简单的仪表板：
import { GridsterConfig , GridsterItem } from 'angular-gridster2' ;
options: GridsterConfig ;
dashboard: Array < GridsterItem > ;
static itemChange ( item , itemComponent ) {
console . info ( 'itemChanged' , item , itemComponent ) ;
}
static itemResize ( item , itemComponent ) {
console . info ( 'itemResized' , item , itemComponent ) ;
}
ngOnInit ( ) {
this . options = {
itemChangeCallback : AppComponent . itemChange ,
itemResizeCallback : AppComponent . itemResize ,
} ;
this . dashboard = [
{ cols : 2 , rows : 1 , y : 0 , x : 0 } ,
{ cols : 2 , rows : 2 , y : 0 , x : 2 }
] ;
}
changedOptions ( ) {
this . options . api . optionsChanged ( ) ;
}
removeItem ( item ) {
this . dashboard . splice ( this . dashboard . indexOf ( item ) , 1 ) ;
}
addItem ( ) {
this . dashboard . push ( { } ) ;
} 注意：Gridster将从父母那里获取所有可用空间。它不会取决于内容。组件的父母需要具有尺寸。
在小部件内容中具有iframe
iframes可以干扰小部件的拖动/调整大小。有关解决方法，请阅读此问题＃233
与内容互动而无需拖动
选项1（无文本选择）：
< gridster-item >
< div (mousedown) =" $event.stopPropagation() " (touchstart) =" $event.stopPropagation() " > Some content to click without dragging the widget </ div >
< div class =" item-buttons " >
< button class =" drag-handler " >
< md-icon > open_with </ md-icon >
</ button >
< button class =" remove-button " (click) =" removeItem($event, item) " (touchstart) =" removeItem($event, item) " >
< md-icon > clear </ md-icon >
</ button >
</ div >
</ gridster-item >选项2（带有文本选择）：
< gridster-item >
< div class =" gridster-item-content " > Some content to select and click without dragging the widget </ div >
< div class =" item-buttons " >
< button class =" drag-handler " >
< md-icon > open_with </ md-icon >
</ button >
< button class =" remove-button " (click) =" removeItem($event, item) " (touchstart) =" removeItem($event, item) " >
< md-icon > clear </ md-icon >
</ button >
</ div >
</ gridster-item >这里的贡献者
执照
麻省理工学院许可证
版权（C）2025 Tiberiu Zuld
下载源码
通过命令行克隆项目:
git clone https://github.com/tiberiuzuld/angular-gridster2.git