mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 13:18:04 +08:00
28aaeafbbc
* feat(mentions): supports 'allowClear' option * feat(mentions): add allowClear testcase * feat(mentions): update package and styles * feat(mentions): update lint and styles * fix: fixed lint error * test: add case for custom clearIcon * feat: add useAllowClear hook * feat: rename useAllowClear to getAllowClear * feat: rename useAllowClear to getAllowClear * feat(mentions): add demo for allowClear * feat(mentions): update demo desc * feat(mentions): update demo desc * feat(mentions): style align middle * feat: add multi line mentions demo and update icon position * feat: fixing visual regression report --------- Co-authored-by: afc163 <afc163@gmail.com>
25 lines
590 B
TypeScript
25 lines
590 B
TypeScript
import React, { useState } from 'react';
|
|
import { CloseSquareFilled } from '@ant-design/icons';
|
|
import { Mentions } from 'antd';
|
|
|
|
const App: React.FC = () => {
|
|
const [value, setValue] = useState('hello world');
|
|
return (
|
|
<>
|
|
<Mentions value={value} onChange={setValue} allowClear />
|
|
<br />
|
|
<br />
|
|
<Mentions
|
|
value={value}
|
|
onChange={setValue}
|
|
allowClear={{ clearIcon: <CloseSquareFilled /> }}
|
|
/>
|
|
<br />
|
|
<br />
|
|
<Mentions value={value} onChange={setValue} allowClear rows={3} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|