4. 元件属性与样式
苏苏:楼哥,为什么这个按钮鼠标放上去会变色?为什么这个性别只能选中一个?为什么这个组菜单点了任何一个之后都会变颜色,但只能有一个变颜色。点完再点另外一个,前一个又恢复原样。咦,楼哥,你怎么不说话?
小楼:我想静静……
苏苏:静静?
小楼:别问我静静是谁……
4.1. 元件的样式
在软件界面的右侧中部,是元件的属性与样式功能面板。当我们点中编辑区的元件时,这里就会显示该元件的属性与样式。(图33)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=dae85337163853438ccf8729a312b01f/c3b216338744ebf8f58ec464dff9d72a6259a7c5.jpg)
(图33)
元件的样式包含的内容都一样,不过其中有个别元件的样式是禁止修改的。这里以矩形和热区举例说明(图34)。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=369e85535543fbf2c52ca62b807fca1e/a4e19d44ebf81a4ca1cd4c92d12a6059272da6c5.jpg)
(图34)
矩形中只有箭头样式是灰色的状态,说明它是不可设置的;而热区大部分的样式设置都是灰色不可编辑的。
4.2. 元件的属性
元件的属性并不是每个元件都一样,他们有的相同,有的部分相同或者完全不同。
我们经常在网页上看到的鼠标进入按钮变色的效果,就可以通过设置属性来实现。只需要【属性】-【交互样式】-【鼠标悬停】中去设置鼠标移入时的另一种样式或者另一个图片就可以了。(图35)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=e1fac628fdf2b211e42e8546fa816511/2f96f1f81a4c510f283b42416659252dd62aa5c5.jpg)
(图35)
这里以按钮形状为例,我们先拖入一个按钮形状,然后把【鼠标悬停】交互样式中【填充颜色】设置为要改变的颜色。当然,也能根据需求同时设置文字的颜色为有反差的颜色。比如把形状颜色设置为蓝色,文字设置为白色。那么,因为默认勾选了【预览】,编辑区里面的按钮就变成了鼠标移入时的样子。(图36)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=a1816e99b4119313c743ffb855390c10/432a004c510fd9f925e8f532232dd42a2a34a4c5.jpg)
(图36)
点击【确定】以后,按钮颜色又变成默认的颜色。不过,这时在按钮上出现了一个黑白相间的小方块,鼠标移入小方块就会显示我们设置好的效果。同时,在属性中的【鼠标悬停】的后面也出现了一些信息,不过没什么用。
完成上面的编辑之后,我们就可以通过F5预览或者F8生成来查看效果。当然也能点快捷功能栏里面的快捷按钮 ,或者从菜单里面选择。(图37)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=0830277a9513b07ebdbd50003cd69113/b29e4b0fd9f9d72a939bb046d22a2834369bbbc5.jpg)
(图37)
苏苏:楼哥,为什么这个按钮鼠标放上去会变色?为什么这个性别只能选中一个?为什么这个组菜单点了任何一个之后都会变颜色,但只能有一个变颜色。点完再点另外一个,前一个又恢复原样。咦,楼哥,你怎么不说话?
小楼:我想静静……
苏苏:静静?
小楼:别问我静静是谁……
4.1. 元件的样式
在软件界面的右侧中部,是元件的属性与样式功能面板。当我们点中编辑区的元件时,这里就会显示该元件的属性与样式。(图33)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=dae85337163853438ccf8729a312b01f/c3b216338744ebf8f58ec464dff9d72a6259a7c5.jpg)
(图33)
元件的样式包含的内容都一样,不过其中有个别元件的样式是禁止修改的。这里以矩形和热区举例说明(图34)。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=369e85535543fbf2c52ca62b807fca1e/a4e19d44ebf81a4ca1cd4c92d12a6059272da6c5.jpg)
(图34)
矩形中只有箭头样式是灰色的状态,说明它是不可设置的;而热区大部分的样式设置都是灰色不可编辑的。
4.2. 元件的属性
元件的属性并不是每个元件都一样,他们有的相同,有的部分相同或者完全不同。
我们经常在网页上看到的鼠标进入按钮变色的效果,就可以通过设置属性来实现。只需要【属性】-【交互样式】-【鼠标悬停】中去设置鼠标移入时的另一种样式或者另一个图片就可以了。(图35)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=e1fac628fdf2b211e42e8546fa816511/2f96f1f81a4c510f283b42416659252dd62aa5c5.jpg)
(图35)
这里以按钮形状为例,我们先拖入一个按钮形状,然后把【鼠标悬停】交互样式中【填充颜色】设置为要改变的颜色。当然,也能根据需求同时设置文字的颜色为有反差的颜色。比如把形状颜色设置为蓝色,文字设置为白色。那么,因为默认勾选了【预览】,编辑区里面的按钮就变成了鼠标移入时的样子。(图36)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=a1816e99b4119313c743ffb855390c10/432a004c510fd9f925e8f532232dd42a2a34a4c5.jpg)
(图36)
点击【确定】以后,按钮颜色又变成默认的颜色。不过,这时在按钮上出现了一个黑白相间的小方块,鼠标移入小方块就会显示我们设置好的效果。同时,在属性中的【鼠标悬停】的后面也出现了一些信息,不过没什么用。
完成上面的编辑之后,我们就可以通过F5预览或者F8生成来查看效果。当然也能点快捷功能栏里面的快捷按钮 ,或者从菜单里面选择。(图37)
![](http://imgsrc.baidu.com/forum/w%3D580/sign=0830277a9513b07ebdbd50003cd69113/b29e4b0fd9f9d72a939bb046d22a2834369bbbc5.jpg)
(图37)