uniapp的扩展组件

305 阅读1分钟

这是我参与「掘金日新计划 · 2 月更文挑战」的第 3天,点击查看活动详情

uniapp的扩展组件

uni-ui为了避免视觉传达差异,使用一套特定的调色板来规定颜色,为你所搭建的产品提供一致的外观视觉感受。(在uni.scss文件中设置)

image.png

  • 我们通过uni.scss提供了对应的颜色变量名

image.png
效果:

image.png

辅助色

除了主色外的场景色,需要在不同的场景中使用,不同颜色代表不同的场景,如:绿色代表成功、红色代表错误、黄色代表警告。

image.png
我们通过uni-scss提供了对应的颜色变量名

image.png

中性色

中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。

image.png
我们通过uni-scss提供了对应的颜色变量名

image.png

边框颜色

主要用于边框、分隔线颜色

image.png

image.png

常规色

通用颜色,如黑色、白色、常用背景色等

image.png

image.png

阴影

image.png

image.png

数字角标

基本用法

在 template 中使用组件

image.png

属性/方法

Badge Props

image.png

Badge Events

image.png
示例代码(数字角标):

image.png

image.png

image.png

image.png

面包屑

安装方式

本组件符合[easycom]规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components

如需通过npm方式使用uni-ui组件,另见文档:ext.dcloud.net.cn/plugin?id=5…

image.png

image.png

image.png

image.png

日历

日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等

image.png