Blazor Grid Customize Icons

Ignite UI for Blazor IgbGrid 아이콘은 노출된 API 메서드를 사용하여 다른 컬렉션 세트의 사용자 정의 아이콘을 사용하도록 사용자 정의할 수 있습니다.

• registerIconFromText
• registerIcon
• setIconRef

아이콘을 등록하면 로컬로 캐시되므로 구성 요소 간에 재사용할 수 있으며, 이 아이콘은 이름과 컬렉션 이름으로 참조됩니다. 참조를 설정하면 해당 아이콘을 이름으로 참조할 때 어떤 아이콘, 어떤 컬렉션에서 사용되는지가 변경됩니다.

@code {
    private IgbIcon icon;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (this.icon != null && firstRender)
        {
            this.icon.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                // Add a new 'material' icon called 'filter_list' from string
                this.icon.RegisterIconFromText("filter_list", '<svg>...</svg>', "material");

                // Add a new 'material' icon called 'filter_list' from svg url
                this.icon.RegisterIcon("filter_list", "url" , "material")

                // Sets the icon reference to the new registered icon.
                this.icon.SetIconRef("filter_list", "default", new IgbIconMeta()
                {
                    Name = "filter_list",
                    Collection = "material",
                });
            }));
        }
    }
}

razor

すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.NET 開発者には制限はありません。

無料で試してみる

Blazor Customize Icons Example

다음 샘플은 원래 재질 아이콘에서 사용자 정의 글꼴 멋진 svg 아이콘으로 전환하고 다시 재질로 전환하는 방법을 보여줍니다.

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class NwindDataItem
{
    public double ProductID { get; set; }
    public string ProductName { get; set; }
    public double SupplierID { get; set; }
    public double CategoryID { get; set; }
    public string QuantityPerUnit { get; set; }
    public double UnitPrice { get; set; }
    public double UnitsInStock { get; set; }
    public double UnitsOnOrder { get; set; }
    public double ReorderLevel { get; set; }
    public bool Discontinued { get; set; }
    public string OrderDate { get; set; }
    public double Rating { get; set; }
    public List<NwindDataItem_LocationsItem> Locations { get; set; }
}
public class NwindDataItem_LocationsItem
{
    public string Shop { get; set; }
    public string LastInventory { get; set; }
}

