Blazor 칩 개요

    Ignite UI for Blazor 사용자가 정보를 입력하고, 선택하고, 콘텐츠를 필터링하고, 작업을 트리거하는 데 도움이 됩니다.

    Blazor Chip Example

    용법

    사용하기IgbChip 전에 다음과 같이 등록해야 합니다:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));

    스타일링을 컴포넌트에 적용하려면 추가 CSS 파일을 연결해야 합니다IgbChip. 다음 내용은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 포함되어야 합니다:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <div class="container sample vertical">
    <IgbChip>Chip</IgbChip>
</div>

@code {

    private IgbIcon RegisterIconRef { get; set; }

    protected override void OnInitialized()
    {
    }
}

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

    <IgbChip Selectable="true"></IgbChip>

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

    <IgbChip Removable="true"></IgbChip>

    예

    변형

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

    <IgbChip Variant="ChipVariant.Success"></IgbChip>

    장애가 있는

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

    접두사 접미사

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

    크기

    사용자가IgbChip 다음의--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);
}

    스타일링

    이 컴포넌트는IgbChip 모든 스타일 속성을 변경할 수 있는 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 참조

    추가 리소스