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查看效果。


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

查看所有标签

猜你喜欢:

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

服务设计与创新实践

服务设计与创新实践

宝莱恩 (Andy Polaine)、乐维亚 (Lavrans Lovlie)、里森 (Ben Reason) / 王国胜、张盈盈、付美平、赵芳 / 清华大学出版社 / 2015-6-1 / CNY 69.00

产品经济的时代渐行渐远,在以服务为主导的新经济时代,在强调体验和价值的互联网时代,如何才能做到提前想用户之所想?如何比用户想得更周到?如何设计可用、好用和体贴的服务?这些都可以从本书中找到答案。本书撷取以保险业为代表的金融服务、医疗服务、租车及其他种种服务案例,从概念到实践,有理有据地阐述了如何对服务进行重新设计?如何将用户体验和价值提前与产品设计融合在一起? 《服务设计与创新实践》适合产品......一起来看看 《服务设计与创新实践》 这本书的介绍吧!

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

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试