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

collapse 样式优化

Browse Source
This commit is contained in:
liaoxuezhi 2019-07-08 20:16:09 +08:00
parent f516e1ad57
commit 9a12b09564
3 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,7 @@ export default {
{
type: 'fieldSet',
title: '基本信息',
collapsable: true,
controls: [
{
type: 'group',

3
scss/components/_collapse.scss
View File

@ -28,12 +28,13 @@
border-style: solid;
border-width: px2rem(1px) px2rem(1px) 0 0;
transform: rotate(135deg);
transform-origin: center;
transform-origin: 50% 50%;
}
}
&.is-collapsed &-arrow:before {
transform: rotate(45deg);
transform-origin: 0% 50%;
}
&--collapsable &-header {

6
src/renderers/Collapse.tsx
View File

@ -59,7 +59,7 @@ export default class Collapse extends React.Component<CollapseProps, CollapseSta
}
toggleCollapsed() {
this.setState({
this.props.collapsable !== false && this.setState({
collapsed: !this.state.collapsed,
});
}
@ -96,9 +96,9 @@ export default class Collapse extends React.Component<CollapseProps, CollapseSta
)}
>
{title ? (
<HeadingComponent className={cx(`Collapse-header`, headingClassName)}>
<HeadingComponent onClick={this.toggleCollapsed} className={cx(`Collapse-header`, headingClassName)}>
{render('heading', title)}
{collapsable && <span onClick={this.toggleCollapsed} className={cx('Collapse-arrow')} />}
{collapsable && <span className={cx('Collapse-arrow')} />}
</HeadingComponent>
) : null}