diff --git a/scss/components/_collapse.scss b/scss/components/_collapse.scss index 1c0ca6f65..45e50e9dd 100644 --- a/scss/components/_collapse.scss +++ b/scss/components/_collapse.scss @@ -47,6 +47,8 @@ &--title-bottom &-header { text-align: center; color: $link-color; + border-left: none; + font-size: $fontSizeBase; } &--title-bottom &-arrow:before { diff --git a/scss/components/form/_group.scss b/scss/components/form/_group.scss index a96da2451..836ac550b 100644 --- a/scss/components/form/_group.scss +++ b/scss/components/form/_group.scss @@ -12,9 +12,8 @@ &--hor { display: flex; - flex-wrap: nowrap; - margin-left: -$Form-group-gutterWidth / 2; - margin-right: -$Form-group-gutterWidth / 2; + flex-wrap: wrap; + margin: -$Form-group-gutterWidth / 2; align-items: flex-start; &.v-middle { @@ -26,8 +25,7 @@ } > * { - padding-left: $Form-group-gutterWidth / 2; - padding-right: $Form-group-gutterWidth / 2; + padding: $Form-group-gutterWidth / 2; } > .#{$ns}Form-item--inline { @@ -45,42 +43,34 @@ } &--lg { - margin-left: -$Form-group--lg-gutterWidth / 2; - margin-right: -$Form-group--lg-gutterWidth / 2; + margin: -$Form-group--lg-gutterWidth / 2; > * { - padding-left: $Form-group--lg-gutterWidth / 2; - padding-right: $Form-group--lg-gutterWidth / 2; + padding: $Form-group--lg-gutterWidth / 2; } } &--md { - margin-left: -$Form-group--md-gutterWidth / 2; - margin-right: -$Form-group--md-gutterWidth / 2; + margin: -$Form-group--md-gutterWidth / 2; > * { - padding-left: $Form-group--md-gutterWidth / 2; - padding-right: $Form-group--md-gutterWidth / 2; + padding: $Form-group--md-gutterWidth / 2; } } &--sm { - margin-left: -$Form-group--sm-gutterWidth / 2; - margin-right: -$Form-group--sm-gutterWidth / 2; + margin: -$Form-group--sm-gutterWidth / 2; > * { - padding-left: $Form-group--sm-gutterWidth / 2; - padding-right: $Form-group--sm-gutterWidth / 2; + padding: $Form-group--sm-gutterWidth / 2; } } &--xs { - margin-left: -$Form-group--xs-gutterWidth / 2; - margin-right: -$Form-group--xs-gutterWidth / 2; + margin: -$Form-group--xs-gutterWidth / 2; > * { - padding-left: $Form-group--xs-gutterWidth / 2; - padding-right: $Form-group--xs-gutterWidth / 2; + padding: $Form-group--xs-gutterWidth / 2; } } } diff --git a/src/renderers/Collapse.tsx b/src/renderers/Collapse.tsx index c31b7f962..a207c950f 100644 --- a/src/renderers/Collapse.tsx +++ b/src/renderers/Collapse.tsx @@ -139,6 +139,7 @@ export default class Collapse extends React.Component< headingClassName, children, titlePosition, + title, collapseTitle, body, bodyClassName, @@ -147,7 +148,41 @@ export default class Collapse extends React.Component< translate: __ } = this.props; // 默认给个 title,不然没法点 - const title = this.props.title || 'Collapse'; + const finalTitle = this.state.collapsed ? title : collapseTitle || title; + + let dom = [ + finalTitle ? ( + + {render('heading', finalTitle)} + {collapsable && } + + ) : null, + + +
+ {children + ? typeof children === 'function' + ? children(this.props) + : children + : body + ? render('body', body) + : null} +
+
+ ]; + + if (titlePosition === 'bottom') { + dom.reverse(); + } return ( - {titlePosition === 'top' ? ( - - {this.state.collapsed - ? render('heading', title) - : render('heading', collapseTitle || title)} - {collapsable && } - - ) : null} - - -
- {children - ? typeof children === 'function' - ? children(this.props) - : children - : body - ? render('body', body) - : null} -
-
- - {titlePosition === 'bottom' ? ( -
- {this.state.collapsed - ? render('heading', title) - : render('heading', collapseTitle || title)} - {collapsable && } -
- ) : null} + {dom}
); } diff --git a/src/renderers/Form/FieldSet.tsx b/src/renderers/Form/FieldSet.tsx index f8067b895..78f1f4dee 100644 --- a/src/renderers/Form/FieldSet.tsx +++ b/src/renderers/Form/FieldSet.tsx @@ -117,7 +117,7 @@ export default class FieldSetControl extends React.Component< className={className} children={this.renderBody} wrapperComponent="fieldset" - headingComponent="legend" + headingComponent={rest.titlePosition === 'bottom' ? 'div' : 'legend'} /> ); }