Ant Design select 组件中添加图标
时间: 2024-05-13 08:16:28 浏览: 7
Ant Design 的 Select 组件提供了 `suffixIcon` 和 `prefixIcon` 两个属性来分别设置后缀和前缀图标。
例如,我们可以在 Select 组件中添加一个后缀图标,代码如下:
```jsx
import { Select } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
const { Option } = Select;
function handleChange(value) {
console.log(`selected ${value}`);
}
function App() {
return (
<Select
suffixIcon={<SearchOutlined />}
defaultValue="lucy"
style={{ width: 120 }}
onChange={handleChange}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
);
}
export default App;
```
这里我们引入了 `SearchOutlined` 图标,然后使用 `suffixIcon` 属性将其作为 Select 组件的后缀图标。
类似地,我们可以使用 `prefixIcon` 属性来设置前缀图标。