Web Components Grid アイコンのカスタマイズ
Ignite UI for Web Components IgcGridComponent アイコンは、公開されている API メソッドを使用して、別のコレクション セットのカスタム アイコンを使用するようにカスタマイズできます。
registerIconFromTextregisterIconsetIconRef
アイコンを登録すると、アイコンがローカルにキャッシュされるため、名前とコレクション名でそのアイコンを参照するコンポーネント間で再利用できます。参照を設定すると、名前でアイコンを参照するときに、どのコレクションのどのアイコンが使用されるかが変更されます。
// Add a new 'material' icon called 'filter_list' from string
registerIconFromText("filter_list", '<svg>...</svg>', "material");
// Add a new 'material' icon called 'my-filter_list' from svg url
registerIcon("filter_list", "url" , "material")
// Sets the icon reference to the new registered icon.
setIconRef('filter_list', 'default', {
name: 'filter_list',
collection: 'material',
});
tsWeb Components アイコンのカスタマイズの例
以下のサンプルは、元の Material アイコンからカスタム Font Awesome SVG アイコンに切り替えて、再び Material に戻す方法を示しています。
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>';
tsexport 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));
}
}
}
tsimport { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcGridComponent, IgcPinningConfig, RowPinningPosition, IgcActionStripComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData';
import { defineComponents, IgcButtonGroupComponent, registerIcon, registerIconFromText, setIconRef } from 'igniteui-webcomponents';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import { ModuleManager } from 'igniteui-webcomponents-core';
import { arrowDown, arrowUp, caretDown, chevronRight, ellipsisRight, eye,
eyeSlash, fileExport, filter, magnifyGlass, thumbtack, thumbtackSlash, xMark } from "./icons"
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule
);
defineComponents(IgcButtonGroupComponent);
export class Sample {
private grid: IgcGridComponent
private _pinningConfig1: IgcPinningConfig | null = null;
public get pinningConfig1(): IgcPinningConfig {
if (this._pinningConfig1 == null)
{
var pinningConfig1: IgcPinningConfig = {} as IgcPinningConfig;
pinningConfig1.rows = RowPinningPosition.Top;
this._pinningConfig1 = pinningConfig1;
}
return this._pinningConfig1;
}
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
var buttonGroup = document.getElementById('btnGroup') as IgcButtonGroupComponent;
grid.data = this.nwindData;
grid.pinning = this.pinningConfig1;
this.registerAwesomeIcons();
buttonGroup.addEventListener("igcSelect", (e) => {
this.changeRefs(e.detail);
});
}
private registerAwesomeIcons() {
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");
}
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,
});
}
private _nwindData: NwindData = null;
public get nwindData(): NwindData {
if (this._nwindData == null)
{
this._nwindData = new NwindData();
}
return this._nwindData;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample ig-typography">
<igc-button-group id="btnGroup" selection="single-required" style="width: fit-content;">
<igc-toggle-button value="material" selected>Material Icons</igc-toggle-button>
<igc-toggle-button value="fontAwesome">Font Awesome Icons</igc-toggle-button>
</igc-button-group>
<div class="container fill">
<igc-grid auto-generate="false" name="grid" id="grid" row-editable="true" allow-filtering="true"
filter-mode="excelStyleFilter"
primary-key="ProductID">
<igc-grid-toolbar>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-advanced-filtering>
</igc-grid-toolbar-advanced-filtering>
<igc-grid-toolbar-hiding>
</igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning>
</igc-grid-toolbar-pinning>
<igc-grid-toolbar-exporter>
</igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column name="ProductName" id="ProductName" field="ProductName" header="Product Name" sortable="true">
</igc-column>
<igc-column name="UnitPrice" id="UnitPrice" field="UnitPrice" header="Unit Price" sortable="true">
</igc-column>
<igc-column name="UnitsOnOrder" id="UnitsOnOrder" field="UnitsOnOrder" header="Units On Order" sortable="true">
</igc-column>
<igc-column name="UnitsInStock" id="UnitsInStock" field="UnitsInStock" header="Units In Stock" sortable="true">
</igc-column>
<igc-column name="QuantityPerUnit" id="QuantityPerUnit" field="QuantityPerUnit" header="Quantity Per Unit" sortable="true">
</igc-column>
<igc-column name="ReorderLevel" id="ReorderLevel" field="ReorderLevel" header="Reorder Level" sortable="true">
</igc-column>
<igc-column name="Discontinued" id="Discontinued" field="Discontinued" header="Discontinued" sortable="true">
</igc-column>
</igc-grid>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<script src="src/index.ts"></script>
<% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
内部アイコン
以下にすべての内部アイコンをリストします。エイリアスは、アイコンを参照できる名前です。ターゲット アイコンは内部アイコン名であり、ターゲット コレクションはアイコンが内部的に登録されているコレクションです。
| エイリアス | ターゲット アイコン | ターゲット コレクション |
|---|---|---|
| add | add | material |
| add_child | add-child | imx-icons |
| add_row | 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 |
| clock | access_time | material |
| close | close | material |
| collapse | expand_less | material |
| confirm | check | material |
| date_range | date_range | material |
| delete | delete | material |
| drag_indicator | drag_indicator | material |
| edit | edit | material |
| error | error | material |
| expand | expand_more | material |
| expand_more | expand_more | material |
| file_download | file_download | material |
| filter_all | select-all | imx-icons |
| filter_before | is-before | imx-icons |
| filter_contains | contains | imx-icons |
| filter_does_not_contain | does-not-contain | imx-icons |
| filter_empty | is-empty | imx-icons |
| filter_equal | equals | imx-icons |
| filter_false | is-false | imx-icons |
| filter_greater_than | greater-than | imx-icons |
| filter_greater_than_or_equal | greater-than-or-equal | imx-icons |
| filter_in | is-in | imx-icons |
| filter_last_month | last-month | imx-icons |
| filter_last_year | last-year | imx-icons |
| filter_less_than | less-than | imx-icons |
| filter_less_than_or_equal | less-than-or-equal | imx-icons |
| filter_next_month | next-month | imx-icons |
| filter_next_year | next-year | imx-icons |
| filter_not_empty | not-empty | imx-icons |
| filter_not_equal | not-equal | imx-icons |
| filter_not_null | is-not-null | imx-icons |
| filter_null | is-null | imx-icons |
| filter_starts_with | starts-with | imx-icons |
| filter_this_month | this-month | imx-icons |
| filter_this_year | this-year | imx-icons |
| filter_today | today | imx-icons |
| filter_true | is-true | imx-icons |
| filter_yesterday | yesterday | imx-icons |
| first_page | first_page | material |
| group_work | group_work | material |
| hide | visibility_off | material |
| import_export | import_export | material |
| input_collapse | arrow_drop_up | material |
| input_clear | clear | material |
| input_expand | arrow_drop_down | material |
| jump_down | jump-down | imx-icons |
| jump_up | jump-up | imx-icons |
| last_page | last_page | material |
| more_vert | more_vert | material |
| next | navigate_next | material |
| pin | pin-left | imx-icons |
| prev | navigate_before | material |
| refresh | refresh | material |
| remove | cancel | material |
| search | search | material |
| selected | done | material |
| show | visibility | material |
| sort_asc | arrow_upward | material |
| sort_desc | arrow_downward | material |
| functions | functions | material |
| table_rows | table_rows | material |
| today | calendar_today | material |
| tree_collapse | expand_more | material |
| tree_expand | chevron_right | material |
| unfold_less | unfold_less | material |
| unfold_more | unfold_more | material |
| unpin | unpin-left | imx-icons |
| view_column | view_column | material |
コンポーネントで使用されるすべてのアイコンの内訳は以下のとおりです。
Grid (グリッド)
| アイコン | 説明 |
|---|---|
| add | フィルター エントリを追加するために Excel フィルター メニューで使用されます。 |
| arrow_back | 列を後方に移動するためにさまざまな UI 要素で使用されます。 |
| arrow_drop_down | トグル可能なメニューを示すためにさまざまなボタンで使用されます。 |
| arrow_forward | 列を前方に移動するためにさまざまな UI 要素で使用されます。 |
| cancel | 操作をキャンセルするためにさまざまな UI 要素で使用されます。 |
| chevron_right | Excel スタイルのフィルタリングのように、展開可能なメニューを示すために使用されます。 |
| close | 展開されたメニューを閉じるときに使用します。 |
| confirm | 操作を確認するときに使用されます。 |
| drag_indicator | 項目をドラッグできることを示すハンドルを表示するために使用されます。 |
| error | 編集可能なセルで、誤ったデータ入力を示すために使用されます。 |
| expand_more | Excel フィルタリング メニューで使用され、フィルターの追加を示します。 |
| file_dowload | Excel フィルター エクスポーターによって使用されます。 |
| filter_* | さまざまなフィルタリング オペランドに使用されます。 |
| group_work | グループ化ドロップ領域で使用されます。 |
| hide | さまざまな UI 要素によって列を非表示にするために使用されます。 |
| import_export | ピボット データ セレクターが移動する際に使用されます。 |
| input_clear | 入力フィールドで入力データをクリアするために使用されます。 |
| next | フィルタリング行メニューでチップ間を移動するために使用されます。 |
| pin | 列のピン固定のためにさまざまな UI 要素によって使用されます。 |
| prev | フィルタリング行メニューでチップ間を移動するために使用されます。 |
| remove | さまざまな UI 要素によって削除インジケーターとして使用されます。 |
| refresh | フィルター行メニューでフィルターを再読み込みするために使用されます。 |
| selected | アクティブな選択を示すためにさまざまな UI 要素によって使用されます。 |
| show | 列を表示するためにさまざまな UI 要素によって使用されます。 |
| sort_asc | ソート方向を示すためにさまざまな UI 要素によって使用されます。 |
| sort_desc | ソート方向を示すためにさまざまな UI 要素によって使用されます。 |
| functions | ピボット グリッドとデータ セレクターによって使用されます。 |
| table_rows | ピボット グリッド データ セレクターによって使用されます。 |
| tree_collapse | ツリーのような構造で、表示する情報を少なくするために使用されます。 |
| tree_expand | ツリーのような構造で、詳細を表示するために使用します。 |
| unpin | 列のピン固定のためにさまざまな UI 要素によって使用されます。 |
| unfold_less | 階層グリッドですべての行を縮小するために使用されます。 |
| unfold_more | 階層グリッドですべての行を展開するために使用されます。 |
| view_column | ピボット データ セレクターによって使用されます。 |
Paginator (ページネーター)
| アイコン | 説明 |
|---|---|
| first_page | 最初のページに移動するためのボタンで使用されます。 |
| last_page | 最後のページに移動するためのボタンで使用されます。 |
| prev | 前のページに移動するためのボタンで使用されます。 |
| next | 次のページに移動するためのボタンで使用されます。 |
Action Strip (アクション ストリップ)
| アイコン | 説明 |
|---|---|
| add_child | ポップアップ メニューで使用されます。 |
| add_row | ポップアップ メニューで使用されます。 |
| more_vert | ポップアップ メニューで使用されます。 |
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。