Mantine Core 컴포넌트

Mantine Core 컴포넌트

@mantine/core 패키지의 소개 문서예요. 이 패키지는 버튼, 인풋, 모달, 타이포그래피 등 필수 컴포넌트를 제공해요.

출처: 문서

본문

@mantine/core 패키지는 버튼, 인풋, 모달, 타이포그래피 등 필수 컴포넌트를 제공해요. @mantine/core 패키지는 다른 대부분의 @mantine/* 패키지 내부에서도 사용되므로, Mantine 컴포넌트를 사용하려면 프로젝트에 설치하는 것이 필수예요.

설치 (Installation)

yarn add @mantine/hooks @mantine/core

사용법 (Usage)

getting started 가이드를 따라 프로젝트에 Mantine 설정을 완료해요. Stepper 컴포넌트 사용 예시:

import { useState } from 'react';
import { Stepper, Button, Group } from '@mantine/core';

function Demo() {
  const [active, setActive] = useState(1);
  const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current));
  const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));

  return (
    <>
      <Stepper active={active} onStepClick={setActive}>
        <Stepper.Step label="First step" description="Create an account">
          Step 1 content: Create an account
        </Stepper.Step>
        <Stepper.Step label="Second step" description="Verify email">
          Step 2 content: Verify email
        </Stepper.Step>
        <Stepper.Step label="Final step" description="Get full access">
          Step 3 content: Get full access
        </Stepper.Step>
        <Stepper.Completed>
          Completed, click back button to get to previous step
        </Stepper.Completed>
      </Stepper>

      <Group justify="center" mt="xl">
        <Button variant="default" onClick={prevStep}>Back</Button>
        <Button onClick={nextStep}>Next step</Button>
      </Group>
    </>
  );
}

라이선스 (License)

MIT

더 알아보기 (Learn more)

• use-shallow-effect
• AppShell
• getting started 가이드