跳到主要内容

开关

本节主要介绍 AppStudio 控件库里的开关控件。

开关控件

属性

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

通用样式

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

样式

参数名	键值 (key)	单位	备注	类型	描述
文字字体	`style/font-family`		选择文字字体	选择	标签文字字体样式，字体类型包括：默认、宋体、黑体、楷体、微软雅黑、Georgia、Palatino Linotype、Times New Roman、Arial、Arial Black、Verdana、Courier New、Trebuchet MS
布局	`layout`		选择控件布局	选择	垂直或者水平布局，默认为垂直

标签样式

参数名	键值 (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-switch-m-text-size`		输入文字字号	常量	输入文字字号
默认颜色	`style/--spectrum-switch-m-text-color`		开关默认颜色	颜色选择器	点击默认颜色，弹出颜色选择器自定义开关默认颜色
按下颜色	`style/--spectrum-switch-m-text-color-down`		开关按下颜色	颜色选择器	点击按下颜色，弹出颜色选择器自定义开关按下颜色
悬浮颜色	`style/--spectrum-switch-m-text-color-hover`		开关悬浮颜色	颜色选择器	点击悬浮颜色，弹出颜色选择器自定义开关悬浮颜色

开关样式

参数名	键值 (key)	单位	备注	类型	描述
假值导轨颜色	`style/--spectrum-switch-m-track-color`		假值导轨颜色	颜色选择器	点击悬浮颜色，弹出颜色选择器自定义假值导轨颜色
真值导轨颜色	`style/--spectrum-switch-m-emphasized-track-color-selected`		真值导轨颜色	颜色选择器	点击悬浮颜色，弹出颜色选择器自定义真值导轨颜色
假值导轨交互颜色	`style/--spectrum-switch-m-emphasized-track-color-selected-hover`		假值导轨交互颜色	颜色选择器	点击悬浮颜色，弹出颜色选择器自定义假值导轨交互颜色

内容

参数名	键值 (key)	单位	备注	类型	描述
标签	`label`		内容标签	常量	开关控件文字标签
禁用	`disabled`		禁用开关	开关	禁用选择开或者关，开启后控件禁止点击和交互，默认为关
真值标签	`trueText`		真值标签	常量	真值标签
假值标签	`falseText`		假值标签	常量	假值标签
值	`value`		开关控件值	开关	开关控件默认值，默认为关

事件

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

案例介绍

典型应用

创建一个开关控件，在右侧的属性配置区内给开关命名为 A
创建静态资源 asset1，值设置为 false
将输入框 A 的内容/值属性切换到 fx 表达式模式，设置为 $asset1.value
点击工具栏的预览快捷按钮（或者 Ctrl P），进入预览模式，在预览模式下修改开关 A 的值

创建开关控件

创建静态资源

配置开关属性

预览模式

典型应用使用详情

查看 AppStudio 应用工坊快速入门

接入 FuncStudio 函数的典型应用

创建一个开关，在右侧的属性配置区内给开关命名为 A
创建函数资源 asset2，选择资源类型为函数
配置函数资源 asset2，点击选择资源，绑定 rid 为 function/Maxwell/demo 的示例函数，示例函数存在一个参数 a
鼠标选中开关 A 的事件/更改属性栏，按下 Ctrl 输入 $asset2.args.a = A.value; $asset2.start()
点击工具栏的预览快捷按钮（或者 Ctrl P），进入预览模式，在预览模式下修改开关 A 的值

创建开关控件

创建函数资源

绑定示例函数

示例函数详情

更改开关属性

预览模式

FuncStudio 函数使用详情

查看 FuncStudio 函数工坊使用指南

常见问题

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

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

属性
案例介绍
- 典型应用
- 接入 FuncStudio 函数的典型应用
常见问题