Haru UI

# Haru UI

一个实验性质的组件库

主图

# 简介及特点

  • 名为“Haru UI”的组件库
  • 实现了类似"坐标系统"的坐标器
  • 使用grid和flex布局实现自适应
  • 颜色可高度自定义
  • 物料 = 容器 + 填充物
  • 应用 = 坐标系 + 容器 + 填充物 = 坐标系 + 物料

# 安装

npm install haru-ui --save
  • 全局
import Haru from 'haru-ui'

Vue.use(Haru)

注意

  1. 全局引入并不会引入HaIcons和HaCharts
  2. 要使用HaIcons，请参照HaIcons
  3. 要使用HaCharts，请参照HaCharts
  • 单组件按需引入

警告

  1. 单组件引入时引用的是源码， 故在打包时需要支持vue和sass，以及vue的jsx语法的编译
  2. 本组件库使用webpack打包编译
import 'haru-ui/style' //导入样式表

// 导入各个组件，组件名[类目]如下表所示
import 组件名(PascalCase) from 'haru-ui/lib/components/类目/组件名(kebab-case)' 

Vue.use(组件名(PascalCase))
组件名[类目] 组件名[类目] 组件名[类目]
HaCoordinater[coordinater] HaRectangle[containers] HaCard[containers]
HaButton[struffings] HaAvatar[struffings] HaCheck[struffings]
HaNumber[struffings] HaLetter[struffings] HaBack[struffings]
HaPage[struffings] HaTable[materials] HaMenuVer[materials]
HaMenuHor[materials] HaInput[materials] HaNotify[others]
HaTooltip[others] HaScroll[others] HaMask[others]
HaDetailBox[others]

注意

本组件库未经严格测试, 只作为为实验"坐标系统"的概念在前端中的应用所产生的组件库,如果要使用请自行测试.同时有bug的话也欢迎提交issues

0. 全局 →