素材库 - 云闪付设计系统

素材库 Asset Library

Sketch 组件包与金融字体
1. 最新版本 & 银联金融字体
Vue.js 组件库
其他
1. Rem 适配
React Native 组件库

提供云闪付 App 设计语言系统相关设计和开发资源的下载。

Sketch 组件包与金融字体

Sketch 组件包包含了设计语言系统中视觉指南、设计组件等的元素，供设计师依据业务设计页面。银联金融字体是银联特殊定制的金融数字字体，用于云闪付 App 界面设计中出现金融数字的情况。使用 Sketch 组件库时请务必下载，否则会出现字体缺失的情况。

Vue.js 组件库

Vue.js 的前端组件库实现。 Vue.js 组件库 下载地址

快速上手

在开始之前，推荐先学习 Vue 和 ES2015，并正确安装和配置了 Node.js v8.9 或以上。

注意：本指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 Vue 的正确开发方式。如果你刚开始学习前端或者 Vue，将 UI 框架作为你的第一步可能不是最好的主意。

在线演示

可参照在线演示以了解组件效果，或扫描以下二维码在手机上查看。

第一步创建 vue 工程实例

安装脚手架工具 vue-cli

 npm install --global vue-cli

查看 vue 版本号

 vue -V    //注：V 是大写字母 V

安装 vue-cli 成功后，通过 cd 命令进入你想放置项目的文件夹，在命令提示窗口执行创建 vue-cli 工程项目的命令：
```
vue init webpack
```
确认创建项目后，后续还需输入一下项目名称、项目描述、作者、打包方式、是否使用 ESLint 规范代码等等
生成文件目录后，使用 npm 安装依赖：
```
npm install 
```
最后需要执行以下命令来启动项目，启动完成后根据提示进入网址 (一般默认为：http://localhost:8080)：
```
npm run dev
```
到这里，vue 的工程实例已经创建完成了

第二步使用 Unionpay Vue 组件库 (暂用方式)

将 Unionpay Vue 中 unionpay-ui 目录拷贝至你的项目中(与src目录并列)
引入并使用，使用以下方法引用组件

在 src 下 main.js 中完整导入组件：

import Vue from 'vue'
import App from './App'
import router from './router'
import upComponents from '../unionpay-ui'
Vue.config.productionTip = false

Vue.use(upComponents)

/* eslint-disable no-new */
new Vue({
	el: '#app',
	router,
	components: { App },
	template: '<App/>'
})

以上代码便完成了 Unionpay Vue 的引用。

部分引用组件的方式暂未开放

可参考完整组件列表对应使用。

其他

Rem 适配

Unionpay Vue 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下工具:

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 16,
      propList: ['*']
    }
  }
}

React Native 组件库

使用 React Native 组件库（暂用方式） *注：此处描述的为在发布 npm 包前，通过本地引用的临时引用方式。

React Native 组件库 下载地址

将 unionpay_rn 项目中 up_example/components 引用至目标项目中介
按照以下方式在目标代码中引用组件

import React, {Component} from 'react';
import {View, ScrollView, Text, Image, StyleSheet, TextInput} from 'react-native';

import NavigationPage from '../components/NavigationPage/NavigationPage';
import ListRow        from '../components/List/ListRow';
import Button         from '../components/Button/Button';
import Label          from '../components/Label/Label';
import Theme          from '../themes/Theme';
import Icon           from '../components/Icon/Icon';

import Field  from '../components/Form/Field.js';
import Input  from '../components/Form/Input.js';

export default class InputTextExample extends NavigationPage {

  static defaultProps = {
    ...NavigationPage.defaultProps,
    title: 'Text 类型',
    showBackButton: true,
  };

  renderPage() {
    return (
      <ScrollView style= >
        <Field type='text' label='标题文字' description='Text 单行 文本框 有标题' errorMessage='这里是错误信息' hasCharacterCount={true}>
            <Input style= placeholder='输入文字内容' multiline/>
        </Field>

        <Field type='text' label='标题文字' description='Text 单行 文本框 有标题 错误' errorMessage='这里是错误信息'>
            <Input style= placeholder='输入文字内容' multiline/>
        </Field>

        <Field type='text' label='标题文字' description='Text 单行 文本框 有标题 禁用' disabled>
            <Input style= placeholder='输入文字内容' multiline disabled/>
        </Field>

        <Field type='text' description='Text 单行 文本框 无标题' message='这里是提示信息'>
            <Input style= placeholder='输入文字内容' multiline/>
        </Field>

        <Field type='text' description='Text 单行 文本框 无标题 错误' errorMessage='这里是错误信息'>
            <Input style= placeholder='输入文字内容' multiline hasCharacterCount/>
        </Field>

        <Field type='text' description='Text 单行 文本框 无标题 禁用' disabled>
            <Input style= placeholder='输入文字内容' multiline disabled/>
        </Field>

        <View style= />
      </ScrollView>
    );
  }
}