如何在Threepenny GUI中更改按钮的布局和位置？

Question

如何在使用threepenny-gui软件包创建的GUI中更改按钮或其他UI元素的大小和位置？

documentation of Graphics.UI.Threepenny.Attributes列出了一些可能有用的功能，例如coords :: WriteAttr Element String。但是，我不知道如何使用它们。具体来说，我不了解String参数应该是什么。

谢谢

Answer 1

我认为我的误解是我的问题实际上与threepenny-gui无关，而是有关HTML的问题。该链接帮助我找到了所需的答案：https://www.geeksforgeeks.org/html-attributes/

以防万一其他人也为此感到挣扎，这条线（主要是）可以解决它：

# set UI.style [("text-align", "center"),("color","red"),("font-size","30px")]

（UI.style中的UI来自：import qualified Graphics.UI.Threepenny as UI）

Answer 2

Threepenny UI元素组合器或多或少直接将其转换为HTML，因此在进行布局时应考虑HTML：

• 您提到的Graphics.UI.Threepenny.Attributes中的属性是HTML属性。在定义初始布局时修改它们通常是通过set完成的。 （顺便说一句，如果您需要参考来查找HTML属性之类的内容，那么MDN不会出错。）

• 对于CSS样式，您可以使用(#.) combinator。

• 关于布局，基本工具是(#+)来嵌套HTML元素，而grid, row and column来安排基于div的网格。