内置样式

说明

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

温馨提示

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

文字省略

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

<view class="su-line-1">
	是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也
</view>

定位

sun-uni内置了关于相对和绝对定位的两个类，分别为su-relative(su-rela)和su-absolute(su-abso)：

.su-relative,
.su-rela {
	position: relative;
}

.su-absolute,
.su-abso {
	position: absolute;
}

字体大小

1. 数值形式

sun-uni为了方便用户写字体，通过SCSS生成了一套样式类，专门用于定位字体的大小。对于字体，不同用户可能有喜欢px，也有喜欢rpx单位的， 一般来说，在uni-app上，rpx单位最终表现出来的大小数值为px的两倍左右，也就是说，24rpx和12px的字体大小是差不多的。 sun-uni为此提供了一个类su-font-x，这个x为10-40之间(包含10和40)，当x >= 10 && x < 20时，表现为px性质，当x >= 20 && x <= 40时，表现为rpx性质。

用法如下：

• 当x >= 10 && x < 20时，表现为px性质

<view class="su-font-13"></view>

这个.su-font-13在sun-uni的内部样式定义为：

.su-font-13 {
	font-size: 13px;
}

• 当x >= 20 && x <= 40时，表现为rpx性质

<view class="su-font-26"></view>

这个.su-font-26在sun-uni的内部样式定义为：

.su-font-26 {
	font-size: 26rpx;
}

2. 断点形式

为了更加形象和方便记忆，sun-uni另外提供了一套断点的字体大小，分别以xs、sm、md、lg、xl作为后缀，如下：

.su-font-xs {
	font-size: 22rpx;
}

.su-font-sm {
	font-size: 26rpx;
}

.su-font-md {
	font-size: 28rpx;
}

.su-font-lg {
	font-size: 30rpx;
}

.su-font-xl {
	font-size: 34rpx;
}

文字对齐

sun-uni为文字对齐定义了3个类，分别如下：

/* 文字左对齐 */
.su-text-left {
	text-align: left;
}

/* 文字居中对齐 */
.su-text-center {
	text-align: center;
}

/* 文字右对齐 */
.su-text-right {
	text-align: right;
}

重置按钮样式

我们知道，uni-app和微信小程序的button按钮是自带样式的，比如边框，内边距，行高等。在某些特殊场景，我们可能会需要清除这些样式，仅仅只留下按钮文本，就像 单纯的view元素一样，不带预置样式，场景： 在微信小程序中，我们知道button设置open-type参数为getUserInfo(或者分享场景)，点击按钮可以弹出让用户授权的系统弹窗，有时候我们可能需要按钮形式展现，但也有时候我们仅仅需要 "点击登录/授权/分享"几个字，同时具备获取相应的功能，就需要清除按钮的样式了，只需要给button加上su-reset-button类名即可。

<button class="su-reset-button">点击登录</button>

提示：

1. 此种场景，不建议使用sun-uni的su-button组件，使用原生的button即可
2. 有时候，我们可能弹出询问用户是否想授权，可以用su-modal组件，此组件有一个confirm-button的slot用于替换确定按钮，用户点击确定，即可授权。

/* 请在微信开发工具中运行此代码 */
<template>
	<view>
		<su-modal v-model="show" content="点击确定进行授权">
			<template v-slot:confirmButton>
				<button open-type="getUserInfo" class="su-reset-button" @getuserinfo="getuserinfo">确定</button>
			</template>
		</su-modal>
		<su-button @click="show = true">打开modal</su-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		},
		methods: {
			getuserinfo(res) {
				console.log(res);
			}
		}
	}
</script>

内外边距

sun-uni定义了一套内外边距的类名，调用简单，方便用户使用，类似su-padding-x、su-margin-left-x等，这里的x取值规则如下：

• 1-80(可以等于80)之间的偶数(双数)
• 能被5除尽的1-80之间的数，如5，10，15，35等

类名的取值有如下：

注意： sun-uni同时也给了一套简写的方法，二者是等价的。

• su-padding-x == su-p-x
• su-padding-left-x == su-p-l-x
• su-padding-top-x == su-p-t-x
• su-padding-right-x == su-p-r-x
• su-padding-bottom-x == su-p-b-x
• su-margin-x == su-m-x
• su-margin-left-x == su-m-l-x
• su-margin-top-x == su-m-t-x
• su-margin-right-x == su-m-r-x
• su-margin-bottom-x == su-m-b-x

如果我们想定义26rpx的左外边距：

<view class="su-margin-left-26"></viwe>

这个.su-margin-left-26在sun-uni的内部样式定义为：

