【Ant Design Vue】Grid栅格组件用法

最新推荐文章于 2024-06-12 11:57:47 发布
最新推荐文章于 2024-06-12 11:57:47 发布
阅读量5.8k 收藏 18
点赞数 4
分类专栏： 前端 html 文章标签： npm node.js 前端
原文链接：https://blog.csdn.net/iiiliuyang/article/details/121723527
版权
前端 同时被 2 个专栏收录
33 篇文章 5 订阅
订阅专栏
html
33 篇文章 0 订阅
订阅专栏

这篇文章来介绍Ant中的Grid栅格，提一句，栅格是把横向区域等分为24份。划分之后的信息块称为盒子，每个盒子可以有多个区域组成（同一行的所有盒子的栅格加起来是24），建议横向排列的盒子数量最多四个，最少一个。

基础栅格

先来看一个基本的例子：

<a-row>
  <a-col :span="12">
    <div class="grid-content bg-blue-light">
      <span style="color: white;">col-12</span>
    </div>
  </a-col>
  <a-col :span="12">
    <div class="grid-content bg-blue">
      <span style="color: white;">col-12</span>
    </div>
  </a-col>
</a-row>
<a-row>
  <a-col :span="8">
    <div class="grid-content bg-blue-light">
      <span style="color: white;">col-8</span>
    </div>
  </a-col>
  <a-col :span="8">
    <div class="grid-content bg-blue">
      <span style="color: white;">col-8</span>
    </div>
  </a-col>
  <a-col :span="8">
    <div class="grid-content bg-blue-light">
      <span style="color: white;">col-8</span>
    </div>
  </a-col>
</a-row>
<a-row>
  <a-col :span="6">
    <div class="grid-content bg-blue-light">
      <span style="color: white;">col-6</span>
    </div>
  </a-col>
  <a-col :span="6">
    <div class="grid-content bg-blue">
      <span style="color: white;">col-6</span>
    </div>
  </a-col>
  <a-col :span="6">
    <div class="grid-content bg-blue-light">
      <span style="color: white;">col-6</span>
    </div>
  </a-col>
  <a-col :span="6">
    <div class="grid-content bg-blue">
      <span style="color: white;">col-6</span>
    </div>
  </a-col>
</a-row>

<style scoped>
.bg-blue {
  background-color: #00a0e9;
}

.bg-blue-light {
  background-color: #43bdf5;
}

.grid-content {
  min-height: 36px;
  margin-top: 8px;
  margin-bottom: 8px;
  text-align: center;
  padding: 16px 0;

}
</style>

运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Xm5qtD8-1638630491522)(C:UserslenovoAppDataRoamingTypora ypora-user-imagesimage-20211204182227973.png)]

每个<a-row>代表一行，每个<a-col>代表一列，<a-col>中的:span="6"表示该列占6个栅格。同一<a-row>标签中所有<a-col>的span数之和应该是24。

Flex 布局

栅格系统支持Flex布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。

Row上的属性

type & align & justify

type：布局模式，可选 flex

align：flex 布局下的垂直对齐方式：top middle bottom

justify：flex 布局下的水平排列方式：start end center space-around space-between

代码如下：

<p>Align Top</p>
    <a-row type="flex" justify="center" align="top" class="bg-gray">
      <a-col :span="4">
        <div class="grid-content bg-blue-light height-100">
          <span style="color: white;">col-4</span>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="grid-content bg-blue height-50">
          <span style="color: white;">col-4</span>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="grid-content bg-blue-light height-120">
          <span style="color: white;">col-4</span>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="grid-content bg-blue height-80">
          <span style="color: white;">col-4</span>
        </div>
      </a-col>
    </a-row>

    <p>Align Center</p>
    <a-row type="flex" justify="space-around" align="middle" class="bg-gray">
      <a-col :span="4">
        <div class="grid-content bg-blue-light height-100">
          <span style="color: white;">col-4</span>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="grid-content bg-blue height-50">
          <span style="color: white;">col-4</span>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="grid-content bg-blue-light height-120">
          <span style="color: white;">col-4</span>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="grid-content bg-blue height-80">
          <span style="color: white;">col-4</span>
        </div>
      </a-col>
    </a-row>

    <p>Align Bottom</p>
    <a-row type="flex" justify="space-between" align="bottom" class="bg-gray">
      <a-col :span="4">
        <div class="grid-content bg-blue-light height-100">
          <span style="color: white;">col-4</span>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="grid-content bg-blue height-50">
          <span style="color: white;">col-4</span>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="grid-content bg-blue-light height-120">
          <span style="color: white;">col-4</span>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="grid-content bg-blue height-80">
          <span style="color: white;">col-4</span>
        </div>
      </a-col>
    </a-row>


