Blazor 칩 개요

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

    Blazor Chip Example

    Usage

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

    // in Program.cs file

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

    또한 IgbChip 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor 웹 어셈블리 프로젝트의 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>

    Examples

    Variants

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

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

    Disabled

    Ignite UI for Blazor Disabled 속성을 사용하여 비활성화할 수 있습니다.

    Prefix / Suffix

    와 더불어 Prefix 그리고 Suffix 일부 IgbChip 구성 요소와 해당 슬롯을 사용하여 칩의 주요 콘텐츠 앞뒤에 다양한 콘텐츠를 추가할 수 있습니다. 기본 선택 및 제거 아이콘을 제공하지만 다음을 사용하여 사용자 정의할 수 있습니다. IgbSelect 그리고 Remove 슬롯. 다음을 사용하여 기본 콘텐츠 앞이나 뒤에 추가 콘텐츠를 추가할 수 있습니다. Start 그리고 End 슬롯.

    크기

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

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

    Styling

    칩 구성 요소는 모든 스타일 속성을 변경하는 데 사용할 수 있는 Base, Prefix, Sufix 부분 및 여러 슬롯을 노출합니다.

    igc-chip::part(base) {
    background: #011627;
    color: #ECAA53;
}

igc-chip::part(suffix) {
    color: #B7B6C2;
}

    API References

    Additional Resources