Question

我正在尝试基于JSON数据构建动态HTML页面。

对于Ex：-我期望页面左侧有20％的框，右侧有80％的框，然后右侧的框分隔为顶部为60％，底部为40％

我不确定如何用角形材质和css实现此目的。

{
   "horizontal" : [
     {
      width : 20%,
      height: 100%
     },
     {
       "vertical" : [
         {
           width : 80%,
           height: 60%
         },
         {
           width : 80%,
           height: 40%
         }
       ]
     }
   ],
 }

谢谢

Answer 1

可以使用JSON和角材料来创建动态页面布局，但是您需要稍微调整JSON结构。

我希望页面左侧有20％的框，右侧有80％的框，然后右边的框分隔为顶部占60％，底部占40％

您要描述的结构是一个有两列的容器。第一列没有其他内容，而第二列则包含两行。可以这样表示：

layout = [
    {
      /* container */
      width: "100%",
      height: "100%",
      columns: [
        /* first column */
        {
          width: "20%",
          height: "100%",    
        },
        /* second column */
        {
          width: "80%",
          height: "100%",
          rows: [
            {
              /* first row of second column */
              width: "100%",
              height: "60%",
            },
            {
              /* second row of second column */
              width: "100%",
              height: "40%",    
            }
          ]
        }
      ]
    }
  ];

要使布局可见，您必须遍历模板文件中的所有列和行，并设置适当的@ angular / flex-layout属性：

<div class="container" fxLayout="column">
    <ng-container *ngFor="let container of style">
        <div fxFlex="0 0 {{container.width}}" [ngStyle]="{ 'height': container.height }" class="row">
            <ng-container *ngFor="let col of container.columns">
                <div fxFlex="{{col.width}}" [ngStyle]="{ 'height': col.height }" class="col" fxLayout="row wrap">
                    <ng-container *ngFor="let row of col.rows">
                        <div fxFlex="{{row.width}}" [ngStyle]="{ 'height': row.height }" class="row">
                        </div>
                    </ng-container>
                </div>
            </ng-container>
        </div>
    </ng-container>
</div>

我为您创建了一个stackblitz，因此您可以检查完整的代码并通过更改容器，列和行的值来对其进行测试。

此代码仅适用于您提供的嵌套深度（容器>列>行）。如果您在布局中需要更多或未知数量的级别，则可以在使用ng-template的情况下使此布局更加通用。就像在这个generic layout stackblitz中一样。

Angular 6-带有Angular材质的动态页面

1 个答案: