-
Notifications
You must be signed in to change notification settings - Fork 584
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(Select): support innerAfter. Close #859
- Loading branch information
Showing
7 changed files
with
106 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
# 最大数量 | ||
|
||
- order: 3 | ||
|
||
多选模式 | ||
|
||
:::lang=en-us | ||
# max count | ||
|
||
- order: 3 | ||
|
||
multiple select | ||
|
||
::: | ||
--- | ||
|
||
````jsx | ||
import { Select, Balloon } from '@alifd/next'; | ||
|
||
const { Tooltip } = Balloon; | ||
|
||
const dataSource = [ | ||
{value: '10001', label: 'Lucy King'}, | ||
{value: 10002, label: 'Lily King'}, | ||
{value: 10003, label: 'Tom Cat', disabled: true}, | ||
{label: 'Special Group', children: [ | ||
{value: -1, label: 'FALSE'}, | ||
{value: 0, label: 'ZERO'} | ||
]} | ||
]; | ||
|
||
function handleChange(value) { | ||
console.log(value); | ||
} | ||
|
||
const maxTagPlaceholder = (selectedValues, totalValues) => { | ||
const trigger = <span>{`${selectedValues.length}/${totalValues.length}`}</span>; | ||
const labels = selectedValues.map(obj => obj.label); | ||
|
||
return <Tooltip trigger={trigger}>{ labels.join(', ') }</Tooltip>; | ||
}; | ||
|
||
ReactDOM.render( | ||
<div> | ||
hasSelectAll:<br/> | ||
<Select hasSelectAll mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /> | ||
<br /><br /> | ||
maxTagCount=2<br /> | ||
<Select maxTagCount={2} defaultValue={['10001', '10002', '-1']} mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /> <br /><br /> | ||
maxTagPlaceholder<br /> | ||
<Select maxTagCount={2} maxTagPlaceholder={maxTagPlaceholder} defaultValue={['10001', '10002', '-1']} mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /><br /><br /> | ||
tagInline <br /> | ||
<Select maxTagCount={2} tagInline mode="multiple" defaultValue={['10001', '10002', '-1']} onChange={handleChange} dataSource={dataSource} style={{width: 200}} /><br /><br /> | ||
maxTagPlaceholder<br /> | ||
<Select maxTagCount={2} tagInline maxTagPlaceholder={maxTagPlaceholder} defaultValue={['10001', '10002', '-1']} mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /><br /><br /> | ||
</div> | ||
, mountNode); | ||
```` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
# 前后缀 | ||
|
||
- order: 7 | ||
|
||
Select 增加前后缀 | ||
|
||
:::lang=en-us | ||
# prefix and suffix | ||
|
||
- order: 7 | ||
|
||
add prefix or suffix to select | ||
::: | ||
--- | ||
|
||
````jsx | ||
import { Select } from '@alifd/next'; | ||
|
||
const dataSource = [ | ||
{label: '1', value: 1}, | ||
{label: '10', value: 10}, | ||
{label: '50', value: 50}, | ||
{label: '100', value: 100} | ||
]; | ||
|
||
const handleChange = value => { | ||
console.log('handleChange: ', value); | ||
}; | ||
|
||
ReactDOM.render(<Select label="size:" innerAfter={<span style={{color: '#999', marginRight: 4}}>GB</span>} dataSource={dataSource} onChange={handleChange} />, mountNode); | ||
```` | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters