ola-ui

1.4.10 • Public • Published

ola-ui

基于 Xeact 与 Ant Design 的组件库。

Install

yarn add ola-ui

DEV

yarn build  ## 打包 
 
yarn dev  ## 打包 (watch 模式) 

Quick Start

import style

import 'ola-ui/dist/ola.less'; 

use component

import { Button } from 'ola-ui';
 
...
 
<Button>Button</Button>  
 
...

use components as xeact

<script src="//mytask.jd.com/api/download?fileName=env_1522133871096.js"></script>
import 'ola-ui/lib/x';
<div>
  <x-button type="primary" loading>Primary Button</x-button>
</div>

webpack rule for ola-ui style

{
  test: /ola\.less$/,
  use: [ 'style-loader',
    {
      loader: "css-loader",
      options: {
        minimize: true,
        sourceMap: true,
        importLoaders: 1,
        modules: false,
        localIdentName: '[local]--[hash:base64:5]'
      }
    }, {
      loader: "less-loader",
      options: {
        sourceMap: true,
        modifyVars: theme,
        javascriptEnabled: true,
        paths: [ path.resolve(__dirname, "node_modules") ]
      }
    }
  ]
}

webpack rule for app style

{
  test: /\.less$/,
  exclude: [
    /ola\.less$/,
  ],
  use: ['style-loader',
    {
      loader: "css-loader",
      options: {
        minimize: true,
        sourceMap: true,
        importLoaders: 1,
        modules: true,
        localIdentName: '[local]--[hash:base64:5]'
      }
    }, {
      loader: "less-loader",
      options: {
        sourceMap: true,
        modifyVars: theme,
        javascriptEnabled: true,
      }
    }
  ]
}

工程类依赖添加按需加载 babel 插件

yarn add --dev babel-plugin-transform-imports
[
  "transform-imports",
  {
    "ola-ui": {
      "transform": "ola-ui/lib/components/${member}"
    }
  }
]

Structure

components

  • index.js --- 组件实现
  • x.js --- 组件的 xeact 封装
  • x-foo-bar.js --- 关联内部组件的 xeact 封装
  • style.less --- 内部样式(css modules)

styles

  • fonts/ icon font
  • global/ 全局公共样式

Readme

Keywords

Package Sidebar

Install

npm i ola-ui

Weekly Downloads

1

Version

1.4.10

License

MIT

Unpacked Size

993 kB

Total Files

487

Last publish

Collaborators

  • pengzhanlee