public class NwindData
    : List<NwindDataItem>
{
    public NwindData()
    {
        this.Add(new NwindDataItem()
        {
            ProductID = 1,
            ProductName = @"Chai",
            SupplierID = 1,
            CategoryID = 1,
            QuantityPerUnit = @"10 boxes x 20 bags",
            UnitPrice = 18,
            UnitsInStock = 39,
            UnitsOnOrder = 30,
            ReorderLevel = 10,
            Discontinued = false,
            OrderDate = @"2012-02-12",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 2,
            ProductName = @"Chang",
            SupplierID = 1,
            CategoryID = 1,
            QuantityPerUnit = @"24 - 12 oz bottles",
            UnitPrice = 19,
            UnitsInStock = 17,
            UnitsOnOrder = 40,
            ReorderLevel = 25,
            Discontinued = true,
            OrderDate = @"2003-03-17",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 3,
            ProductName = @"Aniseed Syrup",
            SupplierID = 1,
            CategoryID = 2,
            QuantityPerUnit = @"12 - 550 ml bottles",
            UnitPrice = 10,
            UnitsInStock = 13,
            UnitsOnOrder = 70,
            ReorderLevel = 25,
            Discontinued = false,
            OrderDate = @"2006-03-17",
            Rating = 3,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"24/7 Market",
                    LastInventory = @"2018-11-11"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 4,
            ProductName = @"Chef Antons Cajun Seasoning",
            SupplierID = 2,
            CategoryID = 2,
            QuantityPerUnit = @"48 - 6 oz jars",
            UnitPrice = 22,
            UnitsInStock = 53,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2016-03-17",
            Rating = 3,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 5,
            ProductName = @"Chef Antons Gumbo Mix",
            SupplierID = 2,
            CategoryID = 2,
            QuantityPerUnit = @"36 boxes",
            UnitPrice = 21.35,
            UnitsInStock = 0,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = true,
            OrderDate = @"2011-11-11",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 6,
            ProductName = @"Grandmas Boysenberry Spread",
            SupplierID = 3,
            CategoryID = 2,
            QuantityPerUnit = @"12 - 8 oz jars",
            UnitPrice = 25,
            UnitsInStock = 0,
            UnitsOnOrder = 30,
            ReorderLevel = 25,
            Discontinued = false,
            OrderDate = @"2017-12-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 7,
            ProductName = @"Uncle Bobs Organic Dried Pears",
            SupplierID = 3,
            CategoryID = 7,
            QuantityPerUnit = @"12 - 1 lb pkgs.",
            UnitPrice = 30,
            UnitsInStock = 150,
            UnitsOnOrder = 30,
            ReorderLevel = 10,
            Discontinued = false,
            OrderDate = @"2016-07-17",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 8,
            ProductName = @"Northwoods Cranberry Sauce",
            SupplierID = 3,
            CategoryID = 2,
            QuantityPerUnit = @"12 - 12 oz jars",
            UnitPrice = 40,
            UnitsInStock = 6,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2018-01-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 9,
            ProductName = @"Mishi Kobe Niku",
            SupplierID = 4,
            CategoryID = 6,
            QuantityPerUnit = @"18 - 500 g pkgs.",
            UnitPrice = 97,
            UnitsInStock = 29,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = true,
            OrderDate = @"2010-02-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 10,
            ProductName = @"Ikura",
            SupplierID = 4,
            CategoryID = 8,
            QuantityPerUnit = @"12 - 200 ml jars",
            UnitPrice = 31,
            UnitsInStock = 31,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2008-05-17",
            Rating = 3,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Wall Market",
                    LastInventory = @"2018-12-06"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 11,
            ProductName = @"Queso Cabrales",
            SupplierID = 5,
            CategoryID = 4,
            QuantityPerUnit = @"1 kg pkg.",
            UnitPrice = 21,
            UnitsInStock = 22,
            UnitsOnOrder = 30,
            ReorderLevel = 30,
            Discontinued = false,
            OrderDate = @"2009-01-17",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 12,
            ProductName = @"Queso Manchego La Pastora",
            SupplierID = 5,
            CategoryID = 4,
            QuantityPerUnit = @"10 - 500 g pkgs.",
            UnitPrice = 38,
            UnitsInStock = 86,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2015-11-17",
            Rating = 3,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 13,
            ProductName = @"Konbu",
            SupplierID = 6,
            CategoryID = 8,
            QuantityPerUnit = @"2 kg box",
            UnitPrice = 6,
            UnitsInStock = 24,
            UnitsOnOrder = 30,
            ReorderLevel = 5,
            Discontinued = false,
            OrderDate = @"2015-03-17",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 14,
            ProductName = @"Tofu",
            SupplierID = 6,
            CategoryID = 7,
            QuantityPerUnit = @"40 - 100 g pkgs.",
            UnitPrice = 23.25,
            UnitsInStock = 35,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2017-06-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 15,
            ProductName = @"Genen Shouyu",
            SupplierID = 6,
            CategoryID = 2,
            QuantityPerUnit = @"24 - 250 ml bottles",
            UnitPrice = 15.5,
            UnitsInStock = 39,
            UnitsOnOrder = 30,
            ReorderLevel = 5,
            Discontinued = false,
            OrderDate = @"2014-03-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Local Market",
                    LastInventory = @"2018-07-03"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Wall Market",
                    LastInventory = @"2018-12-06"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 16,
            ProductName = @"Pavlova",
            SupplierID = 7,
            CategoryID = 3,
            QuantityPerUnit = @"32 - 500 g boxes",
            UnitPrice = 17.45,
            UnitsInStock = 29,
            UnitsOnOrder = 30,
            ReorderLevel = 10,
            Discontinued = false,
            OrderDate = @"2018-03-28",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"24/7 Market",
                    LastInventory = @"2018-11-11"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 17,
            ProductName = @"Alice Mutton",
            SupplierID = 7,
            CategoryID = 6,
            QuantityPerUnit = @"20 - 1 kg tins",
            UnitPrice = 39,
            UnitsInStock = 0,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = true,
            OrderDate = @"2015-08-17",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 18,
            ProductName = @"Carnarvon Tigers",
            SupplierID = 7,
            CategoryID = 8,
            QuantityPerUnit = @"16 kg pkg.",
            UnitPrice = 62.5,
            UnitsInStock = 42,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2005-09-27",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"24/7 Market",
                    LastInventory = @"2018-11-11"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 19,
            ProductName = @"Teatime Chocolate Biscuits",
            SupplierID = 8,
            CategoryID = 3,
            QuantityPerUnit = @"",
            UnitPrice = 9.2,
            UnitsInStock = 25,
            UnitsOnOrder = 30,
            ReorderLevel = 5,
            Discontinued = false,
            OrderDate = @"2001-03-17",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Local Market",
                    LastInventory = @"2018-07-03"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 20,
            ProductName = @"Sir Rodneys Marmalade",
            SupplierID = 8,
            CategoryID = 3,
            QuantityPerUnit = @"4 - 100 ml jars",
            UnitPrice = 4.5,
            UnitsInStock = 40,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2005-03-17",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
    }
}csコピー

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(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbIcon @ref="icon" IconName="filter_list" Collection="fontAwesome" hidden></IgbIcon>
        <IgbButtonGroup Select="@((evt) => ButtonSelectionChange(evt))" style="width:fit-content;">
            <IgbToggleButton Value="material" Selected>Material Icons</IgbToggleButton>
            <IgbToggleButton Value="fontAwesome">Font Awesome Icons</IgbToggleButton>
        </IgbButtonGroup>
        <IgbGrid AutoGenerate="false"
                 Name="grid"
                 @ref="grid"
                 Data="NwindData"
                 RowEditable="true"
                 AllowFiltering="true"
                 FilterMode="FilterMode.ExcelStyleFilter"
                 PrimaryKey="ProductID">
            <IgbGridToolbar>
                <IgbGridToolbarActions>
                    <IgbGridToolbarAdvancedFiltering>
                    </IgbGridToolbarAdvancedFiltering>
                    <IgbGridToolbarHiding>
                    </IgbGridToolbarHiding>
                    <IgbGridToolbarPinning>
                    </IgbGridToolbarPinning>
                    <IgbGridToolbarExporter>
                    </IgbGridToolbarExporter>
                </IgbGridToolbarActions>

            </IgbGridToolbar>
            <IgbColumn Name="ProductName"
                       Field="ProductName"
                       Header="Product Name"
                        Sortable="true">
            </IgbColumn>

            <IgbColumn Name="UnitPrice"
                       Field="UnitPrice"
                       Header="Unit Price" Sortable="true">
            </IgbColumn>

            <IgbColumn Name="UnitsOnOrder"
                       Field="UnitsOnOrder"
                       Header="Units On Order" Sortable="true">
            </IgbColumn>

            <IgbColumn Name="UnitsInStock"
                       Field="UnitsInStock"
                       Header="Units In Stock" Sortable="true">
            </IgbColumn>

            <IgbColumn Name="QuantityPerUnit"
                       Field="QuantityPerUnit"
                       Header="Quantity Per Unit" Sortable="true">
            </IgbColumn>

            <IgbColumn Name="ReorderLevel"
                       Field="ReorderLevel"
                       Header="Reorder Level" Sortable="true">
            </IgbColumn>

            <IgbColumn Name="Discontinued"
                       Field="Discontinued"
                       Header="Discontinued" Sortable="true">
            </IgbColumn>

        </IgbGrid>

    </div>
</div>

@code {
    
    private IgbGrid grid;
    private IgbIcon icon;
    private string arrowDown = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 576 512""><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=""M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96 365.7 96 64c0-17.7 14.3-32 32-32s32 14.3 32 32l0 301.7 32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 480c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-32 0zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-96 0zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32l160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-160 0zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32l224 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L320 96z""/></svg>";
    private string arrowUp = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 576 512""><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=""M151.6 42.4C145.5 35.8 137 32 128 32s-17.5 3.8-23.6 10.4l-88 96c-11.9 13-11.1 33.3 2 45.2s33.3 11.1 45.2-2L96 146.3 96 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-301.7 32.4 35.4c11.9 13 32.2 13.9 45.2 2s13.9-32.2 2-45.2l-88-96zM320 480l32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-32 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128l160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-160 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128l224 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32z""/></svg>";
    private string caretDown = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 320 512""><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=""M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z""/></svg>";
    private string chevronRight = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 320 512""><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=""M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z""/></svg>";
    private string ellipsisRight = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 128 512""><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=""M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z""/></svg>";
    private string eyeSlash = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 640 512""><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=""M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z""/></svg>";
    private string eye = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 576 512""><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=""M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z""/></svg>";
    private string fileExport = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 576 512""><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=""M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 128-168 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l168 0 0 112c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zM384 336l0-48 110.1 0-39-39c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l80 80c9.4 9.4 9.4 24.6 0 33.9l-80 80c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l39-39L384 336zm0-208l-128 0L256 0 384 128z""/></svg>";
    private string magnifyGlass = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 512 512""><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=""M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z""/></svg>";
    private string filter = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 512 512""><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=""M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z""/></svg>";
    private string thumbtack = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 384 512""><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=""M32 32C32 14.3 46.3 0 64 0L320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-29.5 0 11.4 148.2c36.7 19.9 65.7 53.2 79.5 94.7l1 3c3.3 9.8 1.6 20.5-4.4 28.8s-15.7 13.3-26 13.3L32 352c-10.3 0-19.9-4.9-26-13.3s-7.7-19.1-4.4-28.8l1-3c13.8-41.5 42.8-74.8 79.5-94.7L93.5 64 64 64C46.3 64 32 49.7 32 32zM160 384l64 0 0 96c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-96z""/></svg>";
    private string thumbtackSlash = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 640 512""><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=""M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L481.4 352c9.8-.4 18.9-5.3 24.6-13.3c6-8.3 7.7-19.1 4.4-28.8l-1-3c-13.8-41.5-42.8-74.8-79.5-94.7L418.5 64 448 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l29.5 0-6.1 79.5L38.8 5.1zM324.9 352L177.1 235.6c-20.9 18.9-37.2 43.3-46.5 71.3l-1 3c-3.3 9.8-1.6 20.5 4.4 28.8s15.7 13.3 26 13.3l164.9 0zM288 384l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96-64 0z""/></svg>";
    private string xMark = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 384 512""><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=""M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z""/></svg>";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (this.icon != null && firstRender)
        {
            this.icon.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.RegisterAwesomeIcons();
            }));
        }

    }

    public async void ButtonSelectionChange(IgbComponentValueChangedEventArgs evt)
    {
       await this.ChangeRefs(evt.Detail);
    }
    private void RegisterAwesomeIcons()
    {
        this.icon.RegisterIconFromText("filter_list", filter, "fontAwesome");
        this.icon.RegisterIconFromText("arrow_upward", arrowUp, "fontAwesome");
        this.icon.RegisterIconFromText("arrow_downward", arrowDown, "fontAwesome");
        this.icon.RegisterIconFromText("more_vert", ellipsisRight, "fontAwesome");
        this.icon.RegisterIconFromText("unpin-left", thumbtackSlash, "fontAwesome");
        this.icon.RegisterIconFromText("pin-left", thumbtack, "fontAwesome");
        this.icon.RegisterIconFromText("visibility", eye, "fontAwesome");
        this.icon.RegisterIconFromText("visibility_off", eyeSlash, "fontAwesome");
        this.icon.RegisterIconFromText("search", magnifyGlass, "fontAwesome");
        this.icon.RegisterIconFromText("chevron_right", chevronRight, "fontAwesome");
        this.icon.RegisterIconFromText("clear", xMark, "fontAwesome");
        this.icon.RegisterIconFromText("file_download", fileExport, "fontAwesome");
        this.icon.RegisterIconFromText("arrow_drop_down", caretDown, "fontAwesome");
    }

    private async Task ChangeRefs(string collectionName)
    {
        await this.icon.SetIconRefAsync("input_expand", "default", new IgbIconMeta()
            {
                Name = "arrow_drop_down",
                Collection = collectionName,
            });
        await this.icon.SetIconRefAsync("file_download", "default", new IgbIconMeta()
            {
                Name = "file_download",
                Collection = collectionName,
            });
        await this.icon.SetIconRefAsync("clear", "default", new IgbIconMeta()
            {
                Name = "clear",
                Collection = collectionName,
            });
        await this.icon.SetIconRefAsync("arrow_next", "default", new IgbIconMeta()
            {
                Name = "chevron_right",
                Collection = collectionName,
            });

        await this.icon.SetIconRefAsync("search", "default", new IgbIconMeta()
            {
                Name = "search",
                Collection = collectionName,
            });

        await this.icon.SetIconRefAsync("hide", "default", new IgbIconMeta()
            {
                Name = "visibility_off",
                Collection = collectionName,
            });

        await this.icon.SetIconRefAsync("show", "default", new IgbIconMeta()
            {
                Name = "visibility",
                Collection = collectionName,
            });

        await this.icon.SetIconRefAsync("unpin", "default", new IgbIconMeta()
            {
                Name = "unpin-left",
                Collection = collectionName == "material" ? "imx-icons" : collectionName,
            });

        await this.icon.SetIconRefAsync("pin", "default", new IgbIconMeta()
            {
                Name = "pin-left",
                Collection = collectionName == "material" ? "imx-icons" : collectionName,
            });
        await this.icon.SetIconRefAsync("filter_list", "default", new IgbIconMeta()
            {
                Name = "filter_list",
                Collection = collectionName,
            });

        await this.icon.SetIconRefAsync("sort_asc", "default", new IgbIconMeta()
            {
                Name = "arrow_upward",
                Collection = collectionName,
            });

        await this.icon.SetIconRefAsync("sort_desc", "default", new IgbIconMeta()
            {
                Name = "arrow_downward",
                Collection = collectionName,
            });

        await this.icon.SetIconRefAsync("more_vert", "default", new IgbIconMeta()
            {
                Name = "more_vert",
                Collection = collectionName,
            });

    }

    private NwindData _nwindData = null;
    public NwindData NwindData
    {
        get
        {
            if (_nwindData == null)
            {
                _nwindData = new NwindData();
            }
            return _nwindData;
        }
    }

}razorコピー

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

