Title

Title

h1~h6 제목(heading)을 Mantine 테마 스타일로 렌더링하는 컴포넌트예요.

출처: 문서

본문

사용법 (Usage)

Title 컴포넌트를 사용해 Mantine theme 스타일로 h1~h6 제목을 렌더링해요. 기본적으로 Title은 여백(margin, padding)이 없어요. 제목별 font-size, font-weight, line-height는 theme.headings로 변경할 수 있어요.

order prop으로 렌더링할 요소(h1~h6)를 지정해요. 기본 order는 1이에요.

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

function Demo() {
  return (
    <>
      <Title order={1}>This is h1 title</Title>
      <Title order={2}>This is h2 title</Title>
      <Title order={3}>This is h3 title</Title>
      <Title order={4}>This is h4 title</Title>
      <Title order={5}>This is h5 title</Title>
      <Title order={6}>This is h6 title</Title>
    </>
  );
}

크기 (Size)

order와는 별개로 Title의 size를 변경할 수 있어요.

  • size를 h1~h6로 설정하면 해당하는 font-size와 line-height가 테마에서 적용돼요
  • size에 다른 값을 설정하면 line-height는 order를 기준으로 계산되고, size는 font-size에만 영향을 줘요
import { Title } from '@mantine/core';

function Demo() {
  return (
    <>
      {/* size가 order보다 우선해요 */}
      <Title order={3} size="h1">H3 heading with h1 font-size</Title>
      <Title order={1} size="h4">H1 heading with h4 font-size</Title>
      <Title order={1} size={16}>H1 heading with 16px size</Title>
      <Title order={1} size="xs">H1 heading with xs size</Title>
    </>
  );
}

텍스트 줄바꿈 (Text wrap)

textWrap prop으로 text-wrap CSS 속성을 제어할 수 있어요. 이 속성은 요소 안의 텍스트가 어떻게 줄바꿈되는지 제어해요.

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

function Demo() {
  return <Title textWrap="balance">Some title that should wrap</Title>;
}

textWrap을 theme에서도 설정할 수 있어요.

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

const theme = createTheme({
  headings: {
    textWrap: 'wrap',
  },
});

줄 수 제한 (Line clamp)

lineClamp prop으로 지정된 줄 수 이후의 텍스트를 잘라내요.

import { Title, Box } from '@mantine/core';

function Demo() {
  return (
    <Box maw={400}>
      <Title lineClamp={2}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </Title>
    </Box>
  );
}

더 알아보기 (Learn more)