问题标签 [ion-grid]

我在“离子幻灯片”中的 ngx-Charts 的响应性方面遇到问题，或者更准确地说，是位于“离子幻灯片”中的“离子网格”中的 ngx-Chart。

为了使图表具有响应性，我发现了两条规则。有人说，你不应该在 ngx-Chart 中使用“view”参数。第二个说，周围/父标签应该有一个大小。如果两者都为真，则图表应适应父级的大小。

我什至让它在网格内工作（响应式） - “通常”页面上的网格，但我无法让它在幻灯片内的网格内工作（响应式）。

请在 GitHub https://github.com/Joey73/ionic-ngx-charts.git上查看我的示例项目（页面：幻灯片中的树图和树图）。

treemap-in-slide.page.html:

treemap-in-slide.page.scss

在离子幻灯片之外，图表（即使它们在离子网格中）是响应式的。

我该怎么做才能使位于离子滑道中的离子网格内的 ngx-chart 响应？

我正在实现一个响应式网格，就像您在图像中看到的那样：

我知道可以更改 Ionic 中列的顺序，但是是否可以对行执行相同的操作？

例如，目前行的顺序是红黄绿。我希望它是大屏幕的绿色、红色和黄色。那可能吗？类似于offset-*orpush-*和pull-*但用于行的东西。

或者您会尝试找到更好的方法吗？也许是另一种使用列的结构，我们知道可以对其进行排序。

现在，这是我的代码：

我想 col-8 扩展一个不居中的文本：

但是图像 显示所有文本中心我想要第一列保留2和8中心和2最后一个，

我正在尝试创建一个带有 5 个按钮/图标的页脚。实际上我正在尝试复制一个选项卡，但没有使用该功能。有足够的空间容纳 5 个带有 teir 标签的图标，但是，由于某种原因，在 Android 中，最后一个图标会跳到下一行。我一直在尝试使用宽度和尺寸，但无法获得所需的结果。

有什么建议吗？

长话短说：我希望在 Android 中，页脚将像在 Ios 中一样显示

谢谢

编辑：当我翻译成俄语（较长的单词）并使用 nowrap 时，最后一个图标从屏幕上消失了。我试图减小标签的大小，但仍然没有居中。它很烦人，因为我现在很合适，正如它在 Ios 中看到的那样：

编辑 2： 在模拟器中看到它并且使用您的正确工具没问题。然而在俄文版的手机仍然远离屏幕，并且在西班牙文中没有居中，左边比右边有更多的空间。（https://i.stack.imgur.com/Y377b.jpg）

几个月以来我一直在测试 angular + ionic，并且我使用了很多<ion-grid>. 但是由于我正在做一个可以在桌面和移动设备上使用的应用程序，所以有时我需要非常不同的布局，而且我发现有时使用 ion-grid组件的 flexbox 方法很难实现这一点。

有没有办法在 ionic 内部使用 CSS 网格（ https://css-tricks.com/snippets/css/complete-guide-grid/ ）？这将使一些布局更容易。

这是否由 Ionic 直接支持？或者这是否需要我直接在 CSS 中制作？Ionic 不直接支持它的缺点是什么？

我在离子和角度方面很新。我从一个二维数组和两个按钮“下一列”和“下一行”动态地制作了一个网格。

我想要做的是在网格中“导航”，当我单击从第一行的第一列开始的相应按钮时，将背景颜色设置为下一列或下一行。例子：

从所有 div 'no-color' 开始。单击第 1 行中的下一行按钮 div 1 设置类“ClassColor”，其余所有“无颜色”。单击第 2 行中的下一个 div 按钮 div 1 设置类 'ClassColor' ，其余的都是 'no-color'。单击第 2 行中的下一行按钮 div 2 设置类“ClassColor”，其余所有“无颜色”。等等等等

使用离子/角度实现它的最佳方法是什么？我想我可以在 ngfor 中设置一个 id 属性，然后通过 id 设置类，document.getElementById(id).className = "ClassColor"; 但我相信有更好的方法。

我正在 Ionic 中开发一个需要某些元素转换的应用程序。在这种情况下，特别是我有一个两列的页面布局，一列大小为 8，一列大小为 4。当单击列大小为 4 的“全部显示”按钮时，我必须显示有关其中内容的更多数据。

我的客户想要的是将 col 大小 4 列的宽度更改为大小 12，同时隐藏 col 大小 8 列。

所以基本上我的问题是如何将 col 大小 4 变为 12 并动画列增长？

我在下面的图片中绘制了我的页面布局。先感谢您！

初始布局

更改布局

这是一个简单的网格：

我想创建一个宽度=高度的完美正方形。宽度取决于页面的视图宽度。我使用 ion-grid 作为我的自定义组件的根。如何获得离子栅的高度？

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

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

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

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

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

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

请关注粉红色的部分，因为你可以看到 ion-col 溢出了粉红色的 div。我希望所有项目都在其中并相应地设置高度宽度，它们不应该溢出父项，每行包含 3 个项目，应该有 5 行这是目标。