kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-26 22:42:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(select): add example for disable-match-width

Browse Source
This commit is contained in:
unix
2020-05-28 10:21:17 +08:00
parent 9e9a6b8d1e
commit 16a49271b3
2 changed files with 37 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
pages/en-us/components/select.mdx
View File

@@ -115,6 +115,24 @@ Display a dropdown list of items.
</Select>
`} />
<Playground
title="Over width"
desc="`Option` to show more text with adaptive width."
scope={{ Select, Spacer }}
code={`
<>
<Select placeholder="Choose one" value="1" width="150px">
<Select.Option value="1">Truncate an overly long string</Select.Option>
<Select.Option value="2">Option 2</Select.Option>
</Select>
<Spacer y={.5} />
<Select placeholder="Choose one" value="1" width="150px" disableMatchWidth>
<Select.Option value="1">Autoscale option width when text is too long</Select.Option>
<Select.Option value="2">Option 2</Select.Option>
</Select>
</>
`} />
<Attributes edit="/pages/en-us/components/select.mdx">
<Attributes.Title>Select.Props</Attributes.Title>
@@ -132,6 +150,7 @@ Display a dropdown list of items.
| **onChange** | selected value | <Code>(val: string &#124; string[]) => void </Code> | - | - |
| **dropdownClassName** | className of dropdown menu | `string` | - | - |
| **dropdownStyle** | style of dropdown menu | `object` | - | - |
| **disableMatchWidth** | disable Option from follow Select width | `boolean` | - | `false` |
| ... | native props | `HTMLAttributes` | `'name', 'alt', 'className', ...` | - |
<Attributes.Title>Select.Option.Props</Attributes.Title>

18
pages/zh-cn/components/select.mdx
View File

@@ -115,6 +115,23 @@ export const meta = {
</Select>
`} />
<Playground
title="超出宽度"
desc="`Option` 可以自适应宽度以展示更多文本。"
scope={{ Select, Spacer }}
code={`
<>
<Select placeholder="选择内容" value="1" width="150px">
<Select.Option value="1">截断过程的文本内容当文本过长</Select.Option>
<Select.Option value="2">选项 2</Select.Option>
</Select>
<Spacer y={.5} />
<Select placeholder="选择内容" value="1" width="150px" disableMatchWidth>
<Select.Option value="1">自动伸缩选项宽度以显示更多文本</Select.Option>
<Select.Option value="2">选项 2</Select.Option>
</Select>
</>
`} />
<Attributes edit="/pages/zh-cn/components/select.mdx">
<Attributes.Title>Select.Props</Attributes.Title>
@@ -133,6 +150,7 @@ export const meta = {
| **onChange** | 选项被选中所触发的事件 | <Code>(val: string &#124; string[]) => void </Code> | - | - |
| **dropdownClassName** | 下拉框的自定义类名 | `string` | - | - |
| **dropdownStyle** | 下拉框的自定义样式 | `object` | - | - |
| **disableMatchWidth** | 禁止 Option 跟随单选框的宽度 | `boolean` | - | `false` |
| ... | 原生属性 | `HTMLAttributes` | `'name', 'alt', 'className', ...` | - |
<Attributes.Title>Select.Option.Props</Attributes.Title>