如何使用角材料设计箭头网格答案

【问题标题】：How to design the arrow grid using the angular material如何使用角材料设计箭头网格
【发布时间】：2019-11-13 13:15:18
【问题描述】：

我需要使用有角度的材料将用户界面设计成如下图，任何关于此的想法对我都非常有帮助。

【问题讨论】：

尝试使用角度材质网格？

标签： angular angular-material

【解决方案1】：

您可以使用 SVG 指令。 SVG 就像 HTML 一样是标记，浏览器允许将 <svg> 直接嵌入到 HTML 文档中。这是一个简单的例子：

<svg viewBox="0 0 250 250">
  <polygon points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
  <polygon points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30" />
  <path d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
      L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
</svg>

Source

【讨论】：

,有没有不使用SVG的解决方案，我只需要用html设计
正如我所说，SVG 是 HTML 的一部分。您不需要额外的库。就好像你使用了一个 div。

【解决方案2】：

这是制作箭头设计的解决方案

public arrowHeadFstRow: any[] = [];
  public arrowHeadSndRow: any[] = [];
  public arrowHeadTrdRow: any[] = [];
  public arrowHeadfthRow: any[] = [];

  arrowGrid(data) {
    this.gridData = data;
    let row2 = []; let row3 = []; let row4 = []; let row5 = []; let row6 = []; let row7 = []; let row8 = []; let row9 = []; let row10 = [];
    //First Row
    for (let i = 62; i > 60; i--) {
      this.arrowHeadFstRow.push({ cell: i, isSelected: false })
    }
    for (let i = 1; i <= 1; i++) {
      //Second Row
      for (let j = 60; j > 52; j--) {
        row2.push({ cell: j, isSelected: false });
      }
      for (let j = 52; j > 44; j--) {
        row5.push({ cell: j, isSelected: false });
      }
      for (let j = 44; j > 36; j--) {
        row6.push({ cell: j, isSelected: false });
      }
      for (let j = 36; j > 28; j--) {
        row7.push({ cell: j, isSelected: false });
      }
      for (let j = 28; j > 20; j--) {
        row8.push({ cell: j, isSelected: false });
      }
      //Third Row
      for (let j = 20; j > 14; j--) {
        row3.push({ cell: j, isSelected: false });
      }
      for (let j = 14; j > 8; j--) {
        row9.push({ cell: j, isSelected: false });
      }
      //Fourth Row
      for (let j = 8; j > 4; j--) {
        row4.push({ cell: j, isSelected: false });
      }
      for (let j = 4; j >= 1; j--) {
        row10.push({ cell: j, isSelected: false });
      }
    }
    this.arrowHeadFstRow.reverse();
    this.arrowHeadSndRow.push(row2.reverse());
    this.arrowHeadSndRow.push(row5.reverse());
    this.arrowHeadSndRow.push(row6.reverse());
    this.arrowHeadSndRow.push(row7.reverse());
    this.arrowHeadSndRow.push(row8.reverse());
    this.arrowHeadTrdRow.push(row3.reverse());
    this.arrowHeadTrdRow.push(row9.reverse());
    this.arrowHeadfthRow.push(row4.reverse());
    this.arrowHeadfthRow.push(row10.reverse());
  }
 genrateGrid(data,size) {
    for (var i=0; i<data.length; i+=size) {
        if(size ==9) this.gridArray9.push(data.slice(i,i+size));
        if(size ==10) this.gridArray10.push(data.slice(i,i+size));
        if(size ==7) this.gridArray7.push(data.slice(i,i+size));
    }
  }

【讨论】：