<style scoped>
.bg-blue {
  background-color: #00a0e9;
}

.bg-blue-light {
  background-color: #43bdf5;
}

.grid-content {
  min-height: 36px;
  margin-top: 8px;
  margin-bottom: 8px;
  text-align: center;
  padding: 16px 0;

}


.height-50{
  height: 50px;
}
.height-80{
  height: 80px;
}
.height-100{
  height: 100px;
}
.height-120{
  height: 120px;
}
.bg-gray{
  background-color: rgba(239,239,239,0.37)
}
</style>

运行结果：

在这里插入图片描述

gutter

栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]（1.5.0 后支持）。

代码如下：

<a-row :gutter="[16,32]">
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">
            col-6
          </div>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">
            col-6
          </div>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">
            col-6
          </div>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">
            col-6
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="[16,32]">
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">
            col-6
          </div>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">
            col-6
          </div>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">
            col-6
          </div>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">
            col-6
          </div>
        </a-col>
      </a-row>

<style scoped>
    .gutter-example >>> .ant-row > div {
      background: transparent;
      border: 0;
    }
    .gutter-box {
      background: #00a0e9;
      padding: 5px 0;
    }
</style>

运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RZEzMMnx-1638630491523)(C:UserslenovoAppDataRoamingTypora ypora-user-imagesimage-20211204194333835.png)]

这里将水平间距设置成了16，垂直间距设置成了32。

Col上的属性

flex

flex 布局填充，是不用flex布局填充的时候，可以代替span

代码如下：

<a-divider orientation="left">
      Percentage columns
    </a-divider>
    <a-row type="flex">
      <a-col :flex="2">
        <div class="grid-content bg-blue-light">
          <span style="color: white;">
            2 / 5
          </span>
        </div>
      </a-col>
      <a-col :flex="3">
        <div class="grid-content bg-blue">
          <span style="color: white;">
            3 / 5
          </span>
        </div>
      </a-col>
    </a-row>
    <a-divider orientation="left">
      Fill rest
    </a-divider>
    <a-row type="flex">
      <a-col flex="100px">
        <div class="grid-content bg-blue-light">
          <span style="color: white;">
            100px
          </span>
        </div>
      </a-col>
      <a-col flex="auto">
        <div class="grid-content bg-blue">
          <span style="color: white;">
            auto
          </span>
        </div>
      </a-col>
    </a-row>
    <a-divider orientation="left">
      Raw flex style
    </a-divider>
    <a-row type="flex">
      <a-col flex="1 1 200px">
        <div class="grid-content bg-blue-light">
          <span style="color: white;">
            1 1 200px
          </span>
        </div>
      </a-col>
      <a-col flex="0 1 300px">
        <div class="grid-content bg-blue">
          <span style="color: white;">
            0 1 300px
          </span>
        </div>
      </a-col>
    </a-row>

运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x4WmVM8I-1638630491524)(C:UserslenovoAppDataRoamingTypora ypora-user-imagesimage-20211204224814015.png)]

offset

栅格左侧的间隔格数，间隔内不可以有栅格，可以实现列的左右偏移，:offset="4" 将元素向右侧偏移了 4 个列（column）的宽度。

代码如下：

 <a-row>
      <a-col :span="8">
        <div class="grid-content bg-blue-light">
          <span style="color: white;">
            span="8"
          </span>
        </div>
      </a-col>
      <a-col :span="8" :offset="8">
        <div class="grid-content bg-blue">
          <span style="color: white;">
            span="8"  offset="8"
          </span>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="6" :offset="6">
        <div class="grid-content bg-blue-light">
          <span style="color: white;">
            span="6"  offset="6"
          </span>
        </div>
      </a-col>
      <a-col :span="6" :offset="6">
        <div class="grid-content bg-blue">
          <span style="color: white;">
            span="6"  offset="6"
          </span>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12" :offset="6">
        <div class="grid-content bg-blue">
          <span style="color: white;">
            span="12"  offset="6"
          </span>
        </div>
      </a-col>
    </a-row>

