1. Ant Design PC UI组件 间距/输入框/按钮 快速上手教程

已于 2023-04-04 11:52:36 修改
阅读量177 收藏
点赞数
分类专栏： web应用开发入门教程 文章标签： elementui react html5 web
于 2023-04-02 09:26:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyh320888/article/details/129906957
版权

总览

demo预览地址  https://pre.d8dcloud.com/play/594


 

在前台添加了以下组件

UI组件：

间距组件，按钮组件，输入框组件

前端逻辑组件：

JS函数组件

预览运行效果：

点击按钮时，会在控制台打印出 ”点击了事件处理函数“

教程步骤

点击前台，添加一个间距组件

38a83aabe9044f1cb4f7bcd7b821a916.png

 点击间距组件，切换间距方向为竖向543367b43d95476a8ebde3dc41af82cd.png

点击间距组件，添加 输入组件，按钮组件

78cce207372247c1a65544c777a2cd21.png

 UI组件搭建完成，接下来是添加按钮事件，请看下一篇

demo下载地址 https://www.d8dcloud.com/#/app

 

 多八多IDE注册使用地址 

多八多应用组件库基于Web自带IDE+编译器，打开网页就能开发；个人和企业免费注册和开发，不限应用数量和使用人数；应用免费导出和私有部署；全场景全应用支持，可开发各类应用、小程序、APP等https://www.d8dcloud.com/

