elementUI 学习- Layout布局 与UI 设定

最新推荐文章于 2024-07-16 10:19:54 发布
最新推荐文章于 2024-07-16 10:19:54 发布
阅读量8.3k 收藏 5
点赞数 3
分类专栏： Vue.js elementUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhy2199/article/details/81945109
版权
本文详细介绍了ElementUI的Layout布局，包括分栏、间距、漂移、对齐方式和响应式布局的设置。此外，还讲解了颜色与字体、ICON图标、Button图标的各种样式和功能，以及Radio单选框和CheckBox的用法，包括禁用状态、单选框组和按钮组的实现。
摘要由CSDN通过智能技术生成

Layout布局

1.创建布局

通过Col组件的:span属性调整Layout布局，分为24栏。

el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>

2.分栏间隔

通过Row组件的:gutter属性来调整布局之间的宽度。

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

3.分栏漂移

通过Col组件的:offset属性调整栅格的偏移位置（每次1格/24格）。

<el-row :gutter="20">
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

4.对齐方式

通过Row组件的type="flex"启动flex布局，再通过Row组件的justify属性调整排版方式，属性值分别有

  1. start 居前（默认）
  2. center 居中
  3. end 居后
  4. space-between 分布自适应（两边–中间，两边没有空隙）
  5. around （中间–两边，两边会有空隙）
