Muse-ui中Tabs组件(修改它默认样式实现)点击左侧实现右侧联动

最近在用muse-ui这个UI框架,发现对新人上手并不友好,其中的坑还是很多的。想要修改其中的默认样式很是头疼。

网上也搜了很多样式并没有找到相似的,写下这篇文章为需要的同志复用,也方便我自己日后可查。

废话不多说现在开始:

首先Tabs组件默认的样式是这样的,发现他是竖向显示并没有横向显示。官网可查,链接地址奉上https://muse-ui.org/#/zh-CN/tabs

现在我要实现的效果是这样的:

先看一下它官网的dome结构:


知道了哪些class控制元素以后我们就来更改他们的默认样式。

贴上我修改后的代码:

.mu-tabs-center {

  float: left;

  width: 25%;

  -webkit-box-pack: center;

  flex-direction: column;

}

.demo-text {

  width: 400px;

  float: right;

  width: 75%;

  padding: 10px 0;

}

最后看一下修改后的效果:


具体的添加样式和数据根据自己业务来添加更改。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,347评论 1赞 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 29,197评论 1赞 45
  • 8. Setting Colors Since release v1.4.0, the ColorTemplate...
    ngugg阅读 860评论 0赞 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,490评论 0赞 11
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 7,577评论 0赞 17

友情链接更多精彩内容