Blazor Chip (チップ) の概要

Ignite UI for Blazor Chip は、ユーザーが情報を入力したり、選択したり、コンテンツをフィルタリングしたり、アクションをトリガーしたりするのに役立ちます。

Blazor Chip の例

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

また、追加の CSS ファイルをリンクして、スタイルを IgbChip コンポーネントに適用する必要があります。以下は、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

選択可能な Chip を表示するには、Chip の Selectable プロパティを使用できます。

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

削除可能可能な Chip を表示するには、Chip の Removable プロパティを使用できます。

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

コード例

バリアント

Ignite UI for Blazor Chip は、いくつかの事前定義されたスタイルのバリアントをサポートします。サポートされている値の 1 つ (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コピー

無効

Ignite UI for Blazor Chip は、Disabled プロパティを使用して無効にできます。

Prefix / Suffix (プレフィックス / サフィックス)

IgbChip コンポーネントの Prefix と Suffix の部分とそれらのスロットを使用して、Chip のメイン コンテンツの前後に異なるコンテンツを追加できます。デフォルトの選択アイコンと削除アイコンが用意されていますが、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コピー

Size (サイズ)

ユーザーが --ig-size CSS 変数を利用して IgbChip のサイズを選択できるようにします。

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 コンポーネントは、すべてのスタイル プロパティを変更するために使用できる base、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);
}
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
• スタイル設定 & テーマ

その他のリソース

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)