界面状态

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

如果你想禁止用户调用 API ,可以在元素上添加一个 disabled 类 .. 这里我们在这个表单里的提交按钮上 .. 添加一个 disabled .. 保存 .. 现在,我们再点击提交按钮的时候 .. 就不会触发执行 api 去发送请求了 ..

去掉 disabled ... 再看一下 loading 这个状态 .. 打开 Elements 这个选项卡 .. 找到 form 这个元素 .. 在提交这个表单的时候,会向后端服务发送请求 ... 这个时候会在这个元素上添加一个 loading 类 ..

输入标题 ... 内容 ... 然后点击 提交 按钮 .. form 元素上会多出一个 loading 类 .. 在表单上会显示一个正在加载的动态的小图标 ..

请求成功以后,会去掉元素上的 loading 类 .. 恢复到正常的状态 .. 我们可以去定义这个 loading 类应用的位置 .. 比如,我不想把它放在这个 form 元素上 .. 你可能会有一个工具栏,在这个工具栏上去显示这个正在加载的图标 ..

这里我在表单元素的外面 .. . 添加一块内容 .. div.ui.segment ... 里面放点文字 ... 下面我想在提交表单的时候,在这个元素上应用一个 loading ..

在这个 api 的配置对象里 .. 添加一个 stateContext 属性 .. 它的值就是要应用状态类的元素 .. 这里设置成 .ui.segment ..

保存 .. 点击 提交 按钮 .. 你会发现,这里的 loading 状态会出现在我们后添加的这块内容上 ..

api 请求出现问题的时候,会在元素上添加一个 error 类 .. 这里我先在这个表单元素的里面,添加一个错误信息 ... div.ui.error.message .. 这个信息只有在表单元素上有 error 这个类的时候显示 ..

这里我去掉 api 里的身份验证 .. 这样会让这个 api 请求失败 ... 保存 ... 点击 提交 ... 请求出现问题 .. 在表单的上面会显示一个错误信息 .. 这个错误信息会在一段时间以后自动消失 ..

这个消失的时间,可以在 errorDuration 这个属性里定义一下 .. . 添加一个 errorDuration .. 把它的值设置成 10000 .. 意思是让错误信息显示 10 秒的时间 .. 保存 ..

点击 提交 .. 会出现错误信息 .. 这个错误信息现在会在这里显示 10 秒钟的时间 ..

界面状态《 Semantic UI 应用接口 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点