React Cuadrícula Iconos de personalización
Los iconos de Ignite UI for React IgrGrid
se pueden personalizar para usar iconos personalizados de un conjunto de colecciones diferente mediante los métodos de API expuestos:
registerIconFromText
registerIcon
setIconRef
Al registrar un icono, se almacena en caché localmente, de modo que se pueda reutilizar entre componentes, que hacen referencia a ese icono por nombre y nombre de colección. Al establecer una referencia, se cambia qué icono, de qué colección, se utilizará al hacer referencia a ese icono por su nombre.
registerIconFromText("filter_list" , '<svg>...</svg>' , "material" );
registerIcon("filter_list" , "url" , "material" )
setIconRef('filter_list' , 'default' , {
name : 'filter_list' ,
collection : 'material' ,
});
ts
React Ejemplo de personalización de iconos
En el siguiente ejemplo se muestra cómo cambiar de los iconos de material originales a iconos svg impresionantes de fuentes personalizadas y volver al material.
EXAMPLE
icons.ts
NwindData.ts
TSX
CSS
export const 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>' ;
export const 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>' ;
export const 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>' ;
export const 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>' ;
export const 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>' ;
export const 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>' ;
export const 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>' ;
export const 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>' ;
export const 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>' ;
export const 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>' ;
export const 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>' ;
export const 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>' ;
export const 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>' ;
ts コピー export class NwindDataItem {
public constructor (init: Partial<NwindDataItem> ) {
Object .assign(this , init);
}
public ProductID: number ;
public ProductName: string ;
public SupplierID: number ;
public CategoryID: number ;
public QuantityPerUnit: string ;
public UnitPrice: number ;
public UnitsInStock: number ;
public UnitsOnOrder: number ;
public ReorderLevel: number ;
public Discontinued: boolean ;
public OrderDate: string ;
public Rating: number ;
public Locations: NwindDataItem_LocationsItem[];
}
export class NwindDataItem_LocationsItem {
public constructor (init: Partial<NwindDataItem_LocationsItem> ) {
Object .assign(this , init);
}
public Shop: string ;
public LastInventory: string ;
}
export class NwindData extends Array <NwindDataItem > {
public constructor (items: Array <NwindDataItem> | number = -1 ) {
if (Array .isArray(items)) {
super (...items);
} else {
const newItems = [
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 NwindDataItem_LocationsItem(
{
Shop : `Fun-Tasty Co.` ,
LastInventory : `2018-06-12`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `2018-04-04`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `Super Market` ,
LastInventory : `2018-09-09`
})]
}),
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 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`
})]
}),
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 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`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `Super Market` ,
LastInventory : `2018-09-09`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `Super Market` ,
LastInventory : `2018-09-09`
})]
}),
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 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`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `Fun-Tasty Co.` ,
LastInventory : `2018-06-12`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `2018-04-04`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `2018-04-04`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `Wall Market` ,
LastInventory : `2018-12-06`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `Fun-Tasty Co.` ,
LastInventory : `2018-06-12`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `2018-04-04`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `2018-04-04`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `Super Market` ,
LastInventory : `2018-09-09`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `2018-04-04`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Street Market` ,
LastInventory : `2018-12-12`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `Local Market` ,
LastInventory : `2018-07-03`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Wall Market` ,
LastInventory : `2018-12-06`
})]
}),
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 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`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `2018-04-04`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `24/7 Market` ,
LastInventory : `2018-11-11`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Super Market` ,
LastInventory : `2018-09-09`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `Local Market` ,
LastInventory : `2018-07-03`
})]
}),
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 NwindDataItem_LocationsItem(
{
Shop : `Super Market` ,
LastInventory : `2018-09-09`
})]
}),
];
super (...newItems.slice(0 ));
}
}
}
ts コピー import React , { useRef } from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts" ;
import { IgrGridModule, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarAdvancedFiltering, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning } from "@infragistics/igniteui-react-grids" ;
import { IgrGrid, IgrPinningConfig, RowPinningPosition, IgrActionStrip, IgrGridPinningActions, IgrGridEditingActions, IgrColumn } from "@infragistics/igniteui-react-grids" ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from "@infragistics/igniteui-react-core" ;
import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData' ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
import { IgrButtonGroup, IgrComponentValueChangedEventArgs, IgrIcon, IgrIconMeta, IgrToggleButton, setIconRef, registerIconFromText } from "@infragistics/igniteui-react" ;
import { arrowDown, arrowUp, caretDown, chevronRight, ellipsisRight, eye, eyeSlash, fileExport, filter, magnifyGlass, thumbtack, thumbtackSlash, xMark } from './icons' ;
const mods : any [] = [
IgrGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private grid: IgrGrid
private iconInstance: IgrIcon;
private gridRef(r: IgrGrid) {
this .grid = r;
this .setState({});
}
public onSelect(_buttonGroup: IgrButtonGroup, args: IgrComponentValueChangedEventArgs) {
this .changeRefs(args.detail);
}
private changeRefs(collectionName: string ) {
setIconRef('arrow_drop_down' , 'default' , {
name: 'arrow_drop_down' ,
collection: collectionName,
});
setIconRef('file_download' , 'default' , {
name: 'file_download' ,
collection: collectionName,
});
setIconRef('clear' , 'default' , {
name: 'clear' ,
collection: collectionName,
});
setIconRef('chevron_right' , 'default' , {
name: 'chevron_right' ,
collection: collectionName,
});
setIconRef('search' , 'default' , {
name: 'search' ,
collection: collectionName,
});
setIconRef('hide' , 'default' , {
name: 'visibility_off' ,
collection: collectionName,
});
setIconRef('show' , 'default' , {
name: 'visibility' ,
collection: collectionName,
});
setIconRef('unpin' , 'default' , {
name: 'unpin-left' ,
collection: collectionName === "material" ? "imx-icons" : collectionName,
});
setIconRef('pin' , 'default' , {
name: 'pin-left' ,
collection: collectionName === "material" ? "imx-icons" : collectionName,
});
setIconRef('filter_list' , 'default' , {
name: 'filter_list' ,
collection: collectionName,
});
setIconRef('sort_asc' , 'default' , {
name: 'arrow_upward' ,
collection: collectionName,
});
setIconRef('more_vert' , 'default' , {
name: 'more_vert' ,
collection: collectionName,
});
setIconRef('sort_desc' , 'default' , {
name: 'arrow_downward' ,
collection: collectionName,
});
}
constructor (props: any ) {
super (props);
this .gridRef = this .gridRef.bind(this );
this .onSelect = this .onSelect.bind(this );
registerIconFromText("filter_list" , filter, "fontAwesome" );
registerIconFromText("arrow_upward" , arrowUp, "fontAwesome" );
registerIconFromText("arrow_downward" , arrowDown, "fontAwesome" );
registerIconFromText("more_vert" , ellipsisRight, "fontAwesome" );
registerIconFromText("unpin-left" , thumbtackSlash, "fontAwesome" );
registerIconFromText("pin-left" , thumbtack, "fontAwesome" );
registerIconFromText("visibility" , eye, "fontAwesome" );
registerIconFromText("visibility_off" , eyeSlash, "fontAwesome" );
registerIconFromText("search" , magnifyGlass, "fontAwesome" );
registerIconFromText("chevron_right" , chevronRight, "fontAwesome" );
registerIconFromText("clear" , xMark, "fontAwesome" );
registerIconFromText("file_download" , fileExport, "fontAwesome" );
registerIconFromText("arrow_drop_down" , caretDown, "fontAwesome" );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<IgrButtonGroup select ={this.onSelect} style ={{ width: 'fit-content ' }}>
<IgrToggleButton value ="material" key ="material" selected >
<span key ="text" > Material Icons</span >
</IgrToggleButton >
<IgrToggleButton value ="fontAwesome" key ="awesome" >
<span key ="text" > Font Awesome Icons</span >
</IgrToggleButton >
</IgrButtonGroup >
<div className ="container fill" >
<IgrGrid
autoGenerate ="false"
ref ={this.gridRef}
data ={this.nwindData}
rowEditable ="true"
allowFiltering ="true"
filterMode ="ExcelStyleFilter"
primaryKey ="ProductID" >
<IgrGridToolbar >
<IgrGridToolbarActions >
<IgrGridToolbarAdvancedFiltering > </IgrGridToolbarAdvancedFiltering >
<IgrGridToolbarHiding > </IgrGridToolbarHiding >
<IgrGridToolbarPinning > </IgrGridToolbarPinning >
<IgrGridToolbarExporter > </IgrGridToolbarExporter >
</IgrGridToolbarActions >
</IgrGridToolbar >
<IgrColumn
name ="ProductName"
field ="ProductName"
header ="Product Name" sortable ="true" >
</IgrColumn >
<IgrColumn
name ="UnitPrice"
field ="UnitPrice"
header ="Unit Price" sortable ="true" >
</IgrColumn >
<IgrColumn
name ="UnitsOnOrder"
field ="UnitsOnOrder"
header ="Units On Order" sortable ="true" >
</IgrColumn >
<IgrColumn
name ="UnitsInStock"
field ="UnitsInStock"
header ="Units In Stock" sortable ="true" >
</IgrColumn >
<IgrColumn
name ="QuantityPerUnit"
field ="QuantityPerUnit"
header ="Quantity Per Unit" sortable ="true" >
</IgrColumn >
<IgrColumn
name ="ReorderLevel"
field ="ReorderLevel"
header ="Reorder Level" sortable ="true" >
</IgrColumn >
<IgrColumn
name ="Discontinued"
field ="Discontinued"
header ="Discontinued" sortable ="true" >
</IgrColumn >
</IgrGrid >
</div >
</div >
);
}
private _nwindData: NwindData = null ;
public get nwindData(): NwindData {
if (this ._nwindData == null ) {
this ._nwindData = new NwindData();
}
return this ._nwindData;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Iconos internos
A continuación se enumeran todos los iconos internos. Alias es el nombre del icono por el que se puede hacer referencia. Icono de destino es el nombre del icono interno y Colección de destino es la colección en la que se registra internamente el icono.
Alias
Icono de objetivo
Colección de destino
add
add
material
add_child
agregar-niño
imx-icons
add_row
fila de adición
imx-icons
arrow_back
arrow_back
material
arrow_drop_down
arrow_drop_up
material
arrow_forward
flecha_adelante
material
arrow_next
chevron_right
material
arrow_prev
chevron_izquierda
material
case_sensitive
case-sensitive
imx-icons
carousel_next
flecha_adelante
material
carousel_prev
arrow_back
material
chevron_left
chevron_izquierda
material
chevron_right
chevron_right
material
reloj
access_time
material
cerrar
cerca
material
colapso
expand_less
material
confirmar
controlar
material
date_range
date_range
material
borrar
delete
material
drag_indicator
drag_indicator
material
editar
editar
material
error
error
material
expandir
expand_more
material
expand_more
expand_more
material
file_download
file_download
material
filter_all
Seleccionar-todo
imx-icons
filter_before
es-antes
imx-icons
filter_contains
Contiene
imx-icons
filter_does_not_contain
no-contiene-
imx-icons
filter_empty
está-vacío
imx-icons
filter_equal
Iguales
imx-icons
filter_false
es-falso
imx-icons
filter_greater_than
mayor que
imx-icons
filter_greater_than_or_equal
mayor o igual que
imx-icons
filter_in
está-en
imx-icons
filter_last_month
último mes
imx-icons
filter_last_year
El año pasado
imx-icons
filter_less_than
menos de
imx-icons
filter_less_than_or_equal
menor o igual
imx-icons
filter_next_month
El mes que viene
imx-icons
filter_next_year
El año que viene
imx-icons
filter_not_empty
no-vacío
imx-icons
filter_not_equal
no igual
imx-icons
filter_not_null
es-no-nulo
imx-icons
filter_null
es-nulo
imx-icons
filter_starts_with
comienza-con
imx-icons
filter_this_month
este mes
imx-icons
filter_this_year
Este año
imx-icons
filter_today
Hoy
imx-icons
filter_true
es-verdad
imx-icons
filter_yesterday
Ayer
imx-icons
first_page
primera página
material
group_work
trabajo en equipo
material
esconder
visibilidad_desactivada
material
import_export
importación y exportación
material
input_collapse
arrow_drop_up
material
input_clear
claro
material
input_expand
flecha_drop_abajo
material
jump_down
Salto hacia abajo
imx-icons
jump_up
Saltar
imx-icons
last_page
última página
material
more_vert
more_vert
material
próximo
navigate_next
material
anclar
pin a la izquierda
imx-icons
Prev
navigate_before
material
actualizar
actualizar
material
eliminar
Cancelar
material
buscar
buscar
material
seleccionado
hecho
material
mostrar
visibilidad
material
sort_asc
flecha_hacia arriba
material
sort_desc
flecha_hacia abajo
material
Funciones
Funciones
material
table_rows
table_rows
material
Hoy
calendar_today
material
tree_collapse
expand_more
material
tree_expand
chevron_right
material
unfold_less
desplegar_menos
material
unfold_more
unfold_more
material
Desanclar
desanclar a la izquierda
imx-icons
view_column
view_column
material
A continuación, se muestra un desglose de todos los iconos utilizados por componente:
Red
Icono
Descripción
add
Se utiliza en el menú de filtro de Excel para agregar una entrada de filtro.
arrow_back
Se utiliza en varios elementos de la interfaz de usuario para mover una columna hacia atrás.
arrow_drop_down
Se utiliza en varios botones para indicar menús alternables.
arrow_forward
Se utiliza en varios elementos de la interfaz de usuario para mover una columna hacia adelante.
Cancelar
Se utiliza en varios elementos de la interfaz de usuario para cancelar operaciones.
chevron_right
Se utiliza para indicar menús expandibles, como en el filtrado de estilo de Excel.
cerrar
Se utiliza para cerrar un menú expandido.
confirmar
Se utiliza para confirmar una operación.
drag_indicator
Se utiliza para mostrar un controlador para indicar que se puede arrastrar un elemento.
error
Se utiliza en celdas editables para indicar la entrada de datos errónea.
expand_more
Utilizado por el menú de filtrado de Excel para indicar la adición de más filtros.
file_dowload
Utilizado por el exportador de filtros de Excel.
filter_ *
Se utiliza para varios operandos de filtrado.
group_work
Utilizado por el área de colocación agrupar por.
esconder
Lo usan varios elementos de la interfaz de usuario para ocultar columnas.
import_export
Utilizado por el selector de datos de pivote para mover.
input_clear
Utilizado por los campos de entrada para borrar los datos de entrada.
próximo
Utilizado por el menú de filas de filtrado para navegar entre fichas.
anclar
Lo usan varios elementos de la interfaz de usuario para el anclaje de columnas.
Prev
Utilizado por el menú de filas de filtrado para navegar entre fichas.
eliminar
Utilizado por varios elementos de la interfaz de usuario como indicador de eliminación.
actualizar
Utilizado por el menú de la fila de filtrado para volver a cargar los filtros.
seleccionado
Utilizado por varios elementos de la interfaz de usuario para indicar la selección activa.
mostrar
Lo usan varios elementos de la interfaz de usuario para mostrar columnas.
sort_asc
Lo utilizan varios elementos de la interfaz de usuario para indicar la dirección de clasificación.
sort_desc
Lo utilizan varios elementos de la interfaz de usuario para indicar la dirección de clasificación.
Funciones
Utilizado por la cuadrícula pivotante y los selectores de datos.
table_rows
Utilizado por el selector de datos de la cuadrícula dinámica.
tree_collapse
Utilizado por la estructura en forma de árbol para mostrar menos detalles.
tree_expand
Utilizado por la estructura en forma de árbol para mostrar más detalles.
Desanclar
Lo usan varios elementos de la interfaz de usuario para el anclaje de columnas.
unfold_less
Utilizado por la cuadrícula jerárquica para contraer todas las filas.
unfold_more
Utilizado por la cuadrícula jerárquica para expandir todas las filas.
view_column
Utilizado por el selector de datos dinámicos.
Paginador
Icono
Descripción
first_page
Utilizado por el botón utilizado para navegar a la primera página.
last_page
Utilizado por el botón utilizado para navegar a la última página.
Prev
Utilizado por el botón utilizado para navegar a la página anterior.
próximo
Utilizado por el botón utilizado para navegar a la página siguiente.
Tira de acción
Icono
Descripción
add_child
Utilizado por el menú emergente.
add_row
Utilizado por el menú emergente.
more_vert
Utilizado por el menú emergente.
Referencias de API
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.