Affix

Affix

Portal 컴포넌트 안에 고정 위치의 div 요소를 렌더링하는 컴포넌트예요. 화면의 어떤 위치든 고정된 요소(예: 맨 위로 스크롤 버튼)를 표시할 때 사용해요.

출처: 문서

본문

Usage

Affix는 Portal 컴포넌트 안에 고정 위치의 div 요소를 렌더링해요. 화면의 어떤 위치든 고정된 요소를 표시할 때 사용하세요. 예를 들어 맨 위로 스크롤 버튼이 그렇죠.

import { ArrowUpIcon } from '@phosphor-icons/react';
import { useWindowScroll } from '@mantine/hooks';
import { Affix, Button, Text, Transition } from '@mantine/core';

function Demo() {
  const [scroll, scrollTo] = useWindowScroll();

  return (
    <>
      <Text ta="center">Affix is located at the bottom of the screen, scroll to see it</Text>
      <Affix position={{ bottom: 20, right: 20 }}>
        <Transition transition="slide-up" mounted={scroll.y > 0}>
          {(transitionStyles) => (
            <Button
              leftSection={<ArrowUpIcon />}
              style={transitionStyles}
              onClick={() => scrollTo({ y: 0 })}
            >
              Scroll to top
            </Button>
          )}
        </Transition>
      </Affix>
    </>
  );
}

더 알아보기 (Learn more)

• ActionBar
• Dialog