# 内置样式

# 说明

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

温馨提示

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

# 文字省略

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

<text class="up-line-1">是日也,天朗气清,惠风和畅,仰观宇宙之大,俯察品类之盛</text>

# 重置按钮样式

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

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

提示:

  1. 此种场景,不建议使用uview-plus的up-button组件,使用原生的button即可
  2. 有时候,我们可能弹出询问用户是否想授权,可以用up-modal组件,此组件有一个confirm-buttonslot用于替换确定按钮,用户点击确定,即可授权。
<!-- 请在微信开发工具中运行此代码 -->
<template>
  <view>
    <up-modal v-model:visible="show" content="点击确定进行授权">
      <template #confirm-button>
        <button open-type="getUserInfo" class="up-reset-button" @getuserinfo="getuserinfo">确定</button>
      </template>
    </up-modal>
    <up-button @click="show = true">打开modal</up-button>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(true);

const getuserinfo = (res) => {
  console.log(res);
};
</script>
/* 请在微信开发工具中运行此代码 */
<template>
	<view>
		<up-modal v-model="show" content="点击确定进行授权">
			<template #confirm-button>
				<button open-type="getUserInfo" class="up-reset-button" @getuserinfo="getuserinfo">确定</button>
			</template>
		</up-modal>
		<up-button @click="show = true">打开modal</up-button>
	</view>
</template>
<script setup>  
import { ref } from 'vue';  
  
// 使用 ref 创建响应式数据  
const show = ref(true);  
  
// 定义 getuserinfo 方法  
const getuserinfo = (res) => {  
  console.log(res);  
};  
</script>
<script>
	export default {
		data() {
			return {
				show: true
			}
		},
		methods: {
			getuserinfo(res) {
				console.log(res);
			}
		}
	}
</script>

# 边框

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

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

# 文字颜色

uview-plus提供了四个关于文字的颜色,具体详见文档的Color 色彩部分,分别是:

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

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

uview-plus提供了四个关于文字颜色的scss变量名,具体详见文档的Color 色彩部分,分别是:

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

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

# 主题色

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

  • $up-primary为蓝色,uview-plus的主色彩,代表热情,友好,积极,向上之意。
  • $up-warning为黄色,代表警告之意。
  • $up-success为绿色,代表成功之意。
  • $up-error为红色,代表错误之意。
  • $up-info为灰色,代表一般信息之意。
<style lang="scss" scoped>
	.item {
		color: $up-primary;
	}
</style>