运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y4x3FYfu-1638630491524)(C:UserslenovoAppDataRoamingTypora ypora-user-imagesimage-20211204225409683.png)]

pull & push

pull：栅格向左移动格数

push：栅格向右移动格数

代码如下：

    <a-row>
      <a-col :span="18" :push="6">
        col-18 col-push-6
      </a-col>
      <a-col :span="6" :pull="18">
        col-6 col-pull-18
      </a-col>
    </a-row>

运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MT9lAk68-1638630491525)(C:UserslenovoAppDataRoamingTypora ypora-user-imagesimage-20211204225706051.png)]

span

栅格占位格数，为 0 时相当于 display: none，前面已经用过很多次了

响应式布局

  • xs <576px 时触发响应

  • sm ≥576px 时触发响应

  • md ≥768px 时触发响应

  • lg ≥992px 时触发响应

  • xl ≥1200px 时触发响应

  • xxl ≥1600px 时触发响应

代码如下：

<a-row>
  <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
    <div class="grid-content bg-blue-light">
      <span style="color: white;">
        小于276px:2 大于576px:4 大于768px:6 >=992px:8 大于1200px:10
      </span>
    </div>
  </a-col>
  <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">
    <div class="grid-content bg-blue">
      <span style="color: white;">
        小于276px:20 大于576px:16 大于768px:12 >=992px:8 大于1200px:4
      </span>
    </div>
  </a-col>
  <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
    <div class="grid-content bg-blue-light">
      <span style="color: white;">
        小于276px:2 大于576px:4 大于768px:6 >=992px:8 大于1200px:10
      </span>
    </div>
  </a-col>
</a-row>

运行结果：

当父容器宽度大于1200px的时候

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XMmB3DZH-1638630491525)(C:UserslenovoAppDataRoamingTypora ypora-user-imagesimage-20211204230523298.png)]

当父容器宽度小于1200px并且大于992px的时候

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AyUIhnYU-1638630491526)(C:UserslenovoAppDataRoamingTypora ypora-user-imagesimage-20211204230631645.png)]

注意：同一行内的，所有xs的值之和应该为24，所有sm的值之和应该为24，以此类推

这篇文章就介绍到这里了，后面的文章将带大家对其他组件进行逐个使用，并分享开发中遇到的特殊用法，建议收藏

