盒子

本节主要介绍 AppStudio 控件库里的盒子控件。

盒子控件

属性

CloudPSS 提供了一套统一的控件属性参数

通用样式

参数名	键值 (key)	单位	备注	类型	描述
缩放比例	$scale		输入控件缩放比例	常量	输入缩放比例数值，控件按照比例放大或者缩小，默认为 1 倍大小
是否隐藏	hidden		选择是否隐藏控件	选择	选择隐藏或者显示，隐藏当前控件，或者显示当前控件，默认为显示状态

样式

参数名	键值 (key)	单位	备注	类型	描述
背景	style/background		样式背景	颜色选择器	点击文字颜色，弹出颜色选择器自定义背景颜色
边框圆角半径	style/border-radius	px、cm、em、rem	输入边框圆角半径	常量	输入边框圆角半径
边框宽度	style/border-width	px、cm、em、rem	输入边框宽度	常量	输入边框宽度
边框颜色	style/border-color		边框颜色	颜色选择器	点击文字颜色，弹出颜色选择器自定义边框颜色
边框类型	style/border-style		边框类型	选择	边框类型分为：默认、无边框、虚线边框、实线边框、双重边框、3D 沟槽边框、3D 脊边框、3D 突出边框、3D 嵌入边框，默认为实线边框

内容

参数名	键值 (key)	单位	备注	类型	描述
文本	innerText		盒子控件文本内容	常量	盒子控件文本内容

文字样式

参数名	键值 (key)	单位	备注	类型	描述
文字字体	style/font-family		选择文字字体	选择	文字字体样式，字体类型包括：默认、宋体、黑体、楷体、微软雅黑、Georgia、Palatino Linotype、Times New Roman、Arial、Arial Black、Verdana、Courier New、Trebuchet MS
文字间距	style/letter-spacing		输入文字间距	常量	文字间距
文字字号	style/font-size		输入文字字号	常量	输入文字字号
文字颜色	style/color		选择文字颜色	颜色选择器	点击文字颜色，弹出颜色选择器自定义颜色
文字粗细	style/font-weight		选择文字粗细	选择	选择文字粗细，默认、100、200、300、400、500、600、700、800、900、1000
水平对齐	style/text-align		选择文字水平对齐方式	选择	水平对齐方式：默认、居中、靠右

事件

参数名	键值 (key)	单位	备注	类型	描述
点击	@click		当点击时触发	函数	采用点击方式触发函数

案例介绍

颜色选择器类型

点击控件属性右侧的颜色选择器，弹出如下显示的界面

颜色选择器

• 界面上方是预设的多种主题颜色，允许用户快速选择所需颜色；

• 中间是自定义颜色选择区允许用户点击选择所需的颜色，右侧是选择颜色透明度；右下角是取色器，点击允许用户在任意界面选取所需颜色

• 最下方显示的是当前已选的颜色；默认为空，显示如下图的斜杠

选择主题色中的透明色

选择透明色

f(x) 模式下的颜色选择器

点击 fx 按钮，在输入框内输入颜色字符串，支持 hex、rgb、hsl 格式，具体参考 颜色码表

f(x) 模式下的透明色

常见问题

什么是事件触发机制？

AppStudio 场景标签页内控件的属性有两种输入模式，一种是 (x) 值输入模式，另一种是 f(x) 表达式输入模式。 值输入模式是通过在属性框内直接输入值来配置控件属性，表达式输入模式则是在属性框内输入由变量/函数资源键名、控件属性键名构成的 math.js 表达式，通过表达式解析器计算出表达式的值来配置控件属性值。详情参见 控件属性的表达式输入

(x) 与 f(x) 的区别

事件是指对控件操作后产生的效果，事件触发使用 HTML 元素事件触发的回调函数结合 math.js 的表达式解析器进行控件属性或者资源的调用。详情参考 事件触发机制