最近在用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;
}
最后看一下修改后的效果:
具体的添加样式和数据根据自己业务来添加更改。