Internal Icons

다음은 모든 내부 아이콘을 나열합니다. Alias는 참조할 수 있는 아이콘의 이름입니다. Target Icon은 내부 아이콘 이름이고, Target Collection은 아이콘이 내부적으로 등록된 컬렉션입니다.

별명	대상 아이콘	타겟 컬렉션
add	add	material
add_child	자식 추가	imx-icons
add_row	행 추가	imx-icons
arrow_back	arrow_back	material
arrow_drop_down	arrow_drop_up	material
arrow_forward	arrow_forward	material
arrow_next	chevron_right	material
arrow_prev	chevron_left	material
case_sensitive	case-sensitive	imx-icons
carousel_next	arrow_forward	material
carousel_prev	arrow_back	material
chevron_left	chevron_left	material
chevron_right	chevron_right	material
시계	access_time	material
닫다	닫다	material
무너지다	확장_없음	material
확인하다	확인하다	material
date_range	date_range	material
삭제하다	delete	material
drag_indicator	drag_indicator	material
편집하다	편집하다	material
오류	오류	material
넓히다	확장_자세히	material
expand_more	확장_자세히	material
file_download	file_download	material
filter_all	모두 선택	imx-icons
filter_before	이전-이전	imx-icons
filter_contains	포함	imx-icons
filter_does_not_contain	포함하지 않음	imx-icons
filter_empty	비어 있음	imx-icons
filter_equal	같음	imx-icons
filter_false	거짓입니다.	imx-icons
filter_greater_than	보다 큼	imx-icons
filter_greater_than_or_equal	크거나 같음	imx-icons
filter_in	IS-IN (인-인)	imx-icons
filter_last_month	지난달	imx-icons
filter_last_year	지난해	imx-icons
filter_less_than	보다 작음	imx-icons
filter_less_than_or_equal	보다 작거나 같음	imx-icons
filter_next_month	다음 달	imx-icons
filter_next_year	내년	imx-icons
filter_not_empty	비어 있지 않음	imx-icons
filter_not_equal	같지 않음(not-equal)	imx-icons
filter_not_null	null이 아님	imx-icons
filter_null	is-null (영문)	imx-icons
filter_starts_with	다음으로 시작	imx-icons
filter_this_month	이달의 경우	imx-icons
filter_this_year	올해	imx-icons
filter_today	오늘	imx-icons
filter_true	is-true (참)	imx-icons
filter_yesterday	어제	imx-icons
first_page	첫 페이지	material
group_work	그룹 과제	material
숨기다	가시성_꺼짐	material
import_export	수입 수출	material
input_collapse	arrow_drop_up	material
input_clear	분명한	material
input_expand	arrow_drop_down	material
jump_down	점프 다운	imx-icons
jump_up	점프 업	imx-icons
last_page	마지막 페이지	material
more_vert	more_vert	material
다음	navigate_next	material
핀	핀 왼쪽	imx-icons
이전	navigate_before	material
리프레쉬	새로 고치다	material
제거하다	취소	material
검색	찾다	material
선택한	완료	material
보이다	시계	material
sort_asc	arrow_upward	material
sort_desc	arrow_downward	material
함수	함수	material
table_rows	table_rows	material
오늘	calendar_today	material
tree_collapse	확장_자세히	material
tree_expand	chevron_right	material
unfold_less	펼치지 않음	material
unfold_more	unfold_more	material
고정 해제	왼쪽 고정 해제	imx-icons
view_column	view_column	material