.su-margin-left-26 {
	margin-left: 26rpx;
}

如果我们想要35rpx的内边距：

<view class="su-padding-35"></viwe>

这个.su-padding-35在sun-uni的内部样式定义为：

.su-padding-35 {
	padding: 35rpx;
}

flex布局

在看这个部分的时候，请确保您对flex是了解的，否则可以参考阮一峰的flex教程 由于我们经常要使用flex布局，而其中的大部分样式又都是重复的，总是少不了如下的几句：

/* 父盒子 */
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;

/* 子元素 */
flex: 1;

基于以上，sun-uni定义了一个最常用的总集合类，名为su-flex，其内部值如下：

1. 总超集

.su-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
}

2. 子元素是否换行

/* 换行 */
.su-flex-wrap {
	flex-wrap: wrap;
}

/* 不换行 */
.su-flex-nowrap {
	flex-wrap: nowrap;
}

提示

当我们写这些跟flex相关的类名时，总应该把su-flex写在class多个类名的左边，因为su-flex是一个集合类，如果你不想要其中的某个属性，如align-items: center ，可以通过右边的类名覆盖它。

覆盖su-flex中的align-items: center(对齐)，改为顶部对齐su-col-top：

<view class="su-flex su-col-top">
	......
</view>

最终内部表现如下(其它以此类推)：

.su-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
}

/* 由于align-items: flex-start在后面，故覆盖了"su-flex"的align-items: center */
.su-col-top {
	align-items: flex-start;
}

3. 子元素在上下左右的对齐方式

这里类名的命名依据为，col为column(列，竖向)的缩写，row为行的意思(横向)，所以就有垂直方向上的诸如su-col-center表 垂直居中对齐，su-row-left代表水平左对齐。 此类名控制的是子元素，是需要写在父元素盒子上的：

/* 垂直居中 */
.su-col-center {
	align-items: center;
}

/* 顶部对齐 */
.su-col-top {
	align-items: flex-start;
}

/* 底部对齐 */
.su-col-bottom {
	align-items: flex-end;
}

/* 左边对齐 */
.su-row-left {
	justify-content: flex-start;
}

/* 水平居中 */
.su-row-center {
	justify-content: center;
}

/* 右边对齐 */
.su-row-right {
	justify-content: flex-end;
}

/* 水平两端对齐，项目之间的间隔都相等 */
.su-row-between {
	justify-content: space-between;
}

/* 水平每个项目两侧的间隔相等，所以项目之间的间隔比项目与父元素两边的间隔大一倍 */
.su-row-around {
	justify-content: space-around;
}

4. 子元素空间分布

此类名是写在子元素的class中的，主要用于决定子元素占据的父元素的空间大小，类名为su-flex-x，x的取值为x >= 1 && x <= 12：

.su-flex-1 {
	flex: 1;
}

.su-flex-2 {
	flex: 2;
}

.su-flex-3 {
	flex: 3;
}

/* ...... */

.su-flex-12 {
	flex: 12;
}

边框

uni-app，iOS和少数设备使用1rpx是能够得到类似0.5px的半像素宽度的，但是某些情况下是不兼容的， 故sun-uni提供了一套兼容的css类名，方便用户使用。 su-border表示给元素添加四周的边框，su-border-top为上边框，su-border-right为右边框， su-border-bottom为下边框，su-border-left为左边框。 说明：如果想调整边框与内容的距离，修改元素的内边距即可。

<view class="su-border-bottom">
	夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外
</view>

文字颜色

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

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

举个例子： 我们平时看到的APP的新闻列表，标题颜色可以用$su-main-color，简介部分颜色可以用$su-content-color，底部的发布时间文字等可以用$su-tips-color。

1. 类名方案

这个方案，直接通过类名调用，有这几个对应类名：su-main-color、su-content-color、su-tips-color、su-light-color。

<view class="su-main-color">
	......
</view>

2. SCSS变量名方案

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

• $su-main-color
• $su-content-color
• $su-tips-color
• $su-light-color

<!-- 请确保在style标签声明了"lang="scss"" -->
<style lang="scss" scoped>
	.box {
		color: $su-main-color;
	}

	.count {
		border-color: $su-light-color;
	}
</style>

主题色

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

• $su-type-primary为蓝色，sun-uni的主色彩，代表热情，友好，积极，向上之意。
• $su-type-warning为黄色，代表警告之意。
• $su-type-success为绿色，代表成功之意。
• $su-type-error为红色，代表错误之意。
• $su-type-info为灰色，代表一般信息之意。

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