1 | # Ant Design Compatible
|
2 |
|
3 | [![NPM version](https://img.shields.io/npm/v/@ant-design/compatible.svg?style=flat)](https://npmjs.org/package/@ant-design/compatible)
|
4 | [![NPM downloads](http://img.shields.io/npm/dm/@ant-design/compatible.svg?style=flat)](https://npmjs.org/package/@ant-design/compatible)
|
5 | [![CircleCI](https://circleci.com/gh/ant-design/compatible.svg?style=svg)](https://circleci.com/gh/ant-design/compatible)
|
6 |
|
7 | ## Install
|
8 |
|
9 | ```bash
|
10 | yarn add @ant-design/compatible
|
11 | ```
|
12 |
|
13 | ## Usage
|
14 |
|
15 | Helps you to compatible different components between v3 and v4.
|
16 |
|
17 | Follow Component are provided compatible version:
|
18 |
|
19 | - Form
|
20 | - Icon
|
21 | - Mention
|
22 |
|
23 | ```jsx
|
24 | import { Form } from '@ant-design/compatible';
|
25 |
|
26 | import '@ant-design/compatible/assets/index.css'; // If you need
|
27 | ```
|
28 |
|
29 | ## Introduction
|
30 |
|
31 | ### Form
|
32 |
|
33 | Form of v3 api is different with v4:
|
34 |
|
35 | ```jsx
|
36 | // V3
|
37 | import { Form, Input, Button } from 'antd';
|
38 |
|
39 | class MyForm extends React.Component {
|
40 | render() {
|
41 | const { form } = this.props;
|
42 | return (
|
43 | <Form>
|
44 | {form.getFieldDecorator('username')(<Input />)}
|
45 | <Button>Submit</Button>
|
46 | </Form>
|
47 | );
|
48 | }
|
49 | }
|
50 |
|
51 | export default Form.create()(MyForm);
|
52 | ```
|
53 |
|
54 | Change to:
|
55 |
|
56 | ```jsx
|
57 | // V4 with compatible
|
58 | import { Form as LegacyForm } from '@ant-design/compatible';
|
59 | import { Input, Button } from 'antd';
|
60 | import '@ant-design/compatible/assets/index.css';
|
61 |
|
62 | class MyForm extends React.Component {
|
63 | render() {
|
64 | const { form } = this.props;
|
65 | return (
|
66 | <LegacyForm>
|
67 | {form.getFieldDecorator('username')(<Input />)}
|
68 | <Button>Submit</Button>
|
69 | </LegacyForm>
|
70 | );
|
71 | }
|
72 | }
|
73 |
|
74 | export default Form.create()(MyForm);
|
75 | ```
|
76 |
|
77 | ### Icon
|
78 |
|
79 | Just import `Icon` from package `@ant-design/compatible` and the reset is almost same as before.
|
80 |
|
81 | ```jsx
|
82 | // V3
|
83 | import { Icon, Button } from 'antd';
|
84 |
|
85 | class MyIconList extends React.Component {
|
86 | render() {
|
87 | return (
|
88 | <div className="icons-list">
|
89 | <Button>hello button</Button>
|
90 | <Icon type="home" />
|
91 | <Icon type="setting" theme="filled" />
|
92 | <Icon type="smile" theme="outlined" />
|
93 | <Icon type="sync" spin />
|
94 | <Icon type="smile" rotate={180} />
|
95 | <Icon type="loading" />
|
96 | </div>
|
97 | );
|
98 | }
|
99 | }
|
100 |
|
101 | export default MyIconList;
|
102 | ```
|
103 |
|
104 | Change to:
|
105 |
|
106 | ```jsx
|
107 | // V4 with compatible
|
108 | import { Icon as LegacyIcon } from '@ant-design/compatible';
|
109 |
|
110 | class MyIconList extends React.Component {
|
111 | render() {
|
112 | return (
|
113 | <div className="icons-list">
|
114 | <Button>hello button</Button>
|
115 | <LegacyIcon type="home" />
|
116 | <LegacyIcon type="setting" theme="filled" />
|
117 | <LegacyIcon type="smile" theme="outlined" />
|
118 | <LegacyIcon type="sync" spin />
|
119 | <LegacyIcon type="smile" rotate={180} />
|
120 | <LegacyIcon type="loading" />
|
121 | </div>
|
122 | );
|
123 | }
|
124 | }
|
125 |
|
126 | export default MyIconList;
|
127 | ```
|
128 |
|
129 | ### Mention
|
130 |
|
131 | The legacy usage in v3
|
132 |
|
133 | ```jsx
|
134 | import { Mention } from 'antd';
|
135 |
|
136 | const { toString } = Mention;
|
137 |
|
138 | ReactDOM.render(
|
139 | <Mention
|
140 | style={{ width: '100%' }}
|
141 | onChange={onChange}
|
142 | defaultSuggestions={[
|
143 | 'afc163',
|
144 | 'benjycui',
|
145 | 'yiminghe',
|
146 | 'RaoHai',
|
147 | '中文',
|
148 | 'にほんご',
|
149 | ]}
|
150 | onSelect={onSelect}
|
151 | placement="top"
|
152 | />,
|
153 | mountNode,
|
154 | );
|
155 | ```
|
156 |
|
157 | Compatible usage in v4
|
158 |
|
159 | ```jsx
|
160 | import { Mention } from '@ant-design/compatible';
|
161 | import '@ant-design/compatible/assets/index.css';
|
162 |
|
163 | const { toString } = Mention;
|
164 |
|
165 | ReactDOM.render(
|
166 | <Mention
|
167 | style={{ width: '100%' }}
|
168 | onChange={onChange}
|
169 | defaultSuggestions={[
|
170 | 'afc163',
|
171 | 'benjycui',
|
172 | 'yiminghe',
|
173 | 'RaoHai',
|
174 | '中文',
|
175 | 'にほんご',
|
176 | ]}
|
177 | onSelect={onSelect}
|
178 | placement="top"
|
179 | />,
|
180 | mountNode,
|
181 | );
|
182 | ```
|
183 |
|
184 | ## FAQ
|
185 |
|
186 | ### Missing `Grid` style when use `Form`.
|
187 |
|
188 | You should import `Grid` style by youself.
|
189 |
|
190 | ```js
|
191 | import 'antd/es/grid/style/css'; // By CSS
|
192 | // import 'antd/es/grid/style'; // By LESS
|
193 | ```
|