Web Components 칩 개요
Ignite UI for Web Components 사람들이 정보를 입력하고, 선택하고, 콘텐츠를 필터링하고, 작업을 트리거하는 데 도움이 됩니다.
Web Components 칩 예
용법
먼저 다음 명령을 실행하여 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>예
변형
Ignite UI for Web Components 사전 정의된 여러 스타일 변형을 지원합니다. 지원되는 값인 Primary, Info, Success, Warning 또는 Danger 중 하나를 variant 속성에 할당하여 변형을 변경할 수 있습니다.
<igc-chip variant="success"></igc-chip>장애가 있는
Ignite UI for Web Components 칩은 disabled 속성을 사용하여 비활성화할 수 있습니다.
<igc-chip disabled></igc-chip>접두사 접미사
와 더불어 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 변수:
igc-chip {
--ig-size: var(--ig-size-large);
}
스타일링
칩 구성 요소는 모든 스타일 속성을 변경하는 데 사용할 수 있는 Base, Prefix, Sufix 부분 및 여러 슬롯을 노출합니다.
igc-chip::part(base) { background: #011627; color: #ECAA53; } igc-chip::part(suffix) { color: #B7B6C2; }