Web Components Chip 개요

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

    Web Components Chip Example

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    Usage

    먼저 다음 명령을 실행하여 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 Banner

    Examples

    Variants

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Disabled

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

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

    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>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    크기

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

    igc-chip {
  --ig-size: var(--ig-size-large);
}
css

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

    Styling

    구성 요소는 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 References

    Additional Resources