Palette item registration object containing info about palette item. Returned from PaletteRegistrationProvider.getPaletteItemConfig method.
Describes the way the component is added to ABCS Component palette and the way it is initially dropped into ABCS designer.
- Version:
- 16.3.5
- Source:
Example
PaletteItemConfig example
{
// registers your component into the 'Custom' category
categoryName: 'Custom',
// instructs ABCS designer that the component will occupy
// 6 columns by default when dropped into a page
defaultWidth: 6,
// sets palette item tile's CSS class (including an icon) to custom-component-palette-icon
iconClassName: 'custom-component-palette-icon',
// tells ABCS where to load the custom CSS stylesheet
// for the palette item
styleResource: 'style/custom-component-palette.dt.css'
}Members
categoryName :String
stable API
Name of a component palette category.
Type:
- String
- Version:
- 16.3.5
- Source:
defaultWidth :Number
stable API
Desired width of the component after drop in columns (1 - 12).
Type:
- Number
- Version:
- 16.3.5
- Source:
iconClassName :String
stable API
Icon class name representing palette item tile in component palette. Set this to any CSS class ABCS internally provides or that is described in one of your component stylesheets to properly render the palette item's tile icon. See PaletteItemConfig.styleResource for how to provide your CSS stylesheet for palette items.
Type:
- String
- Version:
- 16.3.5
- Source:
styleResource :String
stable API
An optional path to a css resource defining the look of the palette icon.
As PaletteItemConfig.iconClassName
may return class name of an icon not one of the ABCS predefined icons but
a custom one defined by the component, styleResource point to
the css style resource containing the icon class name definition.
Most of the styling for palette items is done by ABCS itself, the component should define only the icon image, see the example on how to do it.
Type:
- String
- Version:
- 16.3.5
- Source:
Examples
Content of the styling resource
.custom-component-palette-icon:before {
background-image:url(../images/icon_60_ena.png);
}
.custom-component-palette-icon:hover:before{
background-image:url(../images/icon_60_hov.png);
}Using styleResource and iconClassName
PaletteRegistrationProvider.prototype.getPaletteItemConfig = function () {
return {
iconClassName: 'custom-component-palette-icon',
styleResource: 'style/custom-component-palette.dt.css',
categoryName: 'Custom'
};
}