ant-design/components/input-number/demo/addon.md
afc163 46478d590f
fix: InputNumber arrow align issue (#32409)
* fix: InputNumber arrow align issue

* fix input number demo
2021-10-09 11:21:39 +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>
);

ReactDOM.render(
  <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>,
  mountNode,
);