Blazor 칩 개요

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

Blazor 칩 예시

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コピー

이 샘플이 마음에 드시나요? Ignite UI for Blazor에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

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

無料で試してみる

용법

​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

예

변형

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 속성을 사용하여 Ignite UI for Blazor 비활성화할 수 있습니다.

접두사 접미사

와 더불어 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コピー

스타일링

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

• IgbChip
• Styling & Themes

추가 리소스

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