data attributes

data attributes

Mantine 컴포넌트는 스타일을 적용하기 위해 data-* 속성을 사용해요. 이 속성들은 컴포넌트 상태에 따라 스타일을 적용하는 수정자(modifier)로 사용돼요. Mantine 컴포넌트 스타일의 일반적인 규칙은 이래요: 공유 스타일을 가진 클래스 하나와 수정자 역할을 하는 임의의 수의 data-* 속성.

출처: 문서

본문

data-* 속성으로 스타일을 적용하는 예시:

.root {
  border-top-left-radius: var(--mantine-radius-xl);
  border-bottom-left-radius: var(--mantine-radius-xl);
  padding-left: 4px;

  /* The following styles will be applied only when button is disabled */
  &[data-disabled] {
    /* You can use Mantine PostCSS mixins inside data attributes */
    @mixin light {
      border: 1px solid var(--mantine-color-gray-2);
    }

    @mixin dark {
      border: 1px solid var(--mantine-color-dark-4);
    }

    /* You can target child elements that are inside .root[data-disabled] */
    & .section[data-position='left'] {
      opacity: 0.6;
    }
  }
}

.section {
  /* Apply styles only to left section */
  &[data-position='left'] {
    --section-size: calc(var(--button-height) - 8px);

    background-color: var(--mantine-color-body);
    color: var(--mantine-color-text);
    height: var(--section-size);
    width: var(--section-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mantine-radius-xl);
  }

  &[data-position='right'] {
    @mixin rtl {
      transform: rotate(180deg);
    }
  }
}

data attributes 값

대부분의 data-* 속성은 연관된 값이 없어요. 그것들은 불리언 상태나 기능을 나타내요. 예를 들어 Button의 disabled prop이 설정되면 data-disabled 속성이 `` 요소에 추가돼요:

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

function Demo() {
  return <Button disabled>Disabled button</Button>;
}

다음 HTML을 출력해요:

<button data-disabled>Disabled button</button>

그러면 이 속성을 사용해 비활성 버튼에 스타일을 적용할 수 있어요:

.my-button {
  color: var(--mantine-color-black);

  &[data-disabled] {
    color: var(--mantine-color-gray-5);
  }
}

disabled prop이 설정되지 않으면 data-disabled 속성은 버튼에 추가되지 않아요:

<button>Not disabled button</button>

어떤 경우에는 data-* 속성이 연관된 값을 가지기도 해요. 예를 들어 Button 컴포넌트의 section 요소에는 left 또는 right가 될 수 있는 data-position 속성이 연관돼 있어요. 다음 예시는 data-position="left"인 section 하나와 data-position="right"인 section 하나, 총 두 개의 section 요소를 렌더링해요:

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

function Demo() {
  return (
    <Button leftSection="L" rightSection="R">
      Label
    </Button>
  );
}

다음 HTML을 출력해요:

<button>
  <span data-position="left">L</span>
  Label
  <span data-position="right">R</span>
</button>

그러면 이 속성을 사용해 왼쪽/오른쪽 section에 스타일을 적용할 수 있어요:

.section {
  /* Styles applied to both sections */
  width: 2rem;

  /* Styles applied only to left section */
  &[data-position='left'] {
    background-color: red;
  }

  /* Styles applied only to right section */
  &[data-position='right'] {
    background-color: blue;
  }
}

컴포넌트 data attributes 문서

data-* 속성을 사용하는 모든 컴포넌트는 Styles API 탭 아래에 전용 섹션이 있어요.

Button 컴포넌트 data-* 속성 표:

표를 읽는 방법:

• selector 열 – data 속성이 추가되는 Styles API selector(또는 여러 selector)

• attribute 열 – data 속성 이름

• condition 열 – data 속성이 요소에 추가되는 기준이 되는 조건

• value 열 – data 속성의 값

mod prop

모든 컴포넌트는 루트 요소에 data 속성을 추가할 수 있게 해주는 mod prop을 지원해요. CamelCase 키는 kebab-case로 변환돼요. 키가 data-로 시작하면 접두사가 중복되지 않아요.

mod prop 사용 예시:

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

<Box mod="data-test" />;
// -> <div data-test />

<Box mod={{ hidden: true }} />;
// -> <div data-hidden="true" />

<Box mod={{ data: 'test' }} />;
// -> <div data-data="test" />

<Box mod={['hidden', { outlined: true }]} />;
// -> <div data-hidden data-outlined="true" />

<Box mod="hidden outlined" />;
// -> <div data-hidden data-outlined />

더 알아보기 (Learn more)

• Styles API
• Variants and sizes