0

我正在尝试在移动设备上使用 ionic 中的一个小的详细瓷砖网格。基本上一个粗略的设计线框看起来像这样：

线框

关于我画的几句话。每个项目都可以用缩略图、标题和“图块”数组来描述。理想情况下，每个图块应显示为固定大小的项目。浮雕 3D 或平面：任何可行的。在每个图块上，会有一些非常小的精确定位组件：一个数字、一个图标、一些文本，以及可选的另一个图标/或更可能是一个非常小的图像或一个线性量规（仅由 3 个值表示 - 绿色/橙色/红色。不是真正的标准）。

我尝试过使用离子卡，但离子网格在卡内不起作用。用离子网格布置这些物品的努力也没有奏效。我发现强迫这些物品靠得足够近是不可能的。随着每列内的元素接近填充空间，网格会扩展和/或换行。由于我正在处理动态数据，因此它永远不会可靠地工作。

一个非常基本的起点，它只描述一个瓦片：

<ion-row>
                  <ion-col class="ion-text-center" no-padding> 
                    <ion-label>  
                      <h5 card-body-text style="font-size: 0.8rem;" class="device-id-text">
                        TEMP
                      </h5>
                      <ion-text color="dark">                      
                        <h4 item-title class="device-name-text" style="font-size: 1.5rem;"> 
                          <ion-text color="primary"><span> {{ item.lastTemp}}  </span> </ion-text>
                        </h4> 
                      </ion-text>
                    </ion-label>
                  </ion-col>

初始点

如您所见，基本结构就在那里。但它在很大程度上依赖于列内的内容才能正常工作。我也可以添加一个离子图标，但实际上看起来，嗯，不是很好。这不是一个很好的解决方案！

我无法弄清楚如何创建“图块”并将必要的元素放入其中，以使它们看起来像预期的结果。这如何在离子中完成。我在 ionic 4。如果升级到 ionic 5 或 6 会使这更容易做到，那么这可能是答案的一部分......

4

0 回答 0