mengqu-ui v0.2.3

本项目由追梦人团队开发维护，旨在提供一套基于React的高质量的UI框架，组件尚在加速构建中，欢迎您的关注，我们时刻期待您的加入！

安装和使用方式

您可以在项目中，按照下面的方法使用mengqu-ui。

安装mengqu-ui

npm i mengqu-ui

使用方式

1、全局引入css

import 'mengqu-ui/dist/index.css'

2、按需引入组件

import { Button } from 'mengqu-ui'

3、在组件中使用

<Button btnType="danger">primary</Button>

组件列表

一、Button

引入方式

    import { Button } from 'mengqu-ui'

使用方式

    <Button>Button</Button>

参数列表

二、Icon

引入方式

    import { Icon } from 'mengqu-ui'

使用方式

    <Icon icon="ad" size="3x"/>

参数列表

上面只列出了一些常用的 mengqu-ui字体图标库基于fontawesome， 如果不能满足您的开发，可以点击https://fontawesome.com/icons?d=gallery&q=pay&s=solid&m=free 查看更多的图标

三、Iput

引入方式

import { Input } from 'mengqu-ui'

使用方式

<Input
  style={{width: '300px'}}
  placeholder="placeholder"
  onChange={action('changed')}
/>

参数列表

四、AutoComplete

引入方式

import { autoComplete } from 'mengqu-ui'

使用方式

<AutoComplete 
    fetchSuggestions={handleFetch}
    onSelect={action('selected')}
    //renderOption={renderOption}
  />

const lakers = ['bradley', 'pope', 'caruso', 'cook', 'cousins',
'james', 'AD', 'green', 'howard', 'kuzma', 'McGee', 'rando']

const handleFetch = (query: string) => {
  return lakers.filter(name => name.includes(query)).map(name => ({value: name}))
}

参数列表

五、AutoComplete

引入方式

import { Menu, MenuItem } from 'mengqu-ui'

使用方式

<Menu>
    <MenuItem>
        菜单一
    </MenuItem>
    <MenuItem>
        菜单二
    </MenuItem>
    <MenuItem>
        菜单三
    </MenuItem>
</Menu>

参数列表

六、Progress

引入方式

import { Progress } from 'mengqu-ui'

使用方式

<Progress percent={30}></Progress>

参数列表

七、Upload

引入方式

import { Upload } from 'mengqu-ui'

使用方式

<Upload
    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    onChange={action('changed')}
    onRemove={action('removed')}
  >
    <Button btnType="primary"> Upload File </Button>
  </Upload>

参数列表