diff --git a/src/components/float-layout/index.js b/src/components/float-layout/index.js index e4b0debca..a4d8e1932 100644 --- a/src/components/float-layout/index.js +++ b/src/components/float-layout/index.js @@ -62,7 +62,8 @@ export default class AtFloatLayout extends AtComponent { scrollLeft, upperThreshold, lowerThreshold, - scrollWithAnimation + scrollWithAnimation, + top } = this.props const rootClass = classNames( @@ -76,7 +77,7 @@ export default class AtFloatLayout extends AtComponent { return ( - + {title ? ( {title} @@ -113,6 +114,7 @@ AtFloatLayout.defaultProps = { scrollY: true, scrollX: false, scrollWithAnimation: false, + top: false, onClose: () => {}, onScroll: () => {}, @@ -130,6 +132,7 @@ AtFloatLayout.propType = { upperThreshold: PropTypes.number, lowerThreshold: PropTypes.number, scrollWithAnimation: PropTypes.bool, + top: PropTypes.bool, onClose: PropTypes.func, onScroll: PropTypes.func, onScrollToLower: PropTypes.func, diff --git a/src/style/components/float-layout.scss b/src/style/components/float-layout.scss index 591aef463..74e1f57e0 100644 --- a/src/style/components/float-layout.scss +++ b/src/style/components/float-layout.scss @@ -30,6 +30,12 @@ $float-layout-timer: 300ms; background-color: $color-bg; transform: translate3d(0, 100%, 0); transition: transform $float-layout-timer cubic-bezier(0.36, 0.66, 0.04, 1); + + &--top { + top: 0; + bottom: auto; + transform: translate3d(0, -100%, 0); + } } .layout {