React Chip 개요

    Ignite UI for React 칩은 사람들이 정보를 입력하거나, 선택하거나, 콘텐츠를 필터링하거나, 작업을 트리거하는 데 도움이 됩니다.

    React Chip Example

    Usage

    먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

    npm install igniteui-react

    그런 다음 다음과 같이 와 필요한 CSS를 가져와야 IgrChip 합니다.

    import { IgrChip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrChip></IgrChip>

    선택 가능한 칩을 표시하려면 칩의 selectable 속성을 사용할 수 있습니다.

    <IgrChip selectable={true}></IgrChip>

    이동식 칩을 표시하려면 칩의 removable 속성을 사용할 수 있습니다.

    <IgrChip removable={true}></IgrChip>

    Examples

    Variants

    Ignite UI for React 칩은 사전 정의된 여러 스타일 변형을 지원합니다. 지원되는 값 중 하나를 할당하여 변형을 변경할 수 있습니다. Primary, Info, Success, Warning 또는 Danger에 variant 재산.

    <IgrChip variant="success"></IgrChip>

    Disabled

    Ignite UI for React 칩은 다음을 사용하여 비활성화할 수 있습니다. disabled 재산.

    <IgrChip disabled={true}></IgrChip>

    Prefix / Suffix

    와 더불어 Prefix 그리고 Suffix 일부 IgrChip 구성 요소와 해당 슬롯을 사용하여 칩의 주요 콘텐츠 앞뒤에 다양한 콘텐츠를 추가할 수 있습니다. 기본 선택 및 제거 아이콘을 제공하지만 다음을 사용하여 사용자 정의할 수 있습니다. IgrSelect 그리고 Remove 슬롯. 다음을 사용하여 기본 콘텐츠 앞이나 뒤에 추가 콘텐츠를 추가할 수 있습니다. Start 그리고 End 슬롯.

    크기

    우리는 사용자가 크기를 선택할 수 있도록 허용합니다. IgrChip을 활용하여--ig-size CSS 변수:

    <IgrChip className="size-small" selectable={true} removable={true}>
    <span>Chip</span>
</IgrChip>
<IgrChip className="size-medium" selectable={true} removable={true}>
    <span>Chip</span>
</IgrChip>
<IgrChip className="size-large" selectable={true} removable={true}>
    <span>Chip</span>
</IgrChip>

    .size-small {
  --ig-size: var(--ig-size-small);
}

.size-medium {
  --ig-size: var(--ig-size-medium);
}

.size-large {
  --ig-size: var(--ig-size-large);
}

    Styling

    구성 요소는 IgrChip 모든 스타일 속성을 변경하는 데 사용할 수 있는 a base, prefix,CSS suffix 파트를 노출합니다.

    igc-chip::part(base) {
  background: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

igc-chip::part(suffix) {
  color: var(--ig-gray-400);
}

    API References

    Additional Resources