PlBackTop

긴 페이지의 맨 위로 돌아가는 버튼입니다. 돌아갈 만큼 스크롤되기 전까지는 숨어 있고, 그것이 설계의 전부입니다.

React

tsx

import { PlBackTop } from 'plass-ui';

<PlBackTop />;

dart

import 'package:plass_ui/plass_ui.dart';

Stack(
  children: <Widget>[
    ListView(controller: controller, children: rows),
    Positioned(right: 24, bottom: 24, child: PlBackTop(controller: controller)),
  ],
);

Props

Prop	타입	기본값	설명
target	Window \| HTMLElement \| RefObject<HTMLElement \| null> \| (() => Window \| HTMLElement \| null)	window	무엇을 스크롤할지. 페이지 안에서 스크롤되는 패널에는 ref를 주세요
visibilityHeight	number	400	나타나기 전까지 얼마나 내려가야 하는지, 픽셀로. 노트북에서 대략 한 화면입니다
label	string	'Back to top'	무엇을 하는지, 말로. accessible name입니다
icon	ReactNode	—	글리프. 기본은 위쪽 chevron입니다
floating	boolean	true	창의 아래 구석에 스스로 고정할지
variant공통	'solid' \| 'glass' \| 'ghost'	'glass'	표면의 재질
size공통	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'	디스크의 크기
color공통	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'	'primary'	의미론적 색 역할
elevation공통	0 \| 1 \| 2 \| 3	2	그림자 깊이

Prop	타입	기본값	설명
controller	ScrollController?	PrimaryScrollController	무엇을 스크롤하고 무엇을 지켜볼지. 생략하면 PrimaryScrollController — 자체 controller가 없는 ListView가 붙는 곳이고, 따라서 "창"에 해당합니다
visibilityHeight	double	400	나타나기 전까지 얼마나 내려가야 하는지, 픽셀로. 노트북에서 대략 한 화면입니다
label	String	'Back to top'	무엇을 하는지, 말로. accessible name입니다
icon	Widget?	—	글리프. 기본은 위쪽 chevron입니다
onPressed	VoidCallback?	—	스크롤 대신 실행됩니다. "위"가 offset 0이 아닌 화면 — 대화 기록, 중간에서 시작하는 목록 — 을 위한 것
variant공통	PlassVariant	PlassVariant.glass	표면의 재질
size공통	PlassSize	PlassSize.md	디스크의 크기
color공통	PlassColor	PlassColor.primary	의미론적 색 역할
elevation공통	int	2	그림자 깊이

네이티브 <button> 속성은 그대로 통과하고, 나머지는 전부 PlIconButton의 것입니다: 세 재질, elevation 사다리, 포인터 빛.

floating이 없고, 그에 해당하는 것도 없습니다. Flutter에는 position: fixed가 없으므로 버튼이 어디에 놓일지는 호출자의 몫입니다. 스크롤 영역 위의 Stack과 그 안의 Positioned나 Align이고, 그것이 Flutter 화면이 무언가를 구석에 고정하는 방법입니다.

controller가 ScrollController입니다. 생략하면 PrimaryScrollController인데, 자체 controller가 없는 ListView가 붙는 곳이고 따라서 이 프레임워크의 "창"입니다. onPressed는 스크롤 앞이 아니라 대신 돕니다. Dart 호출자가 원하는 모양이 그것입니다. preventDefault할 이벤트가 없습니다.

쓸모 있어질 때까지 숨어 있습니다

첫 페인트부터 모든 페이지 구석에 박혀 있는 버튼은 내용을 가리는 것이 하나 더 있는 것이고, 스크롤이 없을 만큼 짧은 페이지에서는 아무 일도 하지 않는 컨트롤입니다.

사용자가 visibilityHeight 픽셀만큼 내려갔을 때 나타납니다. 기본은 400이고, 노트북에서 대략 한 화면입니다. 스크롤해서 올라가는 것이 "그냥 하면 되는 일"이기를 그만두는 지점입니다.

손이 닿지 않는 동안에는 흐려지는 정도가 아니라 aria-hidden이고 탭 순서 밖입니다. Tab으로 닿을 수는 있는데 보이지 않는 컨트롤은 아예 없는 것보다 나쁩니다.

Examples

target

기본은 창입니다. 페이지 안에서 스크롤되는 패널(표의 스크롤 상자, 대화 기록, modal의 본문) 에는 ref나 element를 주세요.

tsx

const panel = useRef<HTMLDivElement>(null);

<div ref={panel} className="overflow-y-auto">
  …
</div>
<PlBackTop target={panel} />

floating

기본은 켜짐입니다. 그것이 이 컴포넌트이기 때문입니다. 버튼을 직접 정한 자리(글의 끝, 툴바)에 두면서 나타나기와 스크롤은 그대로 쓰고 싶다면 끄세요.

tsx

<PlBackTop floating={false} className="mx-auto mt-8" />

글리프와 말

tsx

<PlBackTop icon={<ArrowUpIcon />} label="위로" />

label은 accessible name이자 브라우저가 그리는 툴팁의 내용입니다. 누르면 무슨 일이 일어나는지로 이름 붙이세요.

Notes

스크롤은 부드럽고, prefers-reduced-motion에서는 아닙니다. 움직임을 줄여 달라고 한 사람 앞으로 페이지가 날아가는 것이야말로 그 설정이 존재하는 이유입니다. 대신 건너뛰고, 도착지는 같습니다.
위치는 스크롤할 때마다는 물론 마운트할 때도 한 번 읽습니다. 그래서 중간에서 복원된 페이지(뒤로 가기, URL의 앵커) 에는 버튼이 이미 있습니다.
호출자 자신의 onClick이 먼저 돌고, 거기서 preventDefault()를 부르면 스크롤이 멈춥니다. 맨 위가 아닌 다른 곳으로 데려가는 방법이 그것입니다.

PlBackTop ​

Props ​

쓸모 있어질 때까지 숨어 있습니다 ​

Examples ​

target ​

floating ​

글리프와 말 ​

Notes ​