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 ] ,
...
} )
@for (item of dashboard; track item) {
}
">
< gridster [options] =" options " > @for (item of dashboard; track item) { < gridster-item [item] =" item " > 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（无文本选择）：
Some content to click without dragging the widget
">< 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（带有文本选择）：
Some content to select and click without dragging the widget
">< 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 >