FormItem CSS样式之详解

最新推荐文章于 2024-05-31 09:45:43 发布
最新推荐文章于 2024-05-31 09:45:43 发布
阅读量5.1k 收藏
点赞数
分类专栏： Flex4 文章标签： css flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vipliyaohua/article/details/6152193
版权

 

flex组件的属性很多，不会每一个组件的每一个属性都去研究一遍，在项目中对表单的布局有比较严格的要求，需要组件尽量紧凑，排列的时候使用到了以下几个重点属性

①Form

1.verticalGap:2;控制同一个Form中两个FormItem之间的垂直距离

 

②FormItem

 

1.direction="vertical|horizontal" 控制子项排布为垂直或水平

2.

verticalGap：垂直方向上各子项间的像素数目。默认值取决于组件类；

如果未覆盖类的默认值，则默认值为 6。

 

3.

horizontalGap：水平方向上各子项间的像素数目。默认值取决于组件类；
如果未覆盖类的默认值，则默认值为 8。
4.这个属性找得最辛苦，其控制FormItem的lable和子组件之间的间距
indicatorGap：表单项的标签和子组件之间的像素数目。 默认值为 14.

vipliyaohua
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React项目优化(6)-表单中组织表单元素(FormItem)的三种方案
军火库
08-16 1782
在笔者使用React开发PC端后台管理系统和资金业务系统的过程中，使用最普通，最常见的组件就是表格组件Form及表单组件Table。由于业务比较复杂，导致每一个表单或表格都会有很多元素组成。而系统中又又很多的表单或表格。那么，如何组织表单元素，看似简单，实则对整个项目的开发过程影响重大。合理的表单组织方式，能够减少繁琐的工作量，能够快速的定位问题，处理问题。本文中，笔者结合自己的项目实践，向大家展示三种在复杂表单中组织表单项的方式。1.基于表单及表格元素的组织方式仁者见仁，智者见智。...
CSS 表格样式
天空之外
09-27 640
本节我们来学习表格样式，通过 CSS 中的属性可以设置表格的外观，例如表格边框样式、颜色、间距等。 设置表格边框 之前我们讲 HTML 的使用讲过，在 HTML 中如果要设置表格的边框，可以使用 border 属性。而 CSS 中同样有一个 border 属性可以用来设置边框，上一节我们也有讲到这个属性，所以这里就不详细讲啦。 示例： 将下面这个表格的边框设置成1像素、实线、蓝色： <!DOCTYPE> <html> <head> <meta c
Form FormItem的水平、垂直间距控制
SpallationMetamorph的专栏
10-29 3361
flex组件的属性很多，不会每一个组件的每一个属性都去研究一遍，在项目中对表单的布局有比较严格的要求，需要组件尽量紧凑，排列的时候使用到了以下几个重点属性 ①Form 1.verticalGap:2;控制同一个Form中两个FormItem之间的垂直距离   ②FormItem   1.direction="vertical|horizontal" 控制子项排布为垂直或...
antd表单 Form.Item,Form.List 的自定义数据格式
Realizee的博客
10-23 4463
1. 常用格式 { } 表单内容： <Form> <FormItem name={'name'} lable={'用户'} > <Input placeholder='请输入'/> </FormItem> <FormItem name={'ip'} lable={'IP地址'} > <In.........
实现一个简单的小程序Form表单填写页面
最新发布
m0_54340021的博客
05-31 694
本文介绍了如何使用Vue框架和Uni-app工具开发一个小程序表单填写页面。文章首先概述了表单在移动应用中的重要性，并引导读者通过构建一个简洁实用的表单页面。在HTML模板部分，详细解释了滚动视图、表单容器、表单项和提交按钮的布局和实现。接着，在JavaScript脚本部分，讨论了数据绑定、生命周期钩子和事件处理方法。最后，文章通过SCSS样式定制了表单的视觉表现。文章旨在帮助开发者快速掌握小程序表单的设计和实现，提升用户体验，并鼓励开发者不断学习新技术以满足不断变化的市场需求。
formItem
趟过java，遇见web
12-22 1414
formItem vue
form-item组件封装细讲上(组件库系列~四)
weixin_40719409的博客
05-18 3483
今天我们来聊一聊form表单组件。市面上开源的form表单组件，写法基本上千篇一律，一个form组件内部跟上一大堆的form-item组件，内嵌了select、radio、checkbox之类的这些就不停的需要去写遍历，需要布局的时候写上一堆的class.一个form组件稍微大一点的就朝100-200行甚至更多去了。不方便维护而且看起来头晕，不符合vue的数据驱动视图的概念。基于以上问题遂对form-item组件进行了二次封装，至于为什么不是对form表单进行二次封装，请往下看。
CSS的样式
weixin_68485297的博客
03-27 342
一、文本修饰 ext-decoration: none; 默认值，定义的标准文本， 没有下划线 overline; 设置文本的上划线 ine-through;设置文本的删除线 underline; 设置文本的下划线 ☆a元素是默认就含有下划线 二、垂直对齐（——图片和文本） vertical-alig...
jQuery选择器全集详解
12-04
4. **通用选择器（星号*）**：`*`选择器选择所有元素，如`$('form *')`会选取`form`内的所有元素，并可设置它们的字体颜色，如`$('form *').css('color', '#FF0000')`。 5. **并列选择器**：使用逗号分隔多个选择器...
js下拉菜单生成器dropMenu使用方法详解.docx
01-21
2. **CSS样式** dropMenu的样式可以通过CSS进行自定义，以达到所需的设计效果。以下是一些基本的样式定义： ```css ul,li { list-style: none; margin: 0; padding: 0; } .dropMeun { position: absolute...
python入门到高级全栈工程师培训 第3期 附课件代码
06-07
02 Form组件之详解字段 03 Form组件之常用标签示例 04 Form组件之动态绑定数据 第60章 Django序列化共6课 第61章 01 上节内容回顾 02 上传文件 03 制作上传按钮 04 Form组件上传文件 05 上传相关内容梳理 06 ...
jQuery选择器大全(48个代码片段+21幅图演示).docx
11-05
`$(".item + div")`会选择紧邻`class="item"`元素后的第一个`div`元素，将其文字颜色设为红色：`$(".item + div").css('color', '#FF0000')`。 3. **Prev ~ Siblings选择器**：选取指定元素之后的所有兄弟元素。`$...
小程序-WeUI源码.rar
10-20
- **列表(List)**：提供列表项(List Item)和分割线(List Separator)，方便构建信息展示列表，支持点击事件和滑动操作。 - **加载提示(Loading)**：包含加载动画和提示文字，用于显示数据加载状态。 - **弹出层...
form-item组件封装细讲中(组件库系列~五)
weixin_40719409的博客
05-22 1081
上一篇文章中我们聊到了form-item组件的dom结构处理和异常情况slot的插入处理。我们今天来聊一下关于form-item组件布局的实现和注意事项在实际的开发中，form最常见的应用场景有新增、编辑的提交表单，还有列表的查询表单。这类型的表单在后台系统开发中多如牛毛。而针对这些表单不同的展现形式，我们可能需要在其中花费掉大量的样式布局开发时间，所以组件中期望能够将这些功能全部内聚，通过参数就可以简单的控制。
Form FormItem内组件间的垂直间距控制
weixin_44582077的博客
01-20 5987
前提：Form表单有挺多默认的设置，比如同个表单里面组件间的垂直间距的大小。例子如下： 1.下面是Form表单默认的样式(Form默认组件间的垂直间距是24px) 2.下面修改后组件间的垂直间距，这里你可以随意修改成想要的像素， .ivu-form-item这个类名位置写在style标签之间即可！ ...
antd form-item的手动对齐百分比样式
lixinhua_man的博客
12-26 1241
antd form-item的手动对齐百分比样式
form-item组件封装细讲下(组件库系列~六)
weixin_40719409的博客
05-29 574
在前两篇文章中，我们已经成功地对form-item组件进行了基本的封装，现在可以在项目中进行使用了。然而，在同一个form表单中，不同表单项的label字段长度有很大差别，比如“姓名”和“身份证号码”。通常情况下，我们会根据最长的文字长度来设定整体的，但这种做法效果并不理想。今天，我们来分享一下如何实现自动设置的方法。通过以上的一些操作处理方法，这样我们就做到了对每一个label-width的自定义设置了。
【Ant Design】Form.Item创建自定义表单，实现类似v-model双绑
IT飞牛
09-01 1738
Antd是一个非常强大的UI组件库，里面的Form表单组件也基本能满足我们大多数场景。但是也有需要自定义表单的场景。Vue2里我们使用v-model，结合子组件的model属性，来实现自定义组件的双向绑定。Vue3里我们使用v-model，结合子组件的来实现同样功能。到了React+Antd中，我们采用引用父组件默认传入onChange事件，子组件调用来实现。
element之表单el-form布局
weixin_36352085的博客
04-21 8641
element表单el-form布局 最近表单用的比较多，简单总结一下 行内表单 普通表单 自定义表单 以上两个都是element官网的例子，但并不足以满足业务需求。例如下图： element官方文档里并没有这种布局，那么直接上代码 <el-form label-width="150px"> <el-row align="middle" :gutter="10"> <el-col :span="10"> <el-form-item pro
好看的form表单css样式
09-06
好看的form表单CSS样式可以通过以下几个方面来实现： 1. 字体样式的应用：可以通过CSS的字体样式属性来改变表单元素的字体样式，包括字体族科、字体风格、字体变形、字体加粗、字体大小等。可以根据需要给不同的表单元素设置不同的字体样式，比如按钮、文本框、下拉选择框等。 2. 设置宽高：可以使用CSS的宽度和高度属性来调整表单元素的大小。通过设置适当的宽度和高度，可以使表单元素看起来更加整齐美观。可以给整个表单容器设置宽度和高度，同时也可以给各个表单元素设置宽度和高度。 3. 边框样式：可以使用CSS的边框样式属性来给表单元素添加边框效果，通过调整边框的颜色、粗细和样式，可以改变表单元素的外观。可以给文本框、按钮等表单元素添加边框样式，使其更加突出。 4. 背景样式：可以使用CSS的背景样式属性来给表单元素添加背景效果，包括背景颜色和背景图片。通过设置适当的背景颜色或者背景图片，可以增加表单元素的视觉效果。可以给按钮、文本框等表单元素设置背景颜色或者背景图片，使其更加吸引人。 需要注意的是，以上只是一些常见的CSS样式应用，实际上可以根据具体需求和创意来设计出更加独特和个性化的表单样式。可以通过调整各种CSS属性来实现不同的效果，以达到满足用户需求和提升用户体验的目的。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [表单花样样式](https://blog.csdn.net/weixin_30652879/article/details/97455140)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Form 表单详解：案例、CSS 美化](https://blog.csdn.net/hongshuteng/article/details/127401803)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值