内容简介:我们先来看官网中展开icon的位置,如下图我们会因为ui的设计,将icon放置在文本的左侧,我们先看下element是否在该组件定义了相关的属性,找了一遍发现并没有。
icon在右侧
我们先来看官网中展开icon的位置,如下图
我们会因为ui的设计,将icon放置在文本的左侧,我们先看下element是否在该组件定义了相关的属性,找了一遍发现并没有。
那么我们如果实现如下图中的布局呢?
接着我们通过观察element该组件中title的样式
我们发现可以通过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查看效果。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 立体折叠相册效果
- Android 可折叠TextView
- [译] Python 优化机制:常量折叠
- Antv关于G6树状图实现折叠
- 微软Edge团队重新塑造三星Fold等折叠屏手机网页体验
- 大屏幕和折叠屏: 让您的 Android 游戏登上更大的舞台
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
服务设计与创新实践
宝莱恩 (Andy Polaine)、乐维亚 (Lavrans Lovlie)、里森 (Ben Reason) / 王国胜、张盈盈、付美平、赵芳 / 清华大学出版社 / 2015-6-1 / CNY 69.00
产品经济的时代渐行渐远,在以服务为主导的新经济时代,在强调体验和价值的互联网时代,如何才能做到提前想用户之所想?如何比用户想得更周到?如何设计可用、好用和体贴的服务?这些都可以从本书中找到答案。本书撷取以保险业为代表的金融服务、医疗服务、租车及其他种种服务案例,从概念到实践,有理有据地阐述了如何对服务进行重新设计?如何将用户体验和价值提前与产品设计融合在一起? 《服务设计与创新实践》适合产品......一起来看看 《服务设计与创新实践》 这本书的介绍吧!