致访客
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
第二十二节
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 >
)
}
}