mirror of
https://github.com/zhigang1992/react.git
synced 2026-05-28 15:44:34 +08:00
091751959e
* docs: export individual style types for each component * docs: improve the copywriting content of the document * docs: optimize the document site experience on mobile devices
264 lines
11 KiB
Plaintext
264 lines
11 KiB
Plaintext
import { Layout, Playground, Attributes } from 'lib/components'
|
|
import { Select, Spacer, Code, Modal, useModal, Button } from 'components'
|
|
|
|
export const meta = {
|
|
title: 'Select',
|
|
group: 'Data Entry',
|
|
}
|
|
|
|
## Select
|
|
|
|
Display a dropdown list of items.
|
|
|
|
<Playground
|
|
desc="Basic usage."
|
|
scope={{ Select }}
|
|
code={`
|
|
() => {
|
|
const handler = val => console.log(val)
|
|
return (
|
|
<Select placeholder="Choose one" onChange={handler}>
|
|
<Select.Option value="1">Option 1</Select.Option>
|
|
<Select.Option value="2">Option 2</Select.Option>
|
|
</Select>
|
|
)
|
|
}
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Type"
|
|
desc="Differentiate states by color."
|
|
scope={{ Select, Spacer }}
|
|
code={`
|
|
() => (
|
|
<>
|
|
<Select placeholder="Default" type="default">
|
|
<Select.Option value="1">Option 1</Select.Option>
|
|
<Select.Option value="2">Option 2</Select.Option>
|
|
</Select>
|
|
<Spacer h={.5} />
|
|
<Select type="success" initialValue="1">
|
|
<Select.Option value="1">Option 1</Select.Option>
|
|
<Select.Option value="2">Option 2</Select.Option>
|
|
</Select>
|
|
<Spacer h={.5} />
|
|
<Select type="warning" initialValue="2">
|
|
<Select.Option value="1">Option 1</Select.Option>
|
|
<Select.Option value="2">Option 2</Select.Option>
|
|
</Select>
|
|
<Spacer h={.5} />
|
|
<Select type="error" initialValue="1">
|
|
<Select.Option value="1">Option 1</Select.Option>
|
|
<Select.Option value="2">Option 2</Select.Option>
|
|
</Select>
|
|
</>
|
|
)
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Disabled"
|
|
desc="Disable all options."
|
|
scope={{ Select }}
|
|
code={`
|
|
<Select placeholder="Choose one" disabled>
|
|
<Select.Option value="1">Option 1</Select.Option>
|
|
<Select.Option value="2">Option 2</Select.Option>
|
|
</Select>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Disabled Option"
|
|
desc="disable specified options."
|
|
scope={{ Select }}
|
|
code={`
|
|
<Select placeholder="Choose one">
|
|
<Select.Option value="1" disabled>Option 1</Select.Option>
|
|
<Select.Option value="2">Option 2</Select.Option>
|
|
</Select>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Without Icon"
|
|
desc="Hide icon on right."
|
|
scope={{ Select }}
|
|
code={`
|
|
<Select placeholder="Choose one" pure>
|
|
<Select.Option value="1">Option 1</Select.Option>
|
|
<Select.Option value="2">Option 2</Select.Option>
|
|
</Select>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Labels"
|
|
desc="show data as a group."
|
|
scope={{ Select }}
|
|
code={`
|
|
<Select placeholder="Frameworks">
|
|
<Select.Option label>JavaScript</Select.Option>
|
|
<Select.Option value="react">React</Select.Option>
|
|
<Select.Option value="angular">Angular</Select.Option>
|
|
<Select.Option label>Ruby</Select.Option>
|
|
<Select.Option value="rails">Rails</Select.Option>
|
|
<Select.Option value="sinatra">Sinatra</Select.Option>
|
|
</Select>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Divider"
|
|
scope={{ Select }}
|
|
code={`
|
|
<Select placeholder="Frameworks">
|
|
<Select.Option value="react">React</Select.Option>
|
|
<Select.Option value="angular">Angular</Select.Option>
|
|
<Select.Option divider />
|
|
<Select.Option value="rails">Rails</Select.Option>
|
|
<Select.Option value="sinatra">Sinatra</Select.Option>
|
|
</Select>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Multiple"
|
|
desc="`Select` supports multiple values to be selected."
|
|
scope={{ Select }}
|
|
code={`
|
|
<Select placeholder="Frameworks" multiple width="200px" initialValue={['1', '3', '4', '6']}>
|
|
<Select.Option value="1">React</Select.Option>
|
|
<Select.Option value="2">Angular</Select.Option>
|
|
<Select.Option value="3">Vue</Select.Option>
|
|
<Select.Option divider />
|
|
<Select.Option value="4">Rails</Select.Option>
|
|
<Select.Option value="5">Sinatra</Select.Option>
|
|
<Select.Option divider />
|
|
<Select.Option value="6">Express</Select.Option>
|
|
<Select.Option value="7">Koa</Select.Option>
|
|
</Select>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Multiple without clear"
|
|
desc="`Select` supports multiple values to be selected without the clear icon."
|
|
scope={{ Select }}
|
|
code={`
|
|
<Select placeholder="Frameworks" multiple width="200px" clearable={false} initialValue={['1', '3', '4', '6']}>
|
|
<Select.Option value="1">React</Select.Option>
|
|
<Select.Option value="2">Angular</Select.Option>
|
|
<Select.Option value="3">Vue</Select.Option>
|
|
<Select.Option divider />
|
|
<Select.Option value="4">Rails</Select.Option>
|
|
<Select.Option value="5">Sinatra</Select.Option>
|
|
<Select.Option divider />
|
|
<Select.Option value="6">Express</Select.Option>
|
|
<Select.Option value="7">Koa</Select.Option>
|
|
</Select>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Compose"
|
|
desc="Use with other components."
|
|
scope={{ Select, Code }}
|
|
code={`
|
|
<Select placeholder="Choose one" initialValue="1">
|
|
<Select.Option value="1"><Code>TypeScript</Code></Select.Option>
|
|
<Select.Option value="2"><Code>JavaScript</Code></Select.Option>
|
|
</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 h={.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>
|
|
</>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Set parent element"
|
|
desc="you can specify the container for drop-down box rendering."
|
|
scope={{ Select, Spacer, useModal, Modal, Button, Code }}
|
|
code={`
|
|
() => {
|
|
const { visible, setVisible, bindings } = useModal()
|
|
return (
|
|
<>
|
|
<Button auto onClick={() => setVisible(true)}>Show Select</Button>
|
|
<Modal {...bindings}>
|
|
<Modal.Title>Modal</Modal.Title>
|
|
<Modal.Content id="customModalSelect">
|
|
<Select placeholder="Choose one" initialValue="1"
|
|
getPopupContainer={() => document.getElementById('customModalSelect')}>
|
|
<Select.Option value="1"><Code>TypeScript</Code></Select.Option>
|
|
<Select.Option value="2"><Code>JavaScript</Code></Select.Option>
|
|
</Select>
|
|
<p>Scroll through the content to see the changes.</p>
|
|
<div style={{ height: '1200px' }}></div>
|
|
<p>Scroll through the content to see the changes.</p>
|
|
</Modal.Content>
|
|
<Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|
|
`}
|
|
/>
|
|
|
|
<Attributes edit="/pages/en-us/components/select.mdx">
|
|
<Attributes.Title>Select.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default |
|
|
| --------------------- | -------------------------------------------------------- | --------------------------------------------------- | --------------------------------- | --------------- |
|
|
| **value** | selected value | `string`, `string[]` | - | - |
|
|
| **initialValue** | initial value | `string`, `string[]` | - | - |
|
|
| **placeholder** | placeholder string | `string` | - | - |
|
|
| **width** | css width value of select | `string` | - | `initial` |
|
|
| **type** | current type | `SelectTypes` | [SelectTypes](#selecttypes) | `default` |
|
|
| **icon** | icon component | `ComponentType` | - | `SVG Component` |
|
|
| **pure** | remove icon component | `boolean` | - | `false` |
|
|
| **multiple** | support multiple selection | `boolean` | - | `false` |
|
|
| **clearable** | add clear icon on multiple selection (ignored otherwise) | `boolean` | - | `true` |
|
|
| **disabled** | disable current radio | `boolean` | - | `false` |
|
|
| **onChange** | selected value | <Code>(val: string | string[]) => void </Code> | - | - |
|
|
| **dropdownClassName** | className of dropdown menu | `string` | - | - |
|
|
| **dropdownStyle** | style of dropdown menu | `object` | - | - |
|
|
| **disableMatchWidth** | disable Option from follow Select width | `boolean` | - | `false` |
|
|
| **getPopupContainer** | dropdown render parent element, the default is `body` | `() => HTMLElement` | - | - |
|
|
| ... | native props | `HTMLAttributes` | `'name', 'alt', 'className', ...` | - |
|
|
|
|
<Attributes.Title>Select.Option.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default |
|
|
| ------------------- | ---------------------- | ---------------- | -------------------------------- | ------- |
|
|
| **value**(required) | unique ident value | `string` | - | - |
|
|
| **disabled** | disable current option | `boolean` | - | `false` |
|
|
| ... | native props | `HTMLAttributes` | `'name', 'id', 'className', ...` | - |
|
|
|
|
<Attributes.Title>SelectTypes</Attributes.Title>
|
|
|
|
```ts
|
|
type SelectTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
|
|
```
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|