ant-design/components/input/demo/advance-count.tsx
二货爱吃白萝卜 6af1d95cf4
feat: Input & TextArea support count (#45140)
* docs: init

* chore: update example

* test: update test

* docs: update doc

* chore: fix lint

* chore: update limit
2023-10-10 16:22:23 +08:00

45 lines
1007 B
TypeScript

import React from 'react';
import { Flex, Input, Typography } from 'antd';
import { runes } from 'runes2';
const App: React.FC = () => (
<Flex vertical gap={16}>
<div>
<Typography.Title level={5}>Exceed Max</Typography.Title>
<Input
count={{
show: true,
max: 10,
}}
defaultValue="Hello, antd!"
/>
</div>
<div>
<Typography.Title level={5}>Emoji count as length 1</Typography.Title>
<Input
count={{
show: true,
strategy: (txt) => runes(txt).length,
}}
defaultValue="🔥🔥🔥"
/>
</div>
<div>
<Typography.Title level={5}>Not exceed max</Typography.Title>
<Input
count={{
show: true,
max: 6,
strategy: (txt) => runes(txt).length,
exceedFormatter: (txt, { max }) => runes(txt).slice(0, max).join(''),
}}
defaultValue="🔥 antd"
/>
</div>
</Flex>
);
export default App;