jjzjj

Layout布局(element ui)

布丁吖 2024-06-04 原文

Layout布局

嘚吧嘚

其实layout布局的使用在element官网上都有相关描述，也有相关示例，很容易快速上手。但是在实际使用的过程还是发现一些问题，于是做了一些学习研究，在此和大家分享一下。

gutter

为了能更清楚的看到效果，给每列都加了背景色。

示例

先来一个没有gutter效果的

<template>
  <div style="width: 500px; height: 400px; border: red 1px solid">
    <el-row>
      <el-row>
        <el-col :span="6" style="background: blue;">
          <el-button>重置</el-button>
        </el-col>
        <el-col :span="6" style="background: red;">
          <el-button>查询</el-button>
        </el-col>
        <el-col :span="6" style="background: blue;">
          <el-button>重置</el-button>
        </el-col>
        <el-col :span="6" style="background: red;">
          <el-button>查询</el-button>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

效果图：

再来一个加上gutter的

<template>
  <div style="width: 500px; height: 400px; border: red 1px solid">
    <el-row>
      <el-row gutter="20">
        <el-col :span="6" style="background: blue;">
          <el-button>重置</el-button>
        </el-col>
        <el-col :span="6" style="background: red;">
          <el-button>查询</el-button>
        </el-col>
        <el-col :span="6" style="background: blue;">
          <el-button>重置</el-button>
        </el-col>
        <el-col :span="6" style="background: red;">
          <el-button>查询</el-button>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

效果图如下：

发现

是不是好像发现了什么？
没错，最后一列(el-col)短了一节。

从效果图上来看，gutter就是在每列前面加上一块来实现分栏间隔的。第1列前面加上一块，但是是在div外面，不影响里面，但是最后一列被挤出div一块，超出边界相当于被覆盖了。

el-row行内容居中

默认居左上角

为了能跟直观的看到效果，将行高度设置为200px，加上黑色边框。

<template>
  <div style="width: 500px; height: 400px; border: red 1px solid">
    <el-row>
      <el-row style="height: 200px; border: black 1px solid">
        <span>hello</span>
      </el-row>
    </el-row>
  </div>
</template>

效果如下：

水平居中

在el-row上加上type="flex"和justify="center"就可以了。

<template>
  <div style="width: 500px; height: 400px; border: red 1px solid">
    <el-row>
      <el-row type="flex" justify="center" style="height: 200px; border: black 1px solid">
        <span>hello</span>
      </el-row>
    </el-row>
  </div>
</template>

效果图如下：

垂直居中

在el-row上加上type="flex"和align="middle"就行了。

<template>
  <div style="width: 500px; height: 400px; border: red 1px solid">
    <el-row>
      <el-row type="flex" align="middle" style="height: 200px; border: black 1px solid">
        <span>hello</span>
      </el-row>
    </el-row>
  </div>
</template>

水平垂直居中

在el-row上加上type="flex"、justify="center"和align="middle"就行了。

<template>
  <div style="width: 500px; height: 400px; border: red 1px solid">
    <el-row>
      <el-row type="flex" justify="center" align="middle" style="height: 200px; border: black 1px solid">
        <span>hello</span>
      </el-row>
    </el-row>
  </div>
</template>


本次分享就结束了，有什么不对，欢迎指正！也欢迎大家补充。

elementLayoutspanoperatorclassvue.jselement uigutterel-rowlayout布局

