mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
docs: update demo for Select[size]
This commit is contained in:
Benjy Cui
parent
a19845c1bb
commit
d6d62f6754
@ -541,38 +541,66 @@ exports[`renders ./components/select/demo/select-users.md correctly 1`] = `
|
||||
exports[`renders ./components/select/demo/size.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-select-lg ant-select ant-select-enabled"
|
||||
style="width:200px;"
|
||||
class="ant-radio-group"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
<label
|
||||
class="ant-radio-button-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1;"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none;"
|
||||
unselectable="unselectable"
|
||||
class="ant-radio-button"
|
||||
>
|
||||
<b />
|
||||
<input
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<span>
|
||||
Large
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
|
||||
>
|
||||
<span
|
||||
class="ant-radio-button ant-radio-button-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Default
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-button-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio-button"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Small
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
style="width:200px;"
|
||||
@ -592,9 +620,9 @@ exports[`renders ./components/select/demo/size.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1;"
|
||||
title="Lucy"
|
||||
title="a1"
|
||||
>
|
||||
Lucy
|
||||
a1
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
@ -606,8 +634,9 @@ exports[`renders ./components/select/demo/size.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
class="ant-select-sm ant-select ant-select-enabled"
|
||||
class="ant-select ant-select-combobox ant-select-enabled"
|
||||
style="width:200px;"
|
||||
>
|
||||
<div
|
||||
@ -617,18 +646,29 @@ exports[`renders ./components/select/demo/size.md correctly 1`] = `
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1;"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<input
|
||||
class="ant-select-search__field"
|
||||
value="a1"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
a1
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
@ -639,6 +679,156 @@ exports[`renders ./components/select/demo/size.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
style="width:100%;"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--multiple"
|
||||
role="combobox"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:none;user-select:none;-webkit-user-select:none;"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
Please select
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
class="ant-select-selection__choice"
|
||||
style="user-select:none;-webkit-user-select:none;"
|
||||
title="a10"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__choice__content"
|
||||
>
|
||||
a10
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-selection__choice__remove"
|
||||
/>
|
||||
</li>
|
||||
<li
|
||||
class="ant-select-selection__choice"
|
||||
style="user-select:none;-webkit-user-select:none;"
|
||||
title="c12"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__choice__content"
|
||||
>
|
||||
c12
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-selection__choice__remove"
|
||||
/>
|
||||
</li>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<input
|
||||
class="ant-select-search__field"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
style="width:100%;"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--multiple"
|
||||
role="combobox"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:none;user-select:none;-webkit-user-select:none;"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
Please select
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
class="ant-select-selection__choice"
|
||||
style="user-select:none;-webkit-user-select:none;"
|
||||
title="a10"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__choice__content"
|
||||
>
|
||||
a10
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-selection__choice__remove"
|
||||
/>
|
||||
</li>
|
||||
<li
|
||||
class="ant-select-selection__choice"
|
||||
style="user-select:none;-webkit-user-select:none;"
|
||||
title="c12"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__choice__content"
|
||||
>
|
||||
c12
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-selection__choice__remove"
|
||||
/>
|
||||
</li>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<input
|
||||
class="ant-select-search__field"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
title:
|
||||
zh-CN: 三种大小
|
||||
en-US: Three sizes
|
||||
en-US: Sizes
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
@ -14,35 +14,83 @@ title:
|
||||
The height of the inpub field for the select defaults to 28px. If size is set to large, the height will be 32px, and if set to small, 22px.
|
||||
|
||||
````jsx
|
||||
import { Select } from 'antd';
|
||||
import { Select, Radio } from 'antd';
|
||||
const Option = Select.Option;
|
||||
|
||||
function handleChange(value) {
|
||||
console.log(`selected ${value}`);
|
||||
const children = [];
|
||||
for (let i = 10; i < 36; i++) {
|
||||
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Select size="large" defaultValue="lucy" style={{ width: 200 }} onChange={handleChange}>
|
||||
<Option value="jack">Jack</Option>
|
||||
<Option value="lucy">Lucy</Option>
|
||||
<Option value="disabled" disabled>Disabled</Option>
|
||||
<Option value="yiminghe">Yiminghe</Option>
|
||||
</Select>
|
||||
<Select defaultValue="lucy" style={{ width: 200 }} onChange={handleChange}>
|
||||
<Option value="jack">Jack</Option>
|
||||
<Option value="lucy">Lucy</Option>
|
||||
<Option value="disabled" disabled>Disabled</Option>
|
||||
<Option value="yiminghe">Yiminghe</Option>
|
||||
</Select>
|
||||
<Select size="small" defaultValue="lucy" style={{ width: 200 }} onChange={handleChange}>
|
||||
<Option value="jack">Jack</Option>
|
||||
<Option value="lucy">Lucy</Option>
|
||||
<Option value="disabled" disabled>Disabled</Option>
|
||||
<Option value="yiminghe">Yiminghe</Option>
|
||||
</Select>
|
||||
</div>
|
||||
, mountNode);
|
||||
function handleChange(value) {
|
||||
console.log(`Selected: ${value}`);
|
||||
}
|
||||
|
||||
class SelectSizesDemo extends React.Component {
|
||||
state = {
|
||||
size: 'default',
|
||||
};
|
||||
|
||||
handleSizeChange = (e) => {
|
||||
this.setState({ size: e.target.value });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { size } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Radio.Group value={size} onChange={this.handleSizeChange}>
|
||||
<Radio.Button value="large">Large</Radio.Button>
|
||||
<Radio.Button value="default">Default</Radio.Button>
|
||||
<Radio.Button value="small">Small</Radio.Button>
|
||||
</Radio.Group>
|
||||
<br /><br />
|
||||
<Select
|
||||
size={size}
|
||||
defaultValue="a1"
|
||||
onChange={handleChange}
|
||||
style={{ width: 200 }}
|
||||
>
|
||||
{children}
|
||||
</Select>
|
||||
<br />
|
||||
<Select
|
||||
combobox
|
||||
size={size}
|
||||
defaultValue="a1"
|
||||
onChange={handleChange}
|
||||
style={{ width: 200 }}
|
||||
>
|
||||
{children}
|
||||
</Select>
|
||||
<br />
|
||||
<Select
|
||||
multiple
|
||||
size={size}
|
||||
placeholder="Please select"
|
||||
defaultValue={['a10', 'c12']}
|
||||
onChange={handleChange}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
{children}
|
||||
</Select>
|
||||
<br />
|
||||
<Select
|
||||
tags
|
||||
size={size}
|
||||
placeholder="Please select"
|
||||
defaultValue={['a10', 'c12']}
|
||||
onChange={handleChange}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
{children}
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<SelectSizesDemo />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
|
||||
Loading…
Reference in New Issue
Block a user