ant-design/components/select/demo/custom-label-render.tsx
xliez 1491b0c624
docs(Select): Update docs for Select new API: labelRender (#47811)
* docs: 添加 labelRender API 文档

Signed-off-by: xliez <xliez@foxmail.com>

* docs: supplement 5.15.0 changelog

* test: update snapshots

---------

Signed-off-by: xliez <xliez@foxmail.com>
2024-03-14 22:04:14 +08:00

28 lines
650 B
TypeScript

import React from 'react';
import { Select } from 'antd';
import type { SelectProps } from 'antd';
type LabelRender = SelectProps['labelRender'];
const options = [
{ label: 'gold', value: 'gold' },
{ label: 'lime', value: 'lime' },
{ label: 'green', value: 'green' },
{ label: 'cyan', value: 'cyan' },
];
const labelRender: LabelRender = (props) => {
const { label, value } = props;
if (label) {
return value;
}
return <span> value </span>;
};
const App: React.FC = () => (
<Select labelRender={labelRender} defaultValue="1" style={{ width: '100%' }} options={options} />
);
export default App;