Web Components Chip 개요

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

    Web Components 칩 예시

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    용법

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

    npm install igniteui-webcomponents
cmd

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

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

defineComponents(IgcChipComponent);
ts

    Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    사용을 IgcChipComponent 시작하는 가장 간단한 방법은 다음과 같습니다.

    <igc-chip></igc-chip>
html

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

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

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

    <igc-chip removable></igc-chip>
html
    Ignite UI for Web Components | CTA 배너

    예

    변형

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    장애가 있는

    Ignite UI for Web Components 칩은 속성을 사용하여 사용하지 않도록 설정할 수 있습니다 disabled.

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

    접두사 접미사

    와 더불어 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>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    크기

    우리는 사용자가 크기를 선택할 수 있도록 허용합니다. 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);
}
css

    EXAMPLE
    TS
    HTML
    ChipSize.css
    index.css
    Edit in:

    스타일링

    구성 요소는 IgcChipComponent 모든 스타일 속성을 변경하는 데 사용할 수 있는 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
    TS
    HTML
    ChipStyle.css
    index.css
    Edit in:

    API 참조

    추가 리소스