Blazor 칩 개요

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

Blazor Chip Example

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-medium {
    --ig-size: var(--ig-size-medium);
}
</style>
<div class="container sample vertical">
    <IgbChip class="size-medium" Selectable=true Removable=true> Chip
    </IgbChip>
</div>

@code {
    

    private IgbIcon RegisterIconRef { get; set; }

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-medium {
    --ig-size: var(--ig-size-medium);
}cssコピー

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

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

Usage

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

// in Program.cs file

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

​IgbChip 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

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

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

@code {

    private IgbIcon RegisterIconRef { get; set; }

    protected override void OnInitialized()
    {
    }
}
razor

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

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

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

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

Examples

Variants

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

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample center" style="flex-direction: row; gap: 8px">
    <IgbChip Variant="StyleVariant.Primary" Selectable="true" Removable="true"> Primary
    </IgbChip>

    <IgbChip Variant="StyleVariant.Info" Selectable="true" Removable="true"> Info
    </IgbChip>

    <IgbChip Variant="StyleVariant.Success" Selectable="true" Removable="true"> Success
    </IgbChip>

    <IgbChip Variant="StyleVariant.Warning" Selectable="true" Removable="true"> Warning
    </IgbChip>

    <IgbChip Variant="StyleVariant.Danger" Selectable="true" Removable="true"> Danger
    </IgbChip>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Disabled

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

Prefix / Suffix

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-medium {
    --ig-size: var(--ig-size-medium);
}
</style>
<div class="container sample center size-medium" style="flex-direction: row; gap: 8px">
    <IgbChip Selectable="true" Removable="true">
        <span slot="select">
            <IgbIcon @ref="@SelectIconRef" IconName="custom-select" Collection="material" ></IgbIcon>
        </span>
        Custom Icons
    </IgbChip>

    <IgbChip Selectable="false" Removable="false">
         <span slot="start">
            <IgbIcon @ref="@BrushIconRef" IconName="brush" Collection="material" ></IgbIcon>
        </span>
        Start Slot
    </IgbChip>

    <IgbChip Selectable="false" Removable="false">
         End Slot
        <span slot="end">
            <IgbIcon @ref="@BrickWallIconRef" IconName="brick-wall" Collection="material"></IgbIcon>
        </span>
    </IgbChip>

    <IgbChip Disabled="true">
         Disabled Slot
        <span slot="end">
            <IgbIcon @ref="@DogIconRef" IconName="dog-icon" Collection="material" ></IgbIcon>
        </span>
    </IgbChip>
</div>

@code {
    

    private IgbIcon SelectIconRef { get; set; }
    private IgbIcon BrushIconRef { get; set; }
    private IgbIcon BrickWallIconRef { get; set; }
    private IgbIcon DogIconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.SelectIconRef != null)
        {
            await this.SelectIconRef.EnsureReady();
            //custom-select
            string selectIcon = "<svg style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='currentColor' d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z' /></svg>";
            await this.SelectIconRef.RegisterIconFromTextAsync("custom-select", selectIcon, "material");
        }

        if(firstRender && this.BrushIconRef != null)
        {
            await this.BrushIconRef.EnsureReady();
            //brush
            string brushIcon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-labelledby='bqbrush-desc bqbrush-title'><title id='bqbrush-title'>Brush Icon</title><desc id='bqbrush-desc'>A picture showing a painting brush.</desc><path d='M13.093 6.743a1.074 1.074 0 011.306.251l.237.237-6.4 6.4-.242-.231a1.074 1.074 0 01-.251-1.306c.446-.693 1.553-2.516.515-3.554-1.584-1.585-2.225-.94-3.809-2.528S2.714 3 3.354 2.354s2.073-.489 3.658 1.095.943 2.225 2.527 3.809c1.038 1.042 2.861-.069 3.554-.515zm6.93 5.874L15.31 7.9 8.9 14.31l4.433 4.433c-.039.159-.084.327-.137.508 0 0-.8 2.749.8 2.749s.8-2.749.8-2.749a10.75 10.75 0 01-.272-1.14L16.2 16.44a8.944 8.944 0 00-2.072-3.314s.555-.545 3.323 2.063l.811-.811-1.54-2.5 2.5 1.539z'/></svg>";
            await this.BrushIconRef.RegisterIconFromTextAsync("brush", brushIcon, "material");
        }

        if(firstRender && this.BrickWallIconRef != null)
        {
            await this.BrickWallIconRef.EnsureReady();
            //brick-wall
            string brickIcon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-labelledby='bpbrick-wall-desc bpbrick-wall-title'><title id='bpbrick-wall-title'>Brick Wall Icon</title><desc id='bpbrick-wall-desc'>A picture depicting a wall made of bricks.</desc><path d='M6 5H2V1h4zm10-4H8v4h8zM2 11h8V7H2zm10 0h8V7h-8zM22 1h-4v4h4zM6 13H2v4h4zm10 0H8v4h8zM2 23h8v-4H2zm10 0h8v-4h-8zm10-10h-4v4h4z'/></svg>";
            await this.BrickWallIconRef.RegisterIconFromTextAsync("brick-wall", brickIcon, "material");
        }

        if(firstRender && this.DogIconRef != null)
        {
            await this.DogIconRef.EnsureReady();
            //dog-icon
            string docIcon = "<svg style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='currentColor' d='M18,4C16.29,4 15.25,4.33 14.65,4.61C13.88,4.23 13,4 12,4C11,4 10.12,4.23 9.35,4.61C8.75,4.33 7.71,4 6,4C3,4 1,12 1,14C1,14.83 2.32,15.59 4.14,15.9C4.78,18.14 7.8,19.85 11.5,20V15.72C10.91,15.35 10,14.68 10,14C10,13 12,13 12,13C12,13 14,13 14,14C14,14.68 13.09,15.35 12.5,15.72V20C16.2,19.85 19.22,18.14 19.86,15.9C21.68,15.59 23,14.83 23,14C23,12 21,4 18,4M4.15,13.87C3.65,13.75 3.26,13.61 3,13.5C3.25,10.73 5.2,6.4 6.05,6C6.59,6 7,6.06 7.37,6.11C5.27,8.42 4.44,12.04 4.15,13.87M9,12A1,1 0 0,1 8,11C8,10.46 8.45,10 9,10A1,1 0 0,1 10,11C10,11.56 9.55,12 9,12M15,12A1,1 0 0,1 14,11C14,10.46 14.45,10 15,10A1,1 0 0,1 16,11C16,11.56 15.55,12 15,12M19.85,13.87C19.56,12.04 18.73,8.42 16.63,6.11C17,6.06 17.41,6 17.95,6C18.8,6.4 20.75,10.73 21,13.5C20.75,13.61 20.36,13.75 19.85,13.87Z'/></svg>";
            await this.DogIconRef.RegisterIconFromTextAsync("dog-icon", docIcon, "material");
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-medium {
    --ig-size: var(--ig-size-medium);
}cssコピー

크기

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

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}
</style>
<div class="container sample center" style="flex-direction: row; gap: 8px; align-items: baseline;">
    <IgbChip @ref=ChipRef class="size-small" Selectable="true">
        small
    </IgbChip>

    <IgbChip class="size-medium" Selectable="true">
        medium
    </IgbChip>

    <IgbChip class="size-large" Selectable="true">
        large
    </IgbChip>
</div>

@code {
    
    private IgbChip ChipRef { get; set;}

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.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コピー

Styling

구성 요소는 IgbChip 모든 스타일 속성을 변경하는 데 사용할 수 있는 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

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
igc-chip::part(base) {
    background: #011627;
    color: #ECAA53;
}

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

.size-medium {
    --ig-size: var(--ig-size-medium);
}
</style>
<div class="container sample vertical">
    <IgbChip class="size-medium" Selectable=true Removable=true> Chip
    </IgbChip>
</div>

@code {
    

    private IgbIcon RegisterIconRef { get; set; }

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
igc-chip::part(base) {
    background: #011627;
    color: #ECAA53;
}

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

.size-medium {
    --ig-size: var(--ig-size-medium);
}cssコピー

API References

• IgbChip
• Styling & Themes

Additional Resources

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브