feat: backtop support custom position

Author: fengtianze

.changeset/tzfeng-handsome.md

@@ -0,0 +1,5 @@
+---
+"@alauda/ui": patch
+---
+
+feat: backtop support custom position

src/back-top/back-top.component.html

@@ -1,6 +1,8 @@
 <div
   class="aui-back-top"
-  [class.show]="isDisplayed$ | async"
+  [style.display]="display$ | async"
+  [style.position]="'fixed'"
+  [style]="position"
 >
   <button
     aui-button="text"

src/back-top/back-top.component.scss

@@ -4,22 +4,14 @@
 $block: 'aui-back-top';
 
 .#{$block} {
-  position: fixed;
-  right: 12px;
-  bottom: 12px;
   @include flex-center;
 
   height: use-var(inline-height-m);
   width: use-var(inline-height-m);
   border-radius: use-var(border-radius-m);
   overflow: hidden;
-  visibility: hidden;
   cursor: pointer;
   @include popper-shadow;
 
   background-color: use-rgb(n-10);
-
-  &.show {
-    visibility: visible;
-  }
 }

src/back-top/back-top.component.ts

@@ -16,6 +16,7 @@ import {
   map,
   switchMap,
   throttleTime,
+  startWith,
 } from 'rxjs';
 
 type TargetType = Element | Window | string;
@@ -39,6 +40,14 @@ export class BackTopComponent {
     return this._visibilityHeight;
   }
 
+  @Input()
+  position: {
+    left?: string;
+    right?: string;
+    top?: string;
+    bottom?: string;
+  } = { right: '12px', bottom: '12px' };
+
   @Input()
   set target(val: TargetType) {
     this._target = val;
@@ -63,7 +72,7 @@ export class BackTopComponent {
 
   constructor(@Optional() private readonly cdkScrollable: CdkScrollable) {}
 
-  isDisplayed$ = combineLatest([
+  display$ = combineLatest([
     this.target$$.asObservable().pipe(
       map(target => this.getTarget(target)),
       switchMap(target =>
@@ -77,6 +86,8 @@ export class BackTopComponent {
     this.visibilityHeight$$,
   ]).pipe(
     map(([scrollTop, visibilityHeight]) => scrollTop >= visibilityHeight),
+    map(visible => (visible ? 'flex' : 'none')),
+    startWith('none'),
     distinctUntilChanged(),
   );
 

stories/back-top/back-top.mdx

@@ -41,10 +41,11 @@ import * as useSelector from './use-selector.stories';
 
 ## Backtop Inputs
 
-| 名称             | 类型                        | 默认值 | 描述                                                                                                                       |
-| ---------------- | --------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------- |
-| visibilityHeight | number                      | 400    | 目标容器滚动到多高的距离，展示 backtop 按钮                                                                                |
-| target           | Element \| Window \| string | -      | 指定目标容器，可以指定 ElementRef，selector 来选择目标组件，不指定时优先选择外部的 cdkScrollable 组件，若没有则选择 window |
+| 名称             | 类型                                                                | 默认值                              | 描述                                                                                                                       |
+| ---------------- | ------------------------------------------------------------------- | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| visibilityHeight | number                                                              | 400                                 | 目标容器滚动到多高的距离，展示 backtop 按钮                                                                                |
+| position         | \{ left?: string; right?: string; top?: string; bottom?: string; \} | \{ right: '12px', bottom: '12px' \} | 设置按钮在浏览器窗口中的位置                                                                                               |
+| target           | Element \| Window \| string                                         | -                                   | 指定目标容器，可以指定 ElementRef，selector 来选择目标组件，不指定时优先选择外部的 cdkScrollable 组件，若没有则选择 window |
 
 ## Backtop Outputs