Ant Design of React 介绍
1, antd 是基于 Ant Design 设计体系的 React UI 组件库
2, 开箱即用的高质量 React 组件
3, 使用 TypeScript 构建, 提供完整的类型定义文件
一, 装包
NPM install antd --save
二, 进入 Ant Design 官网查看所需组件
以按钮 Button 作介绍
进入官网点击 组件
官网
选择 Button 进行查看, 其中有不同类型的 Button 按钮的代码演示以及 API
代码演示
API
三, 引用
在需要使用 antd 组件的页面导入所需组件, 并且导入 antd 的样式文件
- import {
- Input
- } from 'antd'
- import 'antd/dist/antd.CSS'
四, Input 组件的使用
1, 进入 Ant Design 官网, 进入组件部分找到 Input, 在代码演示中选择需要的 Input 框类型, 点击展开代码按钮
image.PNG
2, 将代码复制到项目中
- <Input placeholder="Basic usage" />
- <div style={{
- width: '500px',
- height: '200px',
- background: '#fff',
- padding: '30px',
- borderRadius:'10px'
- }}>
- {/* Input 框 */}
- <div style={{
- width: '100%',
- display: 'flex',
- justifyContent: 'space-around',
- alignItems: 'center',
- }}>
- <div style={{width:'100px',fontSize:'15px'}}> 输入框:</div>
- <Input placeholder="Basic usage" />
- </div>
- {/* Input 框 */}
- </div>
3, 项目运行中的效果
image.PNG
4, 查看 API, 搞出更花里胡哨的 input 框
以 value 属性为例, API 介绍为输入框内容
在代码中为 Input 框设置 value 属性
<Input value={'我是因 value 属性而生的内容'} />
Input-value
项目运行中的效果
请看输入框 2
五, Button 组件的使用
各个组件使用流程基本一致: 进入官网找到组件中的 Button, 进入代码演示, 选择需要的类型展开代码, 复制到所需位置. 在此不做冗余介绍, 直接上图和代码
不要忘了 import
- import {
- Input, Button
- } from 'antd'
- <Button type="primary"> 按钮 </Button>
Buttom
六, 最终效果及文件代码
最终效果
- import React, { Component } from 'react'
- import { Input, Button } from 'antd'
- import 'antd/dist/antd.css'
- export class AntdPages extends Component {
- constructor(props) {
- super(props)
- this.state = {
- };
- };
- render() {
- return (
- <div style={{
- width: '100%',
- height: Windows.innerHeight,
- background: '#001D37',
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- }}>
- <div style={{
- width: '500px',
- height: '200px',
- background: '#fff',
- padding: '30px',
- borderRadius: '10px'
- }}>
- {/* Input 框 */}
- <div style={{
- width: '100%',
- display: 'flex',
- justifyContent: 'space-around',
- alignItems: 'center',
- }}>
- <div style={{ width: '100px', fontSize: '15px' }}> 输入框 1:</div>
- <Input placeholder="Basic usage" />
- </div>
- {/* Input 框 */}
- {/* Input 框 */}
- <div style={{
- width: '100%',
- marginTop: '20px',
- display: 'flex',
- justifyContent: 'space-around',
- alignItems: 'center',
- }}>
- <div style={{ width: '100px', fontSize: '15px' }}> 输入框 2:</div>
- <Input value={'我是因 value 属性而生的内容'} />
- </div>
- {/* Input 框 */}
- {/* Button */}
- <div style={{
- width: '100%',
- marginTop: '30px',
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- }}>
- <Button type="primary"> 按钮 </Button>
- </div>
- {/* Buttom */}
- </div>
- </div>
- )
- }
- }
- export default AntdPages
欲知完整代码如何请见 GitHub
- https://github.com/jade-kylin/antd-study.git
- Git clone https://github.com/jade-kylin/antd-study.git
执行即可获取到完整项目文件
来源: http://www.jianshu.com/p/b477ad34f85f