有关Layout布局(element ui)的更多相关文章

  1. ruby - nanoc 和多种布局 - 2

    是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'

  2. ruby-on-rails - 我可以在没有 Controller 的情况下直接从 routes.rb 渲染布局吗？ - 2

    我想为网站的管理和公共(public)部分设置一对样式指南。每个都需要自己的布局，其中包含静态html和调用erbpartials的混合(因此静态页面不会削减它)。我不需要Controller来为这些页面提供服务，而且我不希望有效的仅开发内容使其余代码困惑。这让我想知道是否有一种方法可以直接呈现布局。免责声明:我明白这不是我应该经常/永远做的事情，而且我知道有很多争论可以解释为什么这是一个坏主意。我对这是否可能感兴趣。有没有办法让我直接从routes.rb渲染布局而不通过Controller？ 最佳答案 出于某种奇怪的原因，我想暂时

  3. ruby-on-rails - 设计 Controller 如何改变布局？ - 2

    这个问题在这里已经有了答案:differentlayoutforsign_inactionindevise(8个答案)关闭7年前。如何更改设计Controller中的布局？

  4. ruby-on-rails - Rails - 如何在布局中查找域 url - 2

    我有request.env['http_host']在本地主机上工作，但在heroku的布局页面中引用时会导致错误。此请求在View中工作并显示正确的基本url，但是当我将代码移动到布局时它会导致错误。注意-我正在使用它来为html电子邮件中的图像构建绝对url。收到错误:ActionView::Template::Error(undefinedmethod`env'fornil:NilClass): 最佳答案 如果你想要没有端口的主机，只需使用:request.host编辑:糟糕，我刚刚注意到您正在使用View中的代码。我不知道它

  5. Ruby GUI(非复杂布局) - 2

    我对RubyGUI设计做了很多研究，这似乎是Ruby倾向于落后的领域。我探索了MonkeyBars、wxRuby、fxRuby、Shoes等选项，只是想从Ruby社区获得一些意见。虽然它们绝对可用，但每一个的开发似乎都在下降。我在任何(减去fxRuby书)上都找不到大量有用的文档或用户基础。我只是想制作一个简单的GUI，所以我真的不想花费数百小时来学习更复杂的工具的复杂性或尝试使用甚至不再开发的东西(鞋子是应用程序的类型我正在寻找，但它有很多问题并且没有得到积极开发。)在所有选项中，你们会推荐哪个选项是最快的，并且仍然具有某种开发基础？谢谢! 最佳答案

  6. ruby - Rails 渲染 Controller 中的部分和布局 - 2

    我正在覆盖设计注册Controller的创建操作。我有两种注册表格，个人或公司，公司有一个名为company_form的字段设置为true以区分这两种表格。在表单验证后，我希望呈现正确的表单(以前无论我使用什么表单，它都会返回默认表单)。我遇到了一个问题，即只渲染了部分(很明显，因为我只渲染了部分)，但我还需要渲染布局/应用程序文件。classRegistrationsControllerifresource.company_formrenderpartial:'shared/company_signup_form'elserenderpartial:'/shared/individu

  7. ruby-on-rails - 缺少带有 { :locale=>[:en], :formats=>[:html], 的模板布局/邮件程序 - 2

    我正在学习michaelharltrails教程，但出现此错误Missingtemplatelayouts/mailerwith{:locale=>[:en],:formats=>[:html],:variants=>[],:handlers=>[:raw,:erb,:html,:builder,:ruby,:coffee,:jbuilder]}.Searchedin:*"/home/ubuntu/workspace/app/views"预览账户激活时这是我的user_mailer.rbclassUserMailer错误突出显示了mailto:user.email,subject:"A

  8. ruby - Sinatra 中的嵌套布局 - 2

    tl;dr:在Sinatra中是否有一种干净的嵌套布局方式？对于我网站上的所有页面，我有一个通用的layout.erb，它呈现页眉、页脚和其他一些位。对于这些页面的一个子集，我想使用内部布局，除了那些公共(public)位之外，它还呈现左侧菜单。全局erb:pageTemplate执行layout.erb，其中yield执行pageTemplate在子集中erb:pageTemplate执行layout.erb，其中yield执行specificLayout.erb，其中yield执行pageTemplate。有道理吗？我对单独的类、before语句和任何其他ruby​​魔法持开放态度

  9. ruby-on-rails - rails : How to insert a text_field without a form just to test the layout? - 2

    我现在正在为我的应用程序做布局，我想插入一个不执行任何操作的text.field，只是为了看看它的外观。我该怎么做？ 最佳答案 有几种方法可以满足您的需求。1)只写静态HTML2)使用text_field_tag3)使用form_for为虚拟对象构建虚拟表单 关于ruby-on-rails-rails:Howtoinsertatext_fieldwithoutaformjusttotestthelayout?，我们在StackOverflow上找到一个类似的问题：

  10. ruby-on-rails - 在 Rails 中是否可以动态加载类布局？ - 2

    我需要消息在项目中有不同的布局，是否可以在Rails中做这样的事情？ClassMessages::New谢谢 最佳答案 这对你有帮助classMessagesController 关于ruby-on-rails-在Rails中是否可以动态加载类布局？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1274999/

随机推荐