appsmith的使用

在上一节,我们已经在appsmith中创建了一个项目,今天来玩一玩appsmith中组件中的输入框怎么用?

这里是输入框的属性面板,先介绍一下它里面所有的属性和事件
在这里插入图片描述
Content里是内容的所有的数据与事件,Style里可以调整页面的样式

Data type是输入框的类型,可以为文本类,数字类,多行文本,密码类,邮箱类等
Default value是输入框的值,下文中介绍
Text是输入框的名称,默认为Label
Position是输入框名称的位置
Required是必填项,开启之后输入框的值为必填,或者也可以绑定js自己去定义
Max characters是最大的字节
Regex是校验规则,可以书写正则表达式对输入的内容进行限制
Valid是输入框非空的要求
Error message是不满足Valid的提示信息
Spellcheck是拼写检查
Tooltip是输入悬浮在输入框名称时的信息
Placeholder是输入前文本框的提示信息
Visible是可见性,默认为true,发布时可以看到该组件,如果设置为false,发布时就看不到该组件了
Disabled是禁用,默认为false,如果设置为true,表示该组件不可编辑
Animate loading是动画加载
Auto Focus是自动聚焦,默认为false, 当设置为true时,页面刚刷新焦点会聚焦到该输入框
Height时输入框的值

事件
OnTextChanged 表示文本变化时可以触发的事件
OnFocus表示聚焦时可以触发的事件
OnBlur表示失焦的时候触发的事件
OnSubmit表示提交时触发的事件

数据绑定的方式
(1)直接书写值
在这里插入图片描述

(2)绑定js中的变量
在这里插入图片描述
js中的内容
在这里插入图片描述
(3)调用js中的方法,return一个值
在这里插入图片描述
js中这么写
在这里插入图片描述
(4)可以绑定数据库直接取数据中的值
在这里插入图片描述
query中这么写
在这里插入图片描述
今天是持续写作的第 23 / 200 天。可以点赞、评论、收藏啦。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值