<el-row type="flex" class="row-bg" justify="center">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"
最低0.47元/天 解锁文章
lhy2199
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 6877
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
element-ui 网格_UI备忘单：列表与网格
weixin_26732881的博客
08-03 1400
qt ui网格布局 重点 (Top highlight)Grids or lists? That is the question we will look at in this cheat sheet. While they can be used anywhere in your site, we are going to look primarily at search results, ca...
element控件之间间距太大问题
qq3163566的博客
10-11 4181
减小控件之间的间距 style="float:left" ，float:right，等等，可以使某个控件居左显示 margin-top，margin-bottom，margin-left，margin-right可以控制控件之间的间距，element的控件之间间距较大，可以将这些值设置成负数来缩小间距 <el-row :span="24" style="margin-bottom: -5%;"> ...
elementUI中radio的相关使用
ME_GIRL的博客
04-15 2645
elementUI中radio的相关使用 radio的使用 change：绑定值变化时触发的事件 <template> <div style="padding:20px;"> <el-card> <el-radio v-model="radio" label="1">选择1</el-radio> <el-radio v-model="radio" label="2">选择2</el-radi
element单选框组el-radio竖向排列 垂直排列
最新发布
XiaYeTende的博客
07-16 679
【代码】element单选框组el-radio竖向排列 垂直排列。
RadioButton间距问题
斗的专栏
01-13 3328
在代码中设置RadioButton 的间距的问题解决 一定要用RadioGroup.LayoutParams 不能用别的代替不然间距设置不上RadioGroup.LayoutParams layoutParams=new RadioGroup.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT); la
vue两radio间距_vue常见面试题（1）
weixin_39733821的博客
01-26 1358
1、v-show 与 v-if 有什么区别？v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。所以，v-if 适用于在运...
文字位于RadioButton后，如何调整间距？
wo的地盘我做主！
09-04 3346
当文字位于RadioButton后时,调整文字与RadioButton的间距： 方法1. android:id="@+id/rb1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingLeft="10dip" android:tex
vue项目中所使用的element-UI / echarts
Stephy_Yy
12-15 2781
1.登录页面 < el-form > 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 pro...
elementui 展示列表模板_二、vue＋ElementUI开发后台管理模板—布局
weixin_33423874的博客
01-26 2010
0、写在前面关于布局：我们常见的后台管理页面结构一般有下图中显示的三种，如果把Tabs(导航的多标签显示)、Crumbs(面包屑)、Content(页面内容)和Footer(底部)当做中间区域视为一块整体，可以看到主要的区别就是Menu(菜单栏)位置的区别，待会我们就根据这些来设立vuex(vuex官网)的布局状态值，主要考虑以下两点：(1)菜单栏的位置；(2)设置是否需要该模块，包括Tabs、C...
流式布局，竖排RadioButton
11-23
竖排RadioButton，多行单选，自适应长度
RadioButton文字按钮间距设置，按钮在文字右端显示，RadioButton 右端对齐
llllll_iinn的博客
11-28 1422
①xml文件对控件设置两个参数： android:layoutDirection=“rtl” android:textDirection=“ltr” ②右端选项圆圈 对齐 相应设置radiobutton控件宽度即可 android:layout_width=“match_parent” 或者给一个定值可以控制其间距， RadioButton属性将 android:paddingleft设置上就可以了 ...
el-radio-group 换行重叠jie
weixin_46136687的博客
04-19 1414
项目中遇到用el-radio-group实现单选功能，但是单选数据量比较多，一行放不下，自动换行，但是由于修改了尺寸，导致换行后数据重叠。通过修改.el-radio-button__inner, .el-radio-group的line-height解决。
【RadioButton】亲测已解决RadioButton设置Margin间距
热门推荐
天。朝程序猿的专栏
03-17 1万+
出自：http://stackoverflow.com/questions/7905885/margin-set-programmatically-on-radiobutton-not-applied?answertab=active#tab-top 情景：今天朋友问我，他在RadioGroup下动态添加的RadioButton不能设置间距，试了很多种方案也是不行。 以下代码与我的写的
自定义elemetui中el-radio 的样式
User_XuKang的博客
03-09 2563
默认的样子 自己修改的样式 代码如下 <template> <div class="placeOrder"> <el-radio-group v-model="radio" size="small"> <el-radio label="1" border>备选项1</el-radio> <el-radio label="2" border>备选项2</el-radio> </el-rad
【VUE】Vue3+Element Plus动态间距处理
ruisasaki的博客
04-09 2044
关键字: [间距调整、间隔调整、表单间距调整、动态间距调整、并排间隔处理、单排间隔处理...]
Element ui 组件库 使用技巧。
i_Satan的博客
04-21 7150
el-radio组件 单选框取消选中。 el-radio 单选框组件默认是不能取消选中的. 解决办法: 我们可以给他添加 click事件,把 label 值 传入点击事件,然后每次点击的时候去判断 label 和 radio 的值是否相同.如果相同 就置为空,如果不同,就给 radio 赋值. 参考文章@官尔 方法一: <el-radio-group v-model="radio2"> <el-radio @click.native.prevent="clickitem(3
我要使用react-grid-layout，来实现一个类似于Tab布局的组件，每一个Tab页里面是一个react-grid-layout布局，应该怎么做？
02-06
你可以使用 react-tabs 来实现 Tab 布局，然后在每个 Tab 页中使用 react-grid-layout 来布局。 首先，你需要安装 react-tabs 和 react-grid-layout。 ```bash npm install react-tabs react-grid-layout ``` 然后你可以在你的代码中使用 react-tabs 和 react-grid-layout。 首先，你需要引入这两个组件： ```javascript import { Tabs, TabList, Tab, TabPanel } from 'react-tabs'; import { Responsive, WidthProvider } from 'react-grid-layout'; const ResponsiveReactGridLayout = WidthProvider(Responsive); ``` 然后你可以在你的组件中使用这些组件来实现 Tab 布局。 示例代码如下： ```jsx import React from 'react'; import { Tabs, TabList, Tab, TabPanel } from 'react-tabs'; import { Responsive, WidthProvider } from 'react-grid-layout'; const ResponsiveReactGridLayout = WidthProvider(Responsive); const MyTabs = () => { return ( <Tabs> <TabList> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> </TabList> <TabPanel> <ResponsiveReactGridLayout> {/* 这里是 react-grid-layout 的布局代码 */} </ResponsiveReactGridLayout> </TabPanel> <TabPanel> <ResponsiveReactGridLayout> {/* 这里是 react-grid-layout 的布局代码 */} </ResponsiveReactGridLayout> </TabPanel> </Tabs> ); }; export default MyTabs; ``` 在每个 TabPanel 中使用 react-grid-layout 即可实现每个 Tab 页中都使用 react-grid-layout 布局。 希望这对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值