跳到主要内容

超链接

本节主要介绍 AppStudio 控件库里的超链接控件。

超链接控件

属性

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

通用样式

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

样式

参数名	键值 (key)	单位	备注	类型	描述
大小	`size`		选择样式大小	选择	样式大小：S、M、L、XL，默认为 M
下划线	`attribute/quiet`		下划线开关	开关	默认为否，不显示下划线
背景	`attribute/over-background`		背景开关	开关	默认为否

文本样式

参数名	键值 (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/--spectrum-link-primary-m-text-color`		文本默认颜色	颜色选择器	点击默认颜色，弹出颜色选择器自定义文本默认颜色
按下颜色	`style/--spectrum-link-primary-m-text-color-down`		文本按下颜色	颜色选择器	点击按下颜色，弹出颜色选择器自定义文本按下颜色
悬浮颜色	`style/--spectrum-link-primary-m-text-color-hover`		文本悬浮颜色	颜色选择器	点击悬浮颜色，弹出颜色选择器自定义文本悬浮颜色
文字粗细	`style/font-weight`		选择文字粗细	选择	选择标签文字粗细，默认、100、200、300、400、500、600、700、800、900、1000

内容

参数名	键值 (key)	单位	备注	类型	描述
文本	`innerText`		控件文本内容	常量	按钮控件文本内容，默认为：Click Me!
链接	`href`		控件链接	常量	按钮控件链接
目标	`target`		超链接	常量	超链接打开的位置：`_blank` 表示在新窗口打开；`self` 表示在当前窗口打开；默认为 `_blank`
禁用	`disabled`		禁用开关	开关	禁用选择开或者关，开启后控件禁止点击和交互，默认为关

事件

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

案例介绍

跳转链接到 CloudPSS 首页

创建一个超链接控件，在右侧的属性配置区内给超链接命名为 A
鼠标选中超链接 A 的内容/链接属性栏，输入 https://www.cloudpss.net
点击工具栏的预览快捷超链接(或者 Ctrl + P )，进入预览模式，点击超链接即可跳转到 CloudPSS 首页

创建超链接控件

配置超链接属性

预览模式

常见问题

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

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

属性
案例介绍
- 跳转链接到 CloudPSS 首页
常见问题