angular gridster2

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