【element】el-collapse-中折叠面板箭头图标位置调整往左边

但由于设计需要，需要将箭头放在最左边，通过f12代码调试发现header是flex布局
，因此修改后的面板部分代码如下：<el-collapse accordion 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-item name="2"><span class="collapse-title" slot="title">反馈 Feedback</span><div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div><div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div></el-collapse-item><el-collapse-item name="3"><span class="collapse-title" slot="title">效率 Efficiency</span><div>简化流程：设计简洁直观的操作流程；</div><div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div><div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div></el-collapse-item><el-collapse-item name="4"><span class="collapse-title" slot="title">可控 Controllability</span><div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div><div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div></el-collapse-item></el-collapse>

对标题部分设置为slot自定义，外层包裹一个自定义类collapse-title，对这个类赋予样式，如下：

<style scoped lang='scss'>
::v-deep .collapse-title {flex: 1 0 90%;order: 1;.el-collapse-item__header {flex: 1 0 auto;order: -1;}
}
</style>

【element】el-collapse-中折叠面板箭头图标位置调整往左边相关推荐

elementUI中折叠面板箭头图标位置调整
工作中有时设计图要求实现折叠面板需求,element官网给出的示例中,面板展开收起的箭头图标是在最右面,如图所示: 但由于设计需要,需要将箭头放在最左边,通过f12代码调试发现header是flex布 ...
【element】elementUI-中折叠面板箭头图标位置调整往左边
但由于设计需要,需要将箭头放在最左边,通过f12代码调试发现header是flex布局 ,因此修改后的面板部分代码如下:<el-collapse accordion v-model=" ...
bootstrap 隐藏元素_Bootstrap中折叠面板的样式内容
Bootstrap折叠板插件允许你在网页中用一点点JavaScript以及CSS类切换内容,控制内容的可见性.它是一个灵活的插件,使用少量的类(来自必需的过渡插件),以方便切换行为. 运作方式插件用 ...
html5中折叠面板,Ant Design中折叠面板Collapse
这段时间做react项目遇到一些平常并不会去在意的问题,但解决的时候又需要思考一番.这次开发用到了蚂蚁金服的UI框架Ant Design.项目中有一个模块的样式和功能用到了折叠面板Collapse组件 ...
layui中折叠面板的使用
运用折叠面板后可以让页面更加整洁有什么不懂的可以留言代码放到底部需要引入的文件 JQuery代码: html代码 <div class="layui-colla-item&qu ...
修复uview的collapse折叠面板箭头不能变向的官方bug(小程序里)
打开u-collapse-item.vue文件,按图中修改代码. 代码修改说明:其实就是把 .u-arrow-down-icon和.u-arrow-down-icon-active这两个类名绑定到了的 ...
VUE手动实现手风琴折叠面板，不用组件
Table of Contents 1.在需要点击触发事件的位置加上click事件 2.在点击区域内合适的地方加上图标 3.实现foldSwitch方法 4.实现changeStyle方法 VUE+e ...
EasyUI中Panel面板的简单使用
场景效果属性名称类型描述默认值 id string 面板(panel)的 id 属性. null title string 显示在面板(panel)头部的标题文字. null iconCl ...
ElementUI导航菜单嵌套多级折叠面板的小箭头图标bug
1.问题使用的饿了么组件,导航menu组件,里面放了几层折叠面板,结果在收起的时候,小箭头没有隐藏掉,找了半天样式没找到,于是,另辟蹊径(贴了个创可贴) 2.解决直接整了个div,绝对定位,设置宽 ...

【element】el-collapse-中折叠面板箭头图标位置调整往左边

【element】el-collapse-中折叠面板箭头图标位置调整往左边相关推荐

最新文章

热门文章