React Chip 개요

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

    React Chip Example

    EXAMPLE

    Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

    Usage

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

    npm install igniteui-react
cmd

    그런 다음 다음과 같이 필요한 CSS인 IgrChip 가져오고 해당 모듈을 등록해야 합니다.

    import { IgrChipModule, IgrChip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrChipModule.register();
tsx
    <IgrChip></IgrChip>
tsx

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

    <IgrChip selectable="true"></IgrChip>
tsx

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

    <IgrChip removable="true"></IgrChip>
tsx
    Ignite UI for React | CTA Banner

    Examples

    Variants

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

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

    EXAMPLE

    Disabled

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

    <IgrChip disabled="true"></IgrChip>
tsx

    Prefix / Suffix

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

    EXAMPLE

    크기

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

    <IgrChip size="small" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>
<IgrChip size="medium" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>
<IgrChip size="large" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>
tsx
    igc-chip {
  --ig-size: var(--ig-size-large);
}
css

    EXAMPLE

    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);
}
css

    EXAMPLE

    API References

    Additional Resources