Color UI用法1. 简介Color UI是一套基于微信小程序的UI组件库，提供了丰富的样式和组件，帮助开发者快速构建漂亮且易用的小程序界面。

它包含了各种常用的UI组件，如按钮、输入框、列表等，并且支持自定义主题色和样式。

Color UI的用法非常简单，只需引入相应的组件和样式，即可直接在小程序中使用。

本文将详细介绍Color UI的使用方法，包括安装、引入、样式修改和常用组件的使用。

2. 安装和引入Color UI的安装非常简单，只需在小程序项目中的app.json文件中添加Color UI 的依赖即可。

在app.json文件的dependencies字段中添加如下代码："dependencies": {"colorui": "colorui/colorui"}然后在小程序的页面文件中引入所需的组件和样式。

例如，在index.wxss文件中引入按钮组件和样式：@import "colorui/main.wxss";@import "colorui/button.wxss";3. 样式修改Color UI提供了丰富的样式变量，可以直接在项目中修改主题色和样式。

在app.wxss文件中，可以通过修改全局样式变量来改变整个小程序的样式。

例如，要修改主题色为红色，可以添加如下代码：:root {--theme-color: #ff0000;}此外，Color UI还提供了一些常用样式类，可以直接在组件上添加类名来改变其样式。

例如，要修改按钮的背景色为蓝色，可以在按钮上添加cu-btn-primary类：<button class="cu-btn cu-btn-primary">按钮</button>4. 常用组件Color UI提供了丰富的常用组件，包括按钮、输入框、列表、卡片等。

.mui-badge-inverted
<span <span <span <span <span <span
class="mui-badge class="mui-badge class="mui-badge class="mui-badge class="mui-badge class="mui-badge
message Type: String ()
title Type: String () 只 btnValue Type: Array ()
callback Type: Function () 入入 type Value: 'div' () 第 h5
.prompt( message, placeholder, title, title, btnValue, callback, [, type] )
我好情
为其:
mbadge
button mui 个 成 blue (green) 三 (yellow) 要 (red) 比比 (purple) primary success warning danger royal进 .mui-btn 个 不 相 .mui-btn-blue .mui-btn-primary 所 不 进 不
mui-badge-inverted">1</span> mui-badge-primary mui-badge-inverted">2</span> mui-badge-success mui-badge-inverted">3</span> mui-badge-warning mui-badge-inverted">4</span> mui-badge-danger mui-badge-inverted">5</span> mui-badge-royal mui-badge-inverted">6</span>

会取代你的启动器图标。 如何更容易的将高精度图标缩放到 512*512 的提示和建议， 在设计师建议章 节中有讲。 对于高精度的应用程序图标，在 Android Market 的信息和规格，请参阅下面 的文章： 应用程序图形资源（Android Marker 帮助说明） � Android2.0 以后版本
高精度屏幕的启动图标尺寸： 外框：72x72px 图标：60x60px 方形图标：56x56px 中精度屏幕的启动图标尺寸： 外框：48x48px 图标：40x40px 方形图标：38x38px 低精度屏幕启动图标尺寸： 外框：36x36px 图标：30x30px 方形图标：28x28px
材质和颜色 启动图标要有触感、明亮和有质感的材质，即使图标只是简单的形状，但也要尝试一些 取之于现实世界的材质来表现。 Android 启动图标通常由一个大的基本形状，一个中立和主色调组成的较小的形状。图 标可能使用一个保持有相当对比度的中性色。 如果可能的话， 每个图标不使用一个以上的主 色。 图标应该使用包括一系列暗淡的和基本的的色调。不能用太饱和的色调。 启动图标推荐使用的色调如图 3，你可以从中选择元素的基础色和高亮色。也可以使用
24w x 38h px (preferred, width may vary)
状态栏图标 (Android 2.2 及之前版本 )
19 x 19 px
25 x 25 px
38 x 38 px
Tab 图标
24 x 24 px
32 x 32 px
48 x 48 px
对话图标
24 x 24 px
32 x 32 px
Android UI 设计指南（自译） 一、图标设计指南
创建一个统一的外观和整体的用户界面效果以增加产品的价值， 精简的图形样式还能让 用户觉得 UI 更专业。 本文提供的信息能帮助你为应用的用户界面的各个部分创建的图标与 Android2.X 框架 的一般样式相匹配。以下的指南将帮助你创建一个完美而且统一的用户体验。 下面文档讨论关于 Android 应用程序常见类型图标的使用详细指南： 启动图标 启动图标是您的应用程序在设备的主界面和启动窗口的图形表现。 菜单图标 菜单图标是当用户按菜单按钮时放置于选项菜单中展示给用户的图形元素。 状态栏图标 状态栏图标用于应用程序在状态栏中的通知。 Tab 图标 Tab 图标用来表示在一个多选项卡界面的各个选项的图形元素。 对话框图标 对话框图标是在弹出框中显示，增加互动性。 列表视图图标 使用列表视图图标是用图形表示列表项，比如说设置这个程序。 想更快的创建你的图标，可以导向 Android 图标模板包。

说明 自定义 class 类名 标题 是否将顶部距离置为 0 内容区域隐藏边框
类型 Striห้องสมุดไป่ตู้g String Boolean Boolean
默认值 false false
本文档使用 书栈网 · 构建
- 13 -
List 列表
List 列表
概述
基础布局组件。
使用指南
在 .json 中引入组件
本文档使用 书栈网 · 构建
-8-
Layout 栅格布局
Layout 栅格布局
概述
我们采用了24栅格系统，将区域进行24等分，这样可以轻松应对大部分布局问题。使用栅格系统进行网 页布局，可以使页面排版美观、舒适。
我们定义了两个概念，行 row 和列 col ，具体使用方法如下：
-3-
快速上手
快速上手
使用之前
在开始使用 iView Weapp 之前，你需要先阅读 微信小程序自定义组件 的相关文档。
如何使用
到 GitHub 下载 iView Weapp 的代码，将 dist 目录拷贝到自己的项目中。然后按照如下的 方式使用组件，以 Button 为例，其它组件在对应的文档页查看：
5.
<i-cell title="开关">
6.
<switch slot="footer" checked />
7.
</i-cell>
8. </i-cell-group>
API
CellGroup properties
属性 i-class
说明 自定义 class 类名
Cell properties