小多低代码实战课
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd Button间距
weixin_45725653的博客
03-10 1844
控制Button间距
Ant Design中点击单选按钮后出现输入框
weixin_47461153的博客
07-09 2699
点击点选按钮出现 类似的输入框 {getFieldDecorator('practiceOther')( <Radio.Group onChange={e => this.handleRadioChange(e, 'practiceOther')} > <Radio value={'1'}>每天练习</Radio> <
4. Ant Design PC UI组件 Input输入框事件 快速上手教程
04-04 794
在输入改变事件处理函数中，AI逻辑语句中填入 控制台调试输出 "输入改变事件处理"，点击预览代码，AI将自动生成出JS代码。在失焦事件处理函数中，AI逻辑语句中填入 控制台调试输出 "失焦事件处理"，点击预览代码，AI将自动生成出JS代码。右键点击 输入改变事件处理函数，复制 开发标识，粘贴到 输入框 输入改变事件方法中。右键点击 失焦事件处理函数，复制 开发标识，粘贴到 输入框 失焦事件方法中。选择输入框事件，这里我们添加 一个 输入改变事件，和一个失焦事件。右键点击输入框组件，事件。
input数字区间，前边的大于后边的
lililidahaoren的博客
12-04 2337
当前存量：                        class="input-text" oninput="inputChange(this)" onchange="compare()">                        -                                        class="input-text"  oninput="inp
vue使用Ant design的input输入框,去掉边框和获取焦点时的边框
m0_52948787的博客
12-30 4784
vue使用Ant design的input输入框,去掉边框和获取焦点时的边框 /* 取消 多行文本框 伸缩效果 resize: none; */ /* 取消 多行文本框 边框 border: none; */ textarea.ant-input{ resize: none; border: none; } /* 取消 多行文本框 获取焦点的 边框 效果 */ textarea.ant-input:focus { border: none; box-sh
AntDesign蚂蚁金服Web_PC原型组件.rplib
07-06
Ant Design 源自蚂蚁金服体验技术部的后台产品开发。在中后台产品设计中，通常有很多类似的页面和控件，不同的产品会出现不同的规范和实现，给设计师和工程师带来很多困扰和重复建设，降低企业后台的整体研发效率。...
基于 Ant Design 和 Vue 3 的企业级 UI 组件
05-01
基于 Ant Design 和 Vue 3 的企业级 UI 组件。提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量 Vue 组件。共享 Ant Design of React 设计工具体系。支持环境。现代浏览器。1.x 版本支持 IE 9+（需要 ...
AntDesign3.9Axure组件
06-01
在AntDesign3.9Axure组件中，用户可以找到与AntDesign框架相匹配的组件，如导航栏（Navigation）、栅格系统（Grid）、按钮（Button）、表单元素（Form Elements）等，这些组件都严格按照AntDesign3.9的样式和规范...
AntDesign蚂蚁金服APP移动端原型组件.rplib
07-06
Ant Design 移动端设计规范，一个基于 Preact/React/React Native 的 UI 组件库，是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。 image.png 特性 基于 Ant Design 移动设计规范。 规则化的...
antizer：Ant Design React UI组件的ClojureScript库
02-04
通过Antizer，你可以用ClojureScript的方式来定义和使用Ant Design的样式和功能丰富的组件，如按钮、表格、输入框等，同时保持代码的简洁和可读性。 ### Rum：ClojureScript的React绑定库 在Antizer中，Rum库被...
Ant Design Vue实现div模拟input实现输入框
yangwq的博客
11-12 3013
目录导航目的实现方案H5代码块CSS代码块效果展示 目的 div模拟input实现输入框 实现方案 H5的全局属性contenteditable属性 : 带有contenteditable属性的div作为输入框（div可以根据内容自动调整高度） H5代码块 <div class="search"> <div contenteditable class="inputType...
谷粒商城实战笔记-44-前端基础-Vue-整合ElementUI快速开发/设置模板代码
epitomizelu的专栏
07-22 918
本节在上一节用Vue脚手架创建的工程基础上，整合ElementUI。
vxe-table——实现切换页码时排序状态的回显问题（ant-design+elementUi中table排序不同时回显的bug）——js技能提升
最新发布
yehaocheng520的博客
07-22 503
vxe-table——实现切换页码时排序状态的回显问题（ant-design+elementUi中table排序不同时回显的bug）——js技能提升
vue3大事件管理系统 === 首页 layout & 文章分类页面 -
每天都要努力学习哦~~
07-19 619
组件对外暴露一个方法 open, 基于 open 的参数，初始化表单数据，并判断区分是添加 还是 编辑。需求：只有登录页，可以未授权的时候访问，其他所有页面，都需要先登录再访问。添加 和 编辑，可以共用一个弹层，所以可以将弹层封装成一个组件。el-container 右侧。el-aside 左侧。
el-popover嵌套select弹窗点击实现自定义关闭
徐三岁的博客
07-19 475
也就是说， el-select 的 options 弹框不在 el-popover 弹出框上，点击options 弹框后会触发 popover 弹窗框的关闭条件，因此就会造成选择 el-select 选择器的选项后，外层的 el-popover 弹出框也会关闭。：在 el-popover 弹出框组件中嵌入 el-select 选择器组件后，点击 el-select 选择器选中选项后，不仅 el-select 选择器的选项弹框关闭了，外层 el-popover 组件的弹框也一并关闭了。
Element UI DatePicker选择日期范围区间默认显示前一个月和本月
qq_39047060的博客
07-19 483
选择时间范围时，默认展开当月和上个月。
【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！
Wc&Yd博客
07-19 894
🌟 深入探索HTML5：标签全解析与案例演示！本文带领大家全面了解HTML5的标签用法，从基础结构到新增语义化标签，通过丰富的实例演示，帮助读者掌握网页设计的核心技能。无论是初学者还是进阶者，都能在这篇文章中找到提升自己HTML5技能的宝贵信息。让我们一起构建更美好的网络世界！🚀🌐
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 548
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
html5——CSS列表样式属性
jiuyuexixi的博客
07-16 357
html5——CSS列表样式属性
ant design vue src/core/icons.js 引入svg 不显示
05-28
如果您在使用 Ant Design Vue 时，引入 SVG 图标后发现无法显示，可能是以下原因导致的： 1. 检查 SVG 图标路径是否正确，路径错误可能导致无法正确加载图标。 2. 确保您的 SVG 图标文件内容正确，可以尝试使用其他 SVG 图标文件进行测试。 3. 确认您的 Vue 项目是否正确设置了 SVG Loader。可以在 webpack 配置文件中添加如下代码： ``` { test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/icons')], options: { symbolId: 'icon-[name]' } } ``` 其中，`resolve('src/icons')` 是您存放 SVG 图标的目录，`symbolId` 是指定 SVG Sprite 的 ID。 4. 检查您的 ant design vue 配置文件是否正确设置，可以在 `vue.config.js` 文件中添加如下代码： ``` const path = require('path') function resolve (dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack: config => { config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() } } ``` 其中，`resolve('src/icons')` 是您存放 SVG 图标的目录，`symbolId` 是指定 SVG Sprite 的 ID。 希望这些信息能够帮助您解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值