test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Picker 样式优化

Browse Source
This commit is contained in:
liaoxuezhi 2019-07-25 11:59:01 +08:00
parent 9bd8fc4a2d
commit 30c8f641f2
4 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/components/Form/Picker.jsx
View File

@ -22,6 +22,7 @@ export default {
name: "type", name: "type",
label: "单选", label: "单选",
value: 1, value: 1,
inline: true,
options: [ options: [
{ {
label: "选项1", label: "选项1",

1
fis-conf.js
View File

@ -12,6 +12,7 @@ fis.get('project.ignore').push(
// 配置只编译哪些文件。 // 配置只编译哪些文件。
fis.set('project.files', [ fis.set('project.files', [
'scss/**.scss',
'/examples/*.html', '/examples/*.html',
'/src/**.html', '/src/**.html',
'mock/**' 'mock/**'

7
scss/components/form/_picker.scss
View File

@ -105,6 +105,9 @@
} }
} }
.#{$ns}PickerControl { .#{$ns}PickerControl.is-inline {
padding-top: $Form-input-height - px2rem(30px); .#{$ns}Picker {
display: inline-block;
min-width: px2rem(150px);
}
} }

14
src/renderers/Form/Picker.tsx
View File

@ -41,11 +41,13 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
"inline", "inline",
"multiple", "multiple",
"embed", "embed",
"resetValue" "resetValue",
"placeholder"
]; ];
static defaultProps: Partial<PickerProps> = { static defaultProps: Partial<PickerProps> = {
modalMode: 'dialog', modalMode: 'dialog',
multiple: false, multiple: false,
placeholder: "请点击按钮选择",
pickerSchema: { pickerSchema: {
mode: 'list', mode: 'list',
listItem: { listItem: {
@ -273,9 +275,10 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
env, env,
clearable, clearable,
multiple, multiple,
inline, placeholder,
embed, embed,
value value,
selectedOptions
} = this.props; } = this.props;
return ( return (
<div className={cx(`PickerControl`, className)}> <div className={cx(`PickerControl`, className)}>
@ -286,7 +289,6 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
) : ( ) : (
<div <div
className={cx(`Picker`, { className={cx(`Picker`, {
'Picker--inline': inline,
'Picker--single': !multiple, 'Picker--single': !multiple,
'Picker--multi': multiple, 'Picker--multi': multiple,
'is-focused': this.state.isFocused, 'is-focused': this.state.isFocused,
@ -294,6 +296,10 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
})} })}
> >
<div onClick={this.handleClick} className={cx('Picker-input')}> <div onClick={this.handleClick} className={cx('Picker-input')}>
{!selectedOptions.length && placeholder ? (
<div className={cx('Picker-placeholder')}>{placeholder}</div>
) : null}
<div className={cx('Picker-valueWrap')}> <div className={cx('Picker-valueWrap')}>
{this.renderValues()} {this.renderValues()}