zent/src/select/demos/9.custom-display.md

一套前端设计语言和基于React的实现

---
order: 9
zh-CN:
	title: 自定义显示
	placeholder: 选择一项
en-US:
	title: Basic Usage
	placeholder: Select an option..
---

```js
import { Select } from 'zent';

const options = [
	{
		key: '1',
		text: 'Option 1',
	},
	{
		key: '2',
    text: 'Option 2',
    addition: '辅助信息',
	},
	{
		key: '3',
		text: 'Option 3',
	},
		{
		key: '4',
		text: 'Option 4',
	},
];

function renderOptionContent(item) {
  const { addition, text } = item;
  return <div>
		<div>
			{text}
		</div>
		<div className="select-addition-demo">
			{addition && <span>{addition}</span>}
		</div>
	</div>;
}

ReactDOM.render(
	<Select clearable options={options} placeholder="{i18n.placeholder}" renderOptionContent={renderOptionContent} />,
	mountNode
);
```

<style>
	.select-addition-demo {
    color: #999;
		font-size: 12px;
		margin-top: 2px;
	}
	.zent-popover-v2 .zent-select-v2-option {
		height: auto;
	}
</style>