React学习笔记【19】

第二十二节

Ant UI框架

安装使用

npm install antd-mobile --save

按需引入

npm run eject
npm install babel-plugin-import --save

在package.json中找到 babel 配置项

...
"babel": {
    "presets": [
        "react-app"
    ]
},
...

添加

"plugins": [
    [
        "import",
        {
            "libraryName": "antd-mobile",
            "style": "css"
        }
    ]
]

添加后变成

...
"babel": {
    "presets": [
        "react-app"
    ],
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd-mobile",
                "style": "css"
            }
        ]
    ]
},
...

在需要的页面导入
import { Button, WhiteSpace, WingBlank } from 'antd-mobile';
使用
<Button>default</Button>
即可

本节代码

import React from "react"
import { WhiteSpace, Button, WingBlank } from "antd-mobile"

export default class App extends React.Component {
    render() {
        return (
            <div>
                <WingBlank>
                    <Button>default</Button><WhiteSpace />
                    <Button disabled>default disabled</Button><WhiteSpace />

                    <Button type="primary">primary</Button><WhiteSpace />
                    <Button type="primary" disabled>primary disabled</Button><WhiteSpace />

                    <Button type="warning">warning</Button><WhiteSpace />
                    <Button type="warning" disabled>warning disabled</Button><WhiteSpace />

                    <Button loading>loading button</Button><WhiteSpace />
                    <Button icon="check-circle-o">with icon</Button><WhiteSpace />
                    <Button icon={<img src="https://gw.alipayobjects.com/zos/rmsportal/jBfVSpDwPbitsABtDDlB.svg" alt="" />}>with custom icon</Button><WhiteSpace />
                    <Button icon="check-circle-o" inline size="small" style={{ marginRight: '4px' }}>with icon and inline</Button>
                    <Button icon="check-circle-o" inline size="small">with icon and inline</Button>
                    <WhiteSpace />

                    {/* <Button activeStyle={false}>无点击反馈</Button><WhiteSpace /> */}
                    {/* <Button activeStyle={{ backgroundColor: 'red' }}>custom feedback style</Button><WhiteSpace /> */}

                    <WhiteSpace />
                    <Button type="primary" inline style={{ marginRight: '4px' }}>inline primary</Button>
                    {/* use `am-button-borderfix`. because Multiple buttons inline arranged, the last one border-right may not display */}
                    <Button type="ghost" inline style={{ marginRight: '4px' }} className="am-button-borderfix">inline ghost</Button>

                    <WhiteSpace />
                    <Button type="primary" inline size="small" style={{ marginRight: '4px' }}>primary</Button>
                    <Button type="primary" inline size="small" disabled>primary disabled</Button>
                    <WhiteSpace />
                    <Button type="ghost" inline size="small" style={{ marginRight: '4px' }}>ghost</Button>
                    {/* use `am-button-borderfix`. because Multiple buttons inline arranged, the last one border-right may not display */}
                    <Button type="ghost" inline size="small" className="am-button-borderfix" disabled>ghost disabled</Button>
                </WingBlank>
            </div >
        )
    }

}