如何在Button中将文字换行并在Google App Maker中单击更改按钮的颜色？

Question

多年没有编码，上周开始与Google App Maker一起使用。如标题所示，我有几个问题。

1. 我正在尝试确定是否有一种方法可以在单击时动态更改按钮的颜色。现在，我将按钮的启用状态更改为单击时的false，并使用CSS样式将禁用的按钮的颜色更改为灰色。有没有不禁用按钮就可以做到这一点的方法？

2. 是否可以将文本包装在按钮中？现在，我正在使用正确样式的字体在按钮上覆盖一个标签，但是理想情况下希望该文本来自按钮，因为标签所占的空间不可点击。

在此先感谢您的帮助！

Answer 1

在页面上添加一些行或全局样式 这应该可以让您换行。

.app-Button {
  white-space: pre-wrap;
}

假设您要在数据源中将布尔值更改为“ true”时将按钮更改为蓝色。

为您的样式添加一个类

.blue{
  background: blue;
}

然后选择按钮，然后在属性编辑器>“显示”>“样式”中，单击下拉列表并选择“绑定”

将绑定设置为

=@datasource.item.**YourBooleanItem** === true? ['blue']:[]

Answer 2

澄清有两个步骤

1. 定义CSS类
2. 将类添加到的“样式”属性中 您的小部件。

上面的答案使用“绑定”，但也意味着您必须拥有一个可能不需要的具有此绑定的项目。

我希望活动状态下的“十进制”按钮为橙色。因此，在页面上，我创建了DecimalActive属性。我使用onAttach事件将此属性设置为false。

我创建了一个名为Orange和Normal的CSS类（位于页面本地） .orange {background：orange}; .Normal {background：white};

然后是我的onClick

onClick(widget,event)
{
     widget.root.properties.DecimalActive = !widget.root.properties.DecimalActive;
     widget.styles = widget.root.properties.DecimalActive ? ['Orange'] : ['White'];
}

面临的挑战是弄清楚AppMaker想要哪种样式[]。我认为它不会将应用样式放入此数组中。至少当我console.log（JSON.stringify（widget.styles）;

我已验证这确实有效（2019年12月） 我认为这个答案更清楚，如果有人想绑定它的颜色变化，他们仍然可以。