跳到主要内容

单选框

本节主要介绍 AppStudio 控件库里的单选框控件。

单选框控件
单选框控件

属性

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

通用样式

参数名键值 (key)单位备注类型描述
是否隐藏hidden选择是否隐藏控件选择选择隐藏或者显示隐藏当前控件,或者显示当前控件,默认为显示状态
透明度style/opacity输入透明度常量输入透明度值,控件按照透明度值变化,范围为0~1 ,默认为 1

样式

参数名键值 (key)单位备注类型描述
布局layout选择控件布局选择垂直或者水平布局,默认为垂直
安静quiet选择是否安静选择选择或者,默认为状态
高度style/--spectrum-picker-m-height输入单选框控件高度常量单选框控件高度

标签样式

参数名键值 (key)单位备注类型描述
文字字号style/--spectrum-global-dimension-font-size-100输入文字字号常量输入文字字号
文字颜色style/--spectrum-alias-label-text-color选择文字颜色颜色选择器点击文字颜色,弹出颜色选择器自定义颜色
文字粗细style/--spectrum-alias-body-text-font-weight选择文字粗细选择选择标签文字粗细,默认、100、200、300、400、500、600、700、800、900、1000

选项文字样式

参数名键值 (key)单位备注类型描述
文字字号style/--spectrum-radio-m-text-size输入文字字号常量输入文字字号
文字颜色style/--spectrum-radio-m-text-color选择文字颜色颜色选择器点击文字颜色,弹出颜色选择器自定义颜色
文字粗细style/--spectrum-radio-m-font-weight选择文字粗细选择选项文字粗细,默认、100、200、300、400、500、600、700、800、900、1000,默认为 400

圆环样式

参数名键值 (key)单位备注类型描述
默认颜色style/--spectrum-radio-m-circle-border-color圆环默认颜色颜色选择器点击默认颜色,弹出颜色选择器自定义圆环默认颜色
按下颜色style/--spectrum-radio-m-circle-border-color-down圆环按下颜色颜色选择器点击按下颜色,弹出颜色选择器自定义圆环按下颜色
悬浮颜色style/--spectrum-radio-m-circle-border-color-hover圆环悬浮颜色颜色选择器点击悬浮颜色,弹出颜色选择器自定义圆环悬浮颜色
选中颜色style/--spectrum-radio-m-circle-border-color-selected圆环选中颜色颜色选择器点击选中颜色,弹出颜色选择器自定义圆环选中颜色
选中按下颜色style/--spectrum-radio-m-emphasized-circle-border-color-selected-down圆环选中颜色颜色选择器点击选中按下颜色,弹出颜色选择器自定义圆环选中按下颜色
选中悬浮颜色style/--spectrum-radio-m-emphasized-circle-border-color-selected-hover圆环选中颜色颜色选择器点击选中悬浮颜色,弹出颜色选择器自定义圆环选中悬浮颜色
外圆直径style/--spectrum-radio-m-circle-diameter圆环外圆直径常量圆环外圆直径
选中内圆直径style/--spectrum-radio-m-circle-dot-size选中内圆直径常量选中内圆直径
未选中圆环宽度style/--spectrum-radio-m-circle-border-size未选中圆环宽度常量未选中圆环宽度

内容

参数名键值 (key)单位备注类型描述
标签label控件内容标签常量单选框控件文字标签
禁用disabled禁用开关开关禁用选择或者,开启后控件禁止点击和交互,默认为
可选项items选择器控件可选项表格表格点击编辑数据,弹出可选项表格进行编辑,上方的图标从左到右依次是: 撤销(Ctrl Z)重做(Ctrl Y)在上方插入行(Ctrl I)在下方插入行(Ctrl Alt I)导入 CSV导出 CSV
value单选框控件内容值常量单选框控件默认值,默认为 item 1

事件

参数名键值 (key)单位备注类型描述
更改@change输入结束时触发事件函数采用更新方式触发,失去焦点后控件的值才会更新

案例介绍

可选项

从左到右,依次是撤销(Ctrl + Z)重做(Ctrl + Y)在上方插入行(Ctrl + I)在下方插入行(Ctrl + Alt + I)删除行(Ctrl + D)导入 CSV导出 CSV

可选项
可选项

典型应用

  1. 创建一个单选框控件,在右侧的属性配置区内给单选框命名为 A

  2. 创建静态资源 asset1,值设置为 item 2

  3. 将输入框 A 的内容/值属性切换到 fx 表达式模式,设置为 $asset1.value

  4. 点击工具栏的预览快捷按钮(或者 Ctrl P),进入预览模式,在预览模式下修改单选框 A 的值

创建单选框控件
创建单选框控件
创建静态资源
创建静态资源
配置单选框属性
配置单选框属性
预览模式
预览模式
典型应用使用详情

接入 FuncStudio 函数的典型应用

  1. 创建一个单选框,在右侧的属性配置区内给单选框命名为 A

  2. 创建函数资源 asset2,选择资源类型为函数

  3. 配置函数资源 asset2,点击选择资源,绑定 ridfunction/Maxwell/demo 的示例函数,示例函数存在两个参数 ab

  4. 鼠标选中单选框 A 的事件/更改属性栏,按下 Ctrl 输入 $asset2.args.a = A.value; $asset2.start()

  5. 点击工具栏的预览快捷按钮(或者 Ctrl P),进入预览模式,在预览模式下修改单选框 A 的值

创建单选框控件
创建单选框控件
创建函数资源
创建函数资源
绑定示例函数
绑定示例函数
示例函数详情
示例函数详情
更改单选框属性
更改单选框属性
预览模式
预览模式
FuncStudio 函数使用详情

常见问题

什么是事件触发机制?

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

(x) 与 f(x) 的区别

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