Anchor

Anchor

테마 스타일이 적용된 링크를 표시하는 컴포넌트예요. 다형성(polymorphic) 컴포넌트로, 기본 루트 요소는 a예요.

출처: 문서

본문

Usage

import { Anchor } from '@mantine/core';

function Demo() {
  return (
    <Anchor href="https://mantine.dev/">
      Anchor component
    </Anchor>
  );
}

Underline

underline prop으로 text-decoration 속성을 설정할 수 있어요. 다음 값을 받아요.

• always - 링크가 항상 밑줄 표시
• hover - 링크가 호버 시 밑줄 표시
• never - 링크가 절대 밑줄 표시 안 함
• not-hover - 링크가 호버되지 않았을 때 밑줄 표시

default props로 모든 Anchor 컴포넌트에 underline prop을 설정할 수도 있어요.

import { Anchor, createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  components: {
    Anchor: Anchor.extend({
      defaultProps: {
        underline: 'always',
      },
    }),
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}

Text props

Anchor 컴포넌트는 모든 Text 컴포넌트 props를 지원해요. 예를 들어 그라디언트 배리언트를 사용할 수 있어요.

Polymorphic component

Anchor는 다형성 컴포넌트예요. 기본 루트 요소는 a이지만 component prop으로 다른 요소나 컴포넌트로 바꿀 수 있어요.

import { Anchor } from '@mantine/core';

function Demo() {
  return <Anchor component="button" type="button" />;
}

component prop에 컴포넌트도 사용할 수 있어요. 예를 들어 Next.js Link:

import Link from 'next/link';
import { Anchor } from '@mantine/core';

function Demo() {
  return <Anchor component={Link} href="/" />;
}

Polymorphic components with TypeScript

다형성 컴포넌트의 prop 타입은 일반 컴포넌트와 달라요. 기본 요소의 HTML 요소 props를 확장하지 않아요. 예를 들어 a가 기본 요소임에도 AnchorProps는 React.ComponentProps<'a'>를 확장하지 않아요.

다형성이 아닌 다형성 컴포넌트의 래퍼를 만들려면 컴포넌트 props 인터페이스가 HTML 요소 props를 확장해야 해요. 예를 들어:

import type { AnchorProps, ElementProps } from '@mantine/core';

interface MyAnchorProps extends AnchorProps,
  ElementProps<'a'> {}

래핑 후에도 다형성을 유지하려면 이 가이드에 설명된 polymorphic 함수를 사용하세요.

Get element ref

import { useRef } from 'react';
import { Anchor } from '@mantine/core';

function Demo() {
  const ref = useRef<HTMLAnchorElement>(null);
  return <Anchor ref={ref} href="/" />;
}

더 알아보기 (Learn more)

• UnstyledButton
• Breadcrumbs