Question

在滚动条内部，我想要一个垂直的按钮列表（例如，x，y，z），每个按钮后面有5个字段。按下按钮时，我希望其中一个字段从关闭切换为开启。

{X}[0][0][0][0][0]

{Y}[1][0][0][0][0]

{Z}[1][1][1][1][0]

如何设置按钮（X，Y，Z）的大小，以便在同一行上有多个元素？

当前按钮代码，取自enyo教程：

{kind: "Button", caption: "X", onclick: "buttonClick", className: "enyo-button-dark"}

Answer 1

马丁的回答是正确的。将所有内容安排在HFlexBox内并使用Flex。也就是说，如果您希望按钮的宽度随容器的宽度增长。或者，您可以使用CSS将样式应用于按钮。 e.g：

{kind: "Button", style: "width: 250px; height: 60px;", ...

或在按钮中添加一个类并以这种方式应用样式。

Answer 2

要使按钮保持固定大小，但允许其他元素填充剩余空间，请明确设置按钮的宽度，并使用flex值设置其他元素的宽度。

{kind: enyo.HFlexBox, components:[
    {kind: enyo.Button, style: "width:96px"},
    {content:"Field 1", flex:1},
    {content:"Field 2", flex:1},
    {content:"Field 3", flex:1},
    {content:"Field 4", flex:1},
    {content:"Field 5", flex:1},
]},

通过这种方式，按钮不会调整大小，但其他列将始终均匀地填充剩余空间。

如何在webos-enyo中指定按钮大小？

2 个答案: