uView内置样式

说明

uView组件功能的实现,并不依赖全局样式,内置的一些类名,只是提供一些基础且常用的样式,仅此而已。

注意:请根据快速上手中的说明,引入uView提供的scss文件。

温馨提示

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

#文字省略

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

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

copy

#重置按钮样式

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

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

复制代码
<button class="u-reset-button">点击登录</button>

copy

提示:

  1. 此种场景,不建议使用uView的u-button组件,使用原生的button即可

  2. 有时候,我们可能弹出询问用户是否想授权,可以用u-modal组件,此组件有一个confirm-buttonslot用于替换确定按钮,用户点击确定,即可授权。

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

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

copy

#边框

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

说明:如果想调整边框与内容的距离,修改元素的内边距即可。

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

copy

#文字颜色

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

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

举个例子:

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

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

  • $u-main-color

  • $u-content-color

  • $u-tips-color

  • $u-light-color

    <style lang="scss" scoped> .box { color: $u-main-color; }
    复制代码
      .count {
      	border-color: $u-light-color;
      }
    </style>

copy

#主题色

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

  • $u-primary为蓝色,uView的主色彩,代表热情,友好,积极,向上之意。

  • $u-warning为黄色,代表警告之意。

  • $u-success为绿色,代表成功之意。

  • $u-error为红色,代表错误之意。

  • $u-info为灰色,代表一般信息之意。

    <style lang="scss" scoped> .item { color: $u-primary; } </style>
相关推荐
三原12 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
小徐_233315 小时前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
難釋懷20 小时前
微信小程序案例 - 本地生活(首页)
微信小程序·生活·notepad++
2301_805962932 天前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero2 天前
微信小程序121~130
微信小程序·小程序
難釋懷2 天前
微信小程序WXSS 模板样式
微信小程序·小程序·notepad++
清颖~2 天前
原生微信小程序研发,如何对图片进行统一管理?
微信小程序·小程序
军军君012 天前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
默魔2 天前
uniapp 微信小程序点击开始倒计时
微信小程序·小程序·uni-app
難釋懷3 天前
微信小程序全局配置
微信小程序·小程序