内容简介:我们先来看官网中展开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 游戏登上更大的舞台
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
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》 这本书的介绍吧!