Text

Text

텍스트를 표시하는 컴포넌트예요. 크기, 굵기, 색상, 정렬, 기울임·밑줄·취소선 등 다양한 텍스트 스타일을 쉽게 지정할 수 있어요.

출처: 문서

본문

사용법 (Usage)

Text 컴포넌트로 다양한 텍스트 스타일을 지정할 수 있어요.

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

function Demo() {
  return (
    <>
      <Text size="xs">Extra small text</Text>
      <Text size="sm">Small text</Text>
      <Text size="md">Default text</Text>
      <Text size="lg">Large text</Text>
      <Text size="xl">Extra large text</Text>
      <Text fw={500}>Semibold</Text>
      <Text fw={700}>Bold</Text>
      <Text fs="italic">Italic</Text>
      <Text td="underline">Underlined</Text>
      <Text td="line-through">Strikethrough</Text>
      <Text c="dimmed">Dimmed text</Text>
      <Text c="blue">Blue text</Text>
      <Text c="teal.4">Teal 4 text</Text>
      <Text tt="uppercase">Uppercase</Text>
      <Text tt="capitalize">capitalized text</Text>
      <Text ta="center">Aligned to center</Text>
      <Text ta="right">Aligned to right</Text>
    </>
  );
}

그라데이션 변형 (Gradient variant)

variant prop을 gradient로 설정하면 gradient prop으로 그라데이션을 제어할 수 있어요. gradient prop은 from, to, deg 속성을 가진 객체를 받아요. gradient prop을 설정하지 않으면 Text는 theme object에서 설정할 수 있는 theme.defaultGradient를 사용해요. variant가 gradient가 아니면 gradient prop은 무시돼요.

variant="gradient"는 두 가지 색상의 선형 그라데이션만 지원해요는 점에 주의해요. 더 복잡한 그라데이션이 필요하면 Styles API로 Text 스타일을 수정해요.

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

function Demo() {
  return (
    <Text
      variant="gradient"
      gradient={{ from: 'indigo', to: 'cyan', deg: 45 }}
    >
      Gradient Text
    </Text>
  );
}

잘라내기 (Truncate)

truncate prop을 설정하면 text-overflow: ellipsis 스타일이 추가돼요.

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

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

줄 수 제한 (Line clamp)

lineClamp prop으로 최대 줄 수를 지정해요. 이 옵션은 -webkit-line-clamp CSS 속성을 사용해요 (caniuse). 텍스트 요소에는 padding-bottom을 설정할 수 없다는 점에 주의해요.

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

function Demo() {
  return <Text lineClamp={2}>{/* Text content */}</Text>;
}

lineClamp는 문자열뿐 아니라 어떤 자식 요소에도 사용할 수 있어요. 예를 들어 Typography와 함께 사용할 수 있어요.

스타일 상속 (Inherit styles)

Text는 항상 font-size, font-family, line-height 스타일을 적용해요. 하지만 어떤 경우에는 이것이 바람직하지 않을 수 있어요. Text가 부모 스타일을 상속하도록 하려면 inherit prop을 설정해요. 예를 들어 Title의 일부를 강조할 때 유용해요.

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

function Demo() {
  return (
    <Title order={2}>
      Title in which you want to <Text inherit c="blue" inherit>highlight something</Text>
    </Title>
  );
}

텍스트 줄바꿈 (Text wrap)

textWrap prop으로 text-wrap CSS 속성을 제어해요. 예를 들어 balance는 줄 길이를 고르게 만들고, pretty는 마지막 줄에 홀로 남는 단어(orphaned words)를 방지해요.

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

function Demo() {
  return <Text textWrap="balance">Some wrapped text</Text>;
}

다형성 컴포넌트 (Polymorphic component)

Text는 다형성 컴포넌트(polymorphic component)예요. 기본 루트 요소는 p이지만, component prop으로 다른 요소나 컴포넌트로 변경할 수 있어요.

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

function Demo() {
  return <Text component="span" c="dimmed">Some text</Text>;
}

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

다형성이 아닌(즉 component prop을 지원하지 않는) 다형성 컴포넌트용 래퍼를 만들고 싶다면, 컴포넌트 props 인터페이스가 HTML 요소 props를 확장해야 해요.

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

interface MyTextProps extends TextProps,
  ElementProps<'p', keyof TextProps> {}

래핑 후에도 컴포넌트를 다형성으로 유지하고 싶다면 이 가이드에 설명된 polymorphic 함수를 사용해요.

span prop

span prop은 component="span"의 줄임 표기로 사용할 수 있어요.

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

function Demo() {
  return (
    <>
      <Text span>Same as below</Text>
      <Text component="span">Same as above</Text>
    </>
  );
}

더 알아보기 (Learn more)

• Table
• Title
• Typography