关于Mendix如何写组件的CSS样式

                                                关于Mendix如何写组件的CSS样式

 

      参考文档（Implement Styles | Mendix Documentation）

    想要改变Mendix各个组件的外观，首先我们要先清楚Mendix studio pro的CSS样式文件存放在哪里，首先我们要定位工作台APP-> Style ->Web，在custom-variables.scss文件下可以修改并且定义Mendix所有可供更改组件的样式。

在这里我们可以通过更改样式文件属性值来修改Mendix组件里面的默认可供给值，假如我们想要给组件按钮加一个颜色，我们可以在组件按钮Button的General属性下选择Button Style的值(primary蓝色，success绿色，warning黄色，danger红色)四种颜色，那如果我们想要其他颜色就可以选择在$brand-primary属性这里，修改Mendix系统默认可供选择的颜色。

我们可以更改为黑色，当我们打开组件按钮再次选择primary属性时，按钮颜色就会改为黑色。

不过通过这个方法修改Mendix样式会改变整个系统primary属性值的颜色，如果我们想要修改单一组件的样式的话，就可以通过以下两个方式来完成。

一:可以通过在Mendix单一组件下写Style CSS样式来完成，我们可以在每个组件下点击Appearance通过修改Common的属性值来修改，其中Class是Mendix组件的属性类，我们可以在这里输入我们自己自定义的CSS样式属性类，一般用来自定义组件样式，如果想要修改Mendix组件的基本样式，我们就可以在Style里面直接定义我们想要更改的属性和其对应的值。

在Style这里我们可以自行定义组件文本的大小，背景和颜色，组件控件的排版，按钮的颜色，列表视图，警报和其他各种元素。具体参考（Implement Styles | Mendix Documentation）。

假如我们想要修改text文本框文字的大小值，除了可以在Render mode里选择文本框字体的大小外也可以在Style下面进行自定义操作。第一步：在Style里面写入前端CSS，例如font-size:50px;来修改文本框文字的大小为50px

如果我们想要修改文本框的颜色和字体颜色，就可以在Style里定义text文本框。

background- color:lightblue;color:red;font-size:50px;

二：利用动态属性类Dynamic classes来完成对于组件样式的定义方式，除了在组件Style下编写CSS样式，Mendix也可以通过输入表达式的方式来实现。Dynamic classes是Mendix组件的动态类属性，可用于页面组件的条件可编辑性，组件的条件可见性，文本小部件的内容属性，从而可以让我们根据某些特定的条件以不同的方式定义组件所呈现的样式，主要就是通过写表达式的方法来动态更改组件的样式。

首先要使用Dynamic classes定义组件样式，必须先确保组件包含在一个实体数据视图内。例如按钮组件我们要先将按钮定义进一个实体提供的数据视图里，先创建一个实体user，添加name属性String类型和number属性int类型。

然后在新页面下添加data view数据视图，添加user实体。

这样我们就添加了一个user实体的数据视图。

接着就可以在save按钮上定义Dynamic classes动态类的属性了，Available variables是我们所创建的实体对象，用$符加currentObject表示正确的对象用来调用这个实体和其关联实体的对象。

其中Expression wizard可以选择表达式的具体关联实体的属性，使用斜杠/访问对象的属性或者关联对象的属性，注意:写表达式时不可以输入纯文本，文本需要用单引号括起来。

Variable可以选定我们这个组件关联实体的对象属性，在这里可以手动输入函数表达式和其它表达式来定义组件的样式，比如我们想要通过判断属性值name里面的值为空时动态更改按钮为蓝色，不为空时动态更改为红色，就可以用if语句来执行。

但是在这之前我们得先在Mendix CSS样式里手动添加进我们定义的CSS样式类。那么如何自定义CSS样式文件，得先在Style/web文件夹下创建一个.scss样式文件。

接下来在color.scss样式文件里添加color1和color2两个样式类，并且输入对应的属性值，这里我自定义了两种颜色的变换，注意: .scss文件类名要用.号作为开头。我分别定义了按钮背景颜色background-color，和文字颜色color。

然后我们要在main.scss主题样式文件里导入color.scss文件，目的是为了让项目引用color.scss的样式文件。

最后我们就可以在表达式中用if语句进行判断和用引号加类名的方式，实现动态更改按钮的颜色。当name属性值为空时，按钮出现蓝色，当属性值不为空时，按钮出现红色。

综上就是我们可以在Mendix更改组件样式的两种方法。