首页 文章

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

提问于
浏览 次
2

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

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

我不确定，如何使用角材料和css实现这一目标 .

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

谢谢

angular angular-material angular6

1 回答

  • 0

    可以使用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 .

    回复于

相关问题