# 快速开始

# 扫码体验

# 脚手架

推荐使用 hips-front -> @hips/vue-cli-plugin-ace 插件创建项目

# 安装

# NPM

npm i @hips/uni-ui -S --registry=http://nexus.saas.hand-china.com/repository/hzero-npm-group/

# YARN

yarn add @hips/uni-ui --registry=http://nexus.saas.hand-china.com/repository/hzero-npm-group/

# 引入组件

由于小程序组件引入必须精确到组件源码路径，故不支持动态引入。

组件库依赖中直接暴露组件源码，一般直接引入 .vue 或者 .js 文件即可使用

# 普通组件

import HipsButton from '@hips/uni-ui/lib/button';
import HipsCell from '@hips/uni-ui/lib/cell';

export default {
  components: {
    HipsButton,
    HipsCell
  }
};

1
2
3
4
5
6
7
8
9

# 部分组件支持插件化调用

// main.js
import Vue from 'vue';
import Toast from '@/components/toast';

Vue.use(Toast);

1
2
3
4
5

<!-- some-page.vue -->
<hips-toast id="hipsToast" />

1
2

// some-page.vue
import HipsToast from '@/components/toast/component';

export default {
  components: {
    HipsToast
  }
};

1
2
3
4
5
6
7
8

# 定制主题

# 介绍

@hips/uni-ui 按照 UED 团队设计，提供默认的样式主题，并抽取样式变量，可以进行定制化覆盖。

# 样式变量

每个组件都会都会提供可覆盖的样式变量，可查看各组件文档 样式变量 小节。

...
$cell-title-color = $font-color-title-supply;
$cell-title-font-size = $font-size-t3;
$cell-description-color = $font-color-subtitle;
$cell-description-font-size = $font-size-t4;
$cell-value-color = #4d4d44;
$cell-value-font-size = $font-size-t3;
...

1
2
3
4
5
6
7
8

# 变量覆盖

使用 @hips/ui-stylus-loader 进行组件变量覆盖

变量默认前缀为 $，可以省略。
变量覆盖是全局的，如果不需要全局覆盖，可以通过样式穿透的方式修改样式。

安装 @hips/ui-stylus-loader 后，在 vue.config.js 中进行如下配置。

module.exports = {
  chainWebpack: (config) => {
    ...
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
    types.forEach((type) =>
      addStylusModifyVars(config.module.rule('stylus').oneOf(type))
    );
  },
};

function addStylusModifyVars(rule) {
  rule
    .use('@hips/ui-stylus-loader')
    .loader('@hips/ui-stylus-loader')
    .options({
      modifyVars: {
        prefix: '$',  // 前缀，默认 $，可省略
        vars: { // 需要覆盖的变量对象
          'cell-title-color': 'red'
        },
        imports: ['./src/hips.theme.styl'], // 通过引入stylus 文件修改变量
      },
    })
    .end();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

重新运行即可查看效果

# 适配

组件内容使用 rpx 作为样式单位
存在 px 转化的，默认转化率为 750 : window.width

# 组件分布

当前已有 37 个组件

布局组件 4

基础组件 12

表单组件 9

滚动组件 3

弹窗组件 7

高级组件 2

Grid 栅格