0

我是 angular gridster 2 的新手

如果我们能够使用 angular gridster 2 显示已经开发的图表，请告诉我，我也希望看到相同的方法。因为我的 UI 有 5 个不同的 div 块，并且在里面每个 div 块中都显示了一张卡片..

加载页面后，如何使用 angular gridster 显示这 5 张具有可拖动和可调整大小功能的卡片。

<gridster [options]="options">

<div class="col-md-12 ml-auto mr-auto" >

<div class="row"   > <!--[item]="item" *ngFor="let item of dashboard"  gridster-item-->
<gridster-item class="col-lg-3 col-md-6 col-sm-6"  [item]="item" *ngFor="let item of dashboard" >

<card1></card1>
<card2></card2>

</gridster-item>
</gridster>

export class dashboard implements oninit{

options={
    draggable: {
      enabled: true},
      resizable: {
        enabled: true
      }
  };
  dashboard = [
    {cols: 1, rows: 1, y: 0, x: 0}
  ];

}

请解释行、列、x 和 y 代表什么。如果这些值发生更改，它将如何影响 UI。

4

1 回答 1

1

Cols 和 Rows 是您的 gridster 布局设计，以允许 gridster 项目。如果 cols = 1 且 rows = 1，则只能放置一个 gridster 项目，除了 maxItemRows 和 maxItemCols 设置大于 1。y 和 x 是 gridster-item 的 col 和 row 索引。

例如，cols = 5，rows = 5，x = 3，y = 2，gridster-item 将从第 3 列和第 2 行开始显示。

这里有一些关于gridster的文章。

https://medium.com/javascript-in-plain-english/drag-and-drop-dashboard-builder-with-angular-and-gridster-a07592e54ce2

https://developer.aliyun.com/mirror/npm/package/helio-angular-gridster

于 2020-07-18T17:29:27.910 回答