Pill

Pill

제거 가능한 태그와 제거 불가능한 태그를 나타내는 컴포넌트예요. Pill 컴포넌트는 인풋 내부에서 사용하도록 설계된 작은 태그 컴포넌트예요.

출처: 문서

본문

사용법 (Usage)

Pill을 사용해 태그를 표시해요. size prop으로 크기를 조절할 수 있고, withRemoveButton prop으로 제거 버튼을 표시할 수 있어요.

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

function Demo() {
  return (
    <>
      <Pill size="xs">React</Pill>
      <Pill size="sm">React</Pill>
      <Pill size="md">React</Pill>
      <Pill size="lg">React</Pill>
      <Pill size="xl" withRemoveButton>React</Pill>
    </>
  );
}

인풋 내부 사용 (Inside inputs)

Pill 컴포넌트는 인풋 내부에서 사용하도록 설계돼요. 커스텀 멀티 셀렉트나 태그 인풋을 만들 때 사용할 수 있어요.

import { Pill, InputBase } from '@mantine/core';

function Demo() {
  const pills = Array(10)
    .fill(0)
    .map((_, index) => <Pill key={index}>Item {index}</Pill>);

  return <InputBase component="div">{pills}</InputBase>;
}

Styles API

Pill은 Styles API를 지원해요. classNames prop으로 컴포넌트의 내부 요소에 스타일을 추가할 수 있어요. 자세한 내용은 Styles API 문서를 참고해요.

Styles API 셀렉터:

• root – 루트 요소
• label – Pill 라벨(children)
• remove – 제거 버튼

더 알아보기 (Learn more)

• MultiSelect
• PillsInput
• Styles API