Web Components Chip 개요

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

    Web Components Chip Example

    Usage

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

    npm install igniteui-webcomponents

    그 다음에는 필요한 CSS를 가져오IgcChipComponent 고, 그 모듈을 등록해야 합니다. 다음과 같습니다:

    import { defineComponents, IgcChipComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcChipComponent);

    Ignite UI for Web Components에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    사용하기 가장 간단한 방법은IgcChipComponent 다음과 같습니다:

    <igc-chip></igc-chip>

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

    <igc-chip selectable></igc-chip>

    분리형 칩을 표시하려면 칩의 특성을 사용할removable 수 있습니다.

    <igc-chip removable></igc-chip>

    Examples

    Variants

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

    <igc-chip variant="success"></igc-chip>

    Disabled

    Ignite UI for Web Components 칩은 해당disabled 속성을 사용해 비활성화할 수 있습니다.

    <igc-chip disabled></igc-chip>

    Prefix / Suffix

    ​Prefix그리고Suffix​IgcChipComponent 구성 요소와 슬롯에 대해 칩의 주요 콘텐츠 앞뒤에 다른 콘텐츠를 추가할 수 있습니다. 기본 선택 및 제거 아이콘을 제공하지만, 다음을 사용해 커스터마이징할 수 있습니다IgcSelectComponent 그리고Remove 슬롯. 주요 콘텐츠 전후로 추가 콘텐츠를 추가할 수 있습니다.Start 그리고End 슬롯.

    <igc-chip selectable removable>
  <span slot="select"><igc-icon name="verified-account"></igc-icon></span>
  <span slot="start"><igc-icon name="brush"></igc-icon></span>
    Chip
  <span slot="end"><igc-icon name="blood"></igc-icon></span>
  <span slot="remove"><igc-icon name="pacifier"></igc-icon></span>
</igc-chip>

    크기

    사용자가IgcChipComponent 다음의--ig-size CSS 변수:

    .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

    이 컴포넌트는IgcChipComponent 모든 스타일 속성을 변경할 수 있는 abase,prefix,suffix CSS 파트를 노출합니다.

    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