mView

内置样式

说明

mView组件功能的实现，并不依赖全局样式，内置的一些类名，只是提供一些基础且常用的样式，仅此而已。 注意：请根据快速上手中的说明，引入mView提供的scss文件。

温馨提示

由于mView的内置样式均是写在scss文件中的，您在使用的时候，请确保要给页面的style标签加上lang="scss"属性，否则可能会报错。

文字省略

m-line-1,m-line-2,m-line-3,m-line-4,m-line-5五个类名在文字超出内容盒子时，分别只显示一行、两行、三行、四行、五行+省略号。

<text class="m-line-1">mView组件功能的实现，并不依赖全局样式，内置的一些类名，只是提供一些基础且常用的样式，仅此而已。</text>

重置按钮样式

uni-app和微信小程序的button按钮是自带样式的，比如边框，内边距，行高等。在某些特殊场景，我们可能会需要清除这些样式，仅仅只留下按钮文本，就像 单纯的view元素一样，不带预置样式。

场景：在微信小程序中，我们知道button设置open-type参数为getUserInfo(或者分享场景)，点击按钮可以弹出让用户授权的系统弹窗，有时候我们可能需要按钮形式展现，但也有时候我们仅仅需要 "点击登录/授权/分享"几个字，同时具备获取相应的功能，就需要清除按钮的样式了，只需要给button加上m-reset-button类名即可。

<button class="m-reset-button">登陆</button>

边框

uni-app，iOS和少数设备使用1rpx是能够得到类似0.5px的半像素宽度的，但是某些情况下是不兼容的， 故mView提供了一套兼容的css类名，方便用户使用。 m-border表示给元素添加四周的边框，m-border-top为上边框，m-border-right为右边框，m-border-bottom为下边框，m-border-left为左边框。

提示：如果想调整边框与内容的距离，修改元素的内边距即可。

文字颜色

mView提供了四个关于文字的颜色，具体详见文档的Color 色彩部分，分别是：

  • main-color主要颜色，可以用于标题等需要重颜色的场景
  • content-color内容颜色，可以用于一般性内容的场景
  • tips-color提示颜色，可以用于浅颜色的提示语的场景
  • light-color为比tips-color更浅的颜色，可以和tips-color搭配使用

mView提供了四个关于文字颜色的scss变量名，具体详见文档的Color 色彩部分，分别是：

  • $m-main-color
  • $m-content-color
  • $m-tips-color
  • $m-light-color
<!-- 请确保在style标签声明了"lang="scss"" -->
<style lang="scss" scoped>
	.page {
		color: $m-main-color;
	}

	.tips {
		border-color: $m-light-color;
	}
</style>



 



 


主题色

mView提供五个关于主题的scss颜色变量，如有需要，可合理使用。具体详见文档的Color 色彩部分，分别是：

$m-primary为蓝色，mView的主色彩，代表严谨积极之意。 $m-warning为黄色，代表警告之意。 $m-success为绿色，代表成功之意。 $m-error为红色，代表错误之意。 $m-info为灰色，代表一般信息之意。

<style lang="scss" scoped>
	.item {
		color: $m-primary;
	}
</style>