m0_67391518
关注
  • 4
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SpringBoot+AntDesignVue实现excel导入功能
07-20
描述： 该文章旨在介绍如何使用 SpringBoot 和 AntDesignVue 实现 Excel 导入功能，该功能主要是使用 Ant Design Vue 中的 upload 组件来实现导入 excel 文件的功能。 标签： SpringBoot AntDesignVue excel 实现 ...
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
form 查询 form布局 ant 自适应布局
qq_45530512的博客
02-15 1829
form 查询 form布局 ant 自适应布局
ant design of vue form表单使用
weixin_46172421的博客
04-19 1680
1,.表单布局部分 通过a-row（表示行） 默认gutter为8, a-col（表示列） sm >= 576px，md >= 768px，lg >=992px，xl >= 1200px，xxl >= 1600px <a-form layout="horizontal" :form="searchForm" :labelCol="{ span: 5 }" :wrapperCol="{
rxthink代码解析VUE篇1
最新发布
克里斯蒂亚诺更新的博客
06-12 916
顶部卡片如何布局：（ele-cell-content 根据右边的实际大小撑满剩余空间）（使用ele-cell ele-cell-content）ant-card中分为 ant-card-head和 ant-card-body。head和body在转义前的写法：head写在配置中，body写在自定义div中。 这里的 gutter是什么意思？如何理解时间轴中的 :color="item.color"ele-cell和ele-cell-content的区别。
ant Design vue中a-row 内容不会垂直居中
OnismYY的博客
09-16 3968
ant Design vue中a-row内容不会垂直居中 a-row需要添加一个高度style=“min-height:100vh”
Ant design-13
m0_59214979的博客
08-29 542
本节：栅格化响应式，在vue项目中安装ant design
vue动态生成多个tab页
bloestone的博客
11-21 2623
1、 template部分用v-for循环动态生成 <a-tabs default-active-key="1" @change="callback"> <a-tab-pane v-for="(item,index) in itemlist" :key="item.id" :tab="item.name"> <div> <br /> <a-row>
深入浅出Ant Design Of Vue
wu_pan123的博客
05-31 3000
深入浅出AntDesign Of Vue
Ant design vue 的组件禁用属性 disabled.pdf
12-16
总之，`disabled`属性是Ant Design Vue中控制组件交互状态的重要手段，正确理解和使用这个属性能帮助开发者更好地塑造用户体验，确保应用程序的逻辑清晰和功能完整。在实际开发过程中，要时刻关注组件状态的变化，并...
AntDesignVue一个基于AntDesign和Vue的企业级UI组件库
08-14
AntDesignVue是开发者们用于构建企业级前端界面的重要工具，它将阿里巴巴的Ant Design设计理念与Vue.js框架完美结合，提供了一系列高质量、易于使用的UI组件。这个强大的组件库旨在帮助开发者快速搭建美观且功能丰富...
Vue-Ant Design Vue-普通及自定义校验实例
01-18
这段时间在使用Ant Design Vue进行项目的前端部分开发，进行一个记录，分享… Ant Design Vue Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。在GitHub上可以找到几个Ant Design的Vue...
ant-design-vue栅格grid垂直间距设置失效
m0_61623761的博客
03-26 1028
官方文档说的是在`<a-row>`标签中设定`:gutter="[水平间距，垂直间距]"`但是我在设置后发现没有效果，经过检查，发现设置垂直间距的根本原理是设置了margin属性。于是，在a-row标签里添加`margin-bottom`属性就可以了。
a-form-model表单在a-row和a-col布局下，布局动态改变，校验失效问题。
weixin_40992252的博客
05-25 614
解决：给表单添加key，每次布局改变，更新key。
Ant design Vue学习
weixin_42246997的博客
01-15 3575
1、allowClear 允许清除选项的内容 2、a-form-item必须放进a-col里面，更多的内容放到a-form-item里面 <a-form-item label="标的"> label的值，是代表前面红框中的字： 3、@change选项改变的事件 <a-col :md="4" :sm="8"> <a-form-item labe...
【Ant Design Vue】之Grid栅格和Space间距
热门推荐
张营的技术博客
03-12 1万+
文章目录Grid 栅格Space 间距 Grid 栅格 Ant Design Vue 将整个设计建议区域按照 24 等分的原则进行划分，划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。 布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理： 通过row在水平方向建立一组colu
关于 a-table 动态表头需求遇到的问题
weixin_45337447的博客
08-29 465
【代码】关于 a-table 动态表头需求遇到的问题。
vue vue-element-ui组件 row col布局
qq_44152890的博客
04-19 1565
vue vue-element-ui组件 row col布局
Ant Design Vue 的 Spin 组件怎么全局使用
07-13
要在整个项目中全局使用 Ant Design Vue 的 Spin 组件，你可以创建一个全局组件，并将 Spin 组件作为其内容。 首先，在你的项目中创建一个名为 `GlobalSpin.vue` 的新文件，内容如下： ```html <template> <div v-if="loading" class="global-spin"> <a-spin size="large" /> </div> </template> <script> export default { data() { return { loading: false } }, methods: { show() { this.loading = true; }, hide() { this.loading = false; } } } </script> <style scoped> .global-spin { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; } </style> ``` 在这个文件中，我们创建了一个名为 `GlobalSpin` 的组件，并在其中使用了 Ant Design Vue 的 Spin 组件。我们还添加了 `show` 和 `hide` 方法来控制加载状态的显示和隐藏。 接下来，在你的主应用程序文件（通常是 `main.js`）中全局注册这个组件： ```javascript import Vue from 'vue'; import GlobalSpin from './GlobalSpin.vue'; Vue.prototype.$spin = new Vue(GlobalSpin).$mount(); document.body.appendChild(Vue.prototype.$spin.$el); ``` 这段代码将创建一个全局的 `$spin` 对象，并将其挂载到 Vue 原型上。然后，我们将组件的根元素添加到 `body` 元素中。 现在，你就可以在整个项目中使用 `$spin` 对象来控制全局加载状态的显示和隐藏。例如，在你的某个组件中，可以调用 `$spin.show()` 来显示加载状态，调用 `$spin.hide()` 来隐藏加载状态。 希望这可以帮助到你！如果有任何其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值