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

fix: collapse修改样式&兼容body (#3060)

Browse Source
This commit is contained in:
HongYang 2021-11-25 21:06:47 +08:00 committed by GitHub
parent 54ee600ddd
commit 0927ef9267
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap
View File

@ -58,34 +58,38 @@ exports[`Renderer:fieldSet 1`] = `
class="cxd-Collapse-body bg-white"
>
<div
class="cxd-Collapse-content cxd-Form--horizontal"
class="cxd-Collapse-content"
>
<div
class="cxd-Form-item cxd-Form-item--horizontal"
data-role="form-item"
class="cxd-Form--horizontal"
>
<label
class="cxd-Form-label cxd-Form-itemColumn--normal"
>
<span />
</label>
<div
class="cxd-Form-value"
class="cxd-Form-item cxd-Form-item--horizontal"
data-role="form-item"
>
<label
class="cxd-Form-label cxd-Form-itemColumn--normal"
>
<span />
</label>
<div
class="cxd-Form-control cxd-TextControl"
class="cxd-Form-value"
>
<div
class="cxd-TextControl-input"
class="cxd-Form-control cxd-TextControl"
>
<input
autocomplete="off"
name="text"
placeholder=""
size="10"
type="text"
value=""
/>
<div
class="cxd-TextControl-input"
>
<input
autocomplete="off"
name="text"
placeholder=""
size="10"
type="text"
value=""
/>
</div>
</div>
</div>
</div>

4
scss/components/_collapse-group.scss
View File

@ -1,5 +1,9 @@
.#{$ns}CollapseGroup {
.#{$ns}Collapse:not(:last-child) {
border-bottom: none;
}
&.icon-position-right {
.#{$ns}Collapse-header {
.#{$ns}Collapse-arrow {

3
scss/components/_collapse.scss
View File

@ -9,7 +9,6 @@
color: var(--text--loud-color);
padding: var(--Collapse-header-padding);
margin: 0;
border-bottom: var(--borderWidth) solid var(--Collapse-border-color);
cursor: pointer;
background: var(--Collapse-header-bg);
@ -31,7 +30,7 @@
display: inline-block;
width: px2rem(16px);
text-align: center;
margin-right: var(--gap-xs);
margin-right: var(--gap-sm);
&:before {
content: '';

14
scss/themes/_cxd-variables.scss
View File

@ -232,14 +232,14 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
--ColorPicker-onDisabled-color: #999;
--ColorPicker-boxShadow: #{$L1};
--Collapse-border: #{px2rem(1px)} solid #EBEDF5;
--Collapse-border-color: #EBEDF5;
--Collapse-border: #{px2rem(1px)} solid #{$G8};
--Collapse-border-color: #{$G8};
--Collapse-header-fontSize: #{$T3};
--Collapse-header-fontWeight: #{$W3};
--Collapse-header-padding: #{px2rem(14px)};
--Collapse-header-bg: #F6F7FA;
--Collapse-header-onHover-bg: #F3F9FE;
--Collapse-header-bg-disabled-color: #F6F7FA;
--Collapse-header-fontWeight: #{$W2};
--Collapse-header-padding: #{px2rem(16px)};
--Collapse-header-bg: #{$G10};
--Collapse-header-onHover-bg: #{$G9};
--Collapse-header-bg-disabled-color: #{$G10};
--Collapse-header-collapsed-borderBottom: none;
--Collapse-header-wrapper-direction: row-reverse;
--Collapse-content-padding: #{px2rem(16px)};

11
src/components/Collapse.tsx
View File

@ -160,7 +160,8 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
translate: __,
showArrow,
expandIcon,
disabled
disabled,
children
} = this.props;
const finalHeader = this.state.collapsed ? header : collapseHeader || header;
@ -206,13 +207,7 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
ref={this.contentRef}
>
<div className={cx('Collapse-body', bodyClassName)}>
{React.cloneElement(body as any, {
...(body as React.ReactElement).props,
className: cx(
'Collapse-content',
(body as React.ReactElement).props.className
)
})}
<div className={cx('Collapse-content')}>{body || children}</div>
</div>
</div>
);