ElementUI Collapse折叠面板更改展开icon位置

栏目: 编程语言 · 发布时间: 5年前

内容简介:我们先来看官网中展开icon的位置,如下图我们会因为ui的设计,将icon放置在文本的左侧,我们先看下element是否在该组件定义了相关的属性,找了一遍发现并没有。

icon在右侧

我们先来看官网中展开icon的位置,如下图

ElementUI Collapse折叠面板更改展开icon位置

我们会因为ui的设计,将icon放置在文本的左侧,我们先看下element是否在该组件定义了相关的属性,找了一遍发现并没有。

那么我们如果实现如下图中的布局呢?

ElementUI Collapse折叠面板更改展开icon位置

接着我们通过观察element该组件中title的样式

ElementUI Collapse折叠面板更改展开icon位置

发现了一种样式属性,flex。

有关flex的简单教程请参考阮一峰老师的这一篇

flex教程

我们发现可以通过flex中的项目属性,对文本和icon进行排序

常规为了避免修改到通用的组件(我们可能只是修改部分的折叠面板collapse样式),需要添加一个外部的class,这里的事例就不添加了

// html
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.10.0/lib/index.js"></script>
    <div id="app">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item  name="1">
        <span class="collapse-title" slot="title">一致性 Consistency</span>
        <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
        <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
      </el-collapse-item>
    </el-collapse>
    </div>
    // css
    @import url("//unpkg.com/element-ui@2.10.0/lib/theme-chalk/index.css");
    .collapse-title {
        flex: 1 0 90%;
        order: 1;
    }
    .el-collapse-item__header {
        flex: 1 0 auto;
        order: -1;
    }
    // js
    var Main = {
        data() {
          return {
            activeNames: ['1']
          };
        },
        methods: {
          handleChange(val) {
            console.log(val);
          }
        }
      }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

这里的文本需要用到slot,因为我们需要给文本添加class,这里类名为collapse-title。

具体可以通过粘贴到codepen查看效果。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Head First Rails

Head First Rails

David Griffiths / O'Reilly Media / 2008-12-30 / USD 49.99

Figure its about time that you hop on the Ruby on Rails bandwagon? You've heard that it'll increase your productivity exponentially, and allow you to created full fledged web applications with minimal......一起来看看 《Head First Rails》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具