다음은 구성 요소에서 사용하는 모든 아이콘에 대한 분석입니다.

그리드

상	설명
add	필터 항목을 추가하기 위해 excel-filter 메뉴에서 사용됩니다.
arrow_back	열을 뒤로 이동하기 위해 다양한 UI 요소에서 사용됩니다.
arrow_drop_down	토글 가능한 메뉴를 나타내기 위해 다양한 버튼에 사용됩니다.
arrow_forward	열을 앞으로 이동하기 위해 다양한 UI 요소에서 사용됩니다.
취소	작업을 취소하기 위해 다양한 UI 요소에 사용됩니다.
chevron_right	Excel 스타일 필터링과 같이 확장 가능한 메뉴를 나타내는 데 사용됩니다.
닫다	확장된 메뉴를 닫는 데 사용됩니다.
확인하다	작업을 확인하는 데 사용됩니다.
drag_indicator	항목을 끌 수 있음을 나타내는 핸들을 표시하는 데 사용됩니다.
오류	잘못된 데이터 입력을 나타내기 위해 편집 가능한 셀에 사용됩니다.
expand_more	Excel 필터링 메뉴에서 더 많은 필터 추가를 나타내는 데 사용됩니다.
file_dowload	Excel 필터 내보내기에서 사용됩니다.
filter_*	다양한 필터링 피연산자에 사용됩니다.
group_work	그룹화 기준 끌어 놓기 영역에서 사용됩니다.
숨기다	열을 숨기기 위해 다양한 UI 요소에서 사용됩니다.
import_export	이동을 위해 피벗 데이터 선택기에서 사용됩니다.
input_clear	입력 데이터를 지우기 위해 입력 필드에서 사용됩니다.
다음	필터링 행 메뉴에서 칩 사이를 탐색하는 데 사용됩니다.
핀	열 고정을 위해 다양한 UI 요소에서 사용됩니다.
이전	필터링 행 메뉴에서 칩 사이를 탐색하는 데 사용됩니다.
제거하다	다양한 UI 요소에서 제거 표시기로 사용됩니다.
리프레쉬	필터링 행 메뉴에서 필터를 다시 로드하는 데 사용됩니다.
선택한	활성 선택을 나타내기 위해 다양한 UI 요소에서 사용됩니다.
보이다	열을 표시하기 위해 다양한 UI 요소에서 사용됩니다.
sort_asc	정렬 방향을 나타내기 위해 다양한 UI 요소에서 사용됩니다.
sort_desc	정렬 방향을 나타내기 위해 다양한 UI 요소에서 사용됩니다.
함수	피벗 그리드 및 데이터 선택기에서 사용됩니다.
table_rows	피벗 그리드 데이터 선택기에서 사용됩니다.
tree_collapse	나무와 같은 구조에서 세부 정보를 덜 표시하는 데 사용됩니다.
tree_expand	나무와 같은 구조에서 더 많은 세부 정보를 표시하는 데 사용됩니다.
고정 해제	열 고정을 위해 다양한 UI 요소에서 사용됩니다.
unfold_less	계층적 그리드에서 모든 행을 축소하는 데 사용됩니다.
unfold_more	계층적 그리드에서 모든 행을 확장하는 데 사용됩니다.
view_column	피벗 데이터 선택기에서 사용됩니다.

페이지네이터

상	설명
first_page	첫 번째 페이지로 이동하는 데 사용되는 단추에서 사용됩니다.
last_page	마지막 페이지로 이동하는 데 사용되는 단추에서 사용됩니다.
이전	이전 페이지로 이동하는 데 사용되는 단추에서 사용됩니다.
다음	다음 페이지로 이동하는 데 사용되는 단추에서 사용됩니다.

액션 스트립

상	설명
add_child	팝업 메뉴에서 사용됩니다.
add_row	팝업 메뉴에서 사용됩니다.
more_vert	팝업 메뉴에서 사용됩니다.

API References

• IgbGrid

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

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