ant-design/components/input-number/demo/addon.md
MadCcc 6776bb8916
docs: demo support react18 (#34843)
* docs: update demo

* chore: add script

* test: fix demo test

* docs: convert demos

* chore: move script

* test: remove react-dom import

* chore: update deps

* docs: update riddle js

* test: fix image test

* docs: fix riddle demo
2022-04-03 23:27:45 +08:00

1.1 KiB

order title
2
zh-CN en-US
前置/后置标签 Pre / Post tab

zh-CN

用于配置一些固定组合。

en-US

Using pre & post tabs example.

import { InputNumber, Select, Space, Cascader } from 'antd';
import { SettingOutlined } from '@ant-design/icons';

const { Option } = Select;

const selectBefore = (
  <Select defaultValue="add" style={{ width: 60 }}>
    <Option value="add">+</Option>
    <Option value="minus">-</Option>
  </Select>
);
const selectAfter = (
  <Select defaultValue="USD" style={{ width: 60 }}>
    <Option value="USD">$</Option>
    <Option value="EUR"></Option>
    <Option value="GBP">£</Option>
    <Option value="CNY">¥</Option>
  </Select>
);

export default () => (
  <Space direction="vertical">
    <InputNumber addonBefore="+" addonAfter="$" defaultValue={100} />
    <InputNumber addonBefore={selectBefore} addonAfter={selectAfter} defaultValue={100} />
    <InputNumber addonAfter={<SettingOutlined />} defaultValue={100} />
    <InputNumber
      addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}
      defaultValue={100}
    />
  </Space>
);