museui的tabs组件如何更改图标以及颜色等?

前端小白de窝
  • 394

clipboard.png
我期望的这个tabs可以更改一下,包括四个字体图标,还有激活和未激活时候的颜色,请问该怎么弄?

回复
阅读 6.9k
4 个回答
小飘飘
  • 16
✓ 已被采纳

修改muse ui的class其实只要找到源文件就好啦
在你安装muse ui之后依赖包就已经下载好了对应的css js文件的

图片描述

找到这个依赖包

图片描述

找到muse ui的文件夹


在下面的src文件夹里面包含的就是每一个组件的内容 你可以拿去参考学习 有能力还可以为自己后期需求做一些组件
比如muse ui是没有下拉加载更多 或者swiper等等的 参考他们的源码去自己动作写


图片描述

如果更改css呢?
那就是找到你要改的class
复制下来
接着找到主题
最好自定义一份css文件
把默认的主题复制一份到自己定义的css文件里面
比如你看我上面就是自己定义的css文件名 theme-self.css
定义自己的css文件,并且把代码复制进去
那么需要在main的入口里面调用
import 'muse-ui/dist/theme-self.css'
记得是调用自己定义的那个css主题

回到之前说的 更改class

就是这样子

图片描述

问题一: 修改图标

如果不想用图标并且有设计师小伙伴,或者本身就是设计师的,可以引入iconfont

在muse ui 上引入iconfont字体图标,

在公共样式文件中添加 .material-icons类,并且自定义iconfont字体即可,代码如下

.material-icons {
  font-family: 'iconfont' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';  /* project id 642903 */
  src: url('./assets/iconfont.eot');
  src: url('./assets/iconfont.eot?#iefix') format('embedded-opentype'),
  url('./assets/iconfont.woff') format('woff'),
  url('./assets/iconfont.ttf') format('truetype'),
  url('./assets/iconfont.svg#iconfont') format('svg');
}
**注意,字体文件路径为自定义路径,我将字体文件放置于 src/assets
目录下,故而设置的此目录**

问题二: 修改icon 颜色,第一个方式是覆盖默认样式

  • 默认字体图标颜色

底栏默认字体图标颜色

截图可见,覆盖.mu-buttom-item类的color属性即可

  • 激活时字体图标颜色

底栏激活字体图标颜色

截图可见,覆盖.mu-bottom-item-active .mu-bottom-item-icon类的color属性即可

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