igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
191 lines (187 loc) • 5.72 kB
TypeScript
import * as i0 from '@angular/core';
/**
* Determines the igxBadge type
*/
declare const IgxBadgeType: {
readonly PRIMARY: "primary";
readonly INFO: "info";
readonly SUCCESS: "success";
readonly WARNING: "warning";
readonly ERROR: "error";
};
type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
/**
* Badge provides visual notifications used to decorate avatars, menus, etc.
*
* @igxModule IgxBadgeModule
*
* @igxTheme igx-badge-theme
*
* @igxKeywords badge, icon, notification
*
* @igxGroup Data Entry & Display
*
* @remarks
* The Ignite UI Badge is used to decorate avatars, navigation menus, or other components in the
* application when visual notification is needed. They are usually designed as icons with a predefined
* style to communicate information, success, warnings, or errors.
*
* @example
* ```html
* <igx-avatar>
* <igx-badge icon="check" type="success"></igx-badge>
* </igx-avatar>
*/
declare class IgxBadgeComponent {
/**
* Sets/gets the `id` of the badge.
*
* @remarks
* If not set, the `id` will have value `"igx-badge-0"`.
*
* @example
* ```html
* <igx-badge id="igx-badge-2"></igx-badge>
* ```
*/
id: string;
/**
* Sets/gets the type of the badge.
*
* @remarks
* Allowed values are `primary`, `info`, `success`, `warning`, `error`.
* Providing an invalid value won't display a badge.
*
* @example
* ```html
* <igx-badge type="success"></igx-badge>
* ```
*/
type: string | IgxBadgeType;
/**
* Sets/gets the value to be displayed inside the badge.
*
* @remarks
* If an `icon` property is already set the `icon` will be displayed.
* If neither a `value` nor an `icon` is set the content of the badge will be empty.
*
* @example
* ```html
* <igx-badge value="11"></igx-badge>
* ```
*/
value: string | number;
/**
* Sets/gets an icon for the badge from the material icons set.
*
* @remarks
* Has priority over the `value` property.
* If neither a `value` nor an `icon` is set the content of the badge will be empty.
* Providing an invalid value won't display anything.
*
* @example
* ```html
* <igx-badge icon="check"></igx-badge>
* ```
*/
icon: string;
/**
* The name of the icon set. Used in case the icon is from a different icon set.
*/
iconSet: string;
/**
* Sets/gets the role attribute value.
*
* @example
* ```typescript
* @ViewChild("MyBadge", { read: IgxBadgeComponent })
* public badge: IgxBadgeComponent;
*
* badge.role = 'status';
* ```
*/
role: string;
/**
* Sets/gets the css class to use on the badge.
*
* @example
* ```typescript
* @ViewChild("MyBadge", { read: IgxBadgeComponent })
* public badge: IgxBadgeComponent;
*
* badge.cssClass = 'my-badge-class';
* ```
*/
cssClass: string;
/**
* Sets a square shape to the badge, if `shape` is set to `square`.
* By default the shape of the badge is rounded.
*
* @example
* ```html
* <igx-badge shape="square"></igx-badge>
* ```
*/
shape: 'rounded' | 'square';
/** @hidden @internal */
get _squareShape(): boolean;
/**
* Sets/gets the aria-label attribute value.
*
* @example
* ```typescript
* @ViewChild("MyBadge", { read: IgxBadgeComponent })
* public badge: IgxBadgeComponent;
*
* badge.label = 'badge';
* ```
*/
label: string;
/**
* Sets/gets whether the badge is outlined.
* Default value is `false`.
*
* @example
* ```html
* <igx-badge outlined></igx-badge>
* ```
*/
outlined: boolean;
/**
* Sets/gets whether the badge is displayed as a dot.
* When true, the badge will be rendered as a minimal 8px indicator without any content.
* Default value is `false`.
*
* @example
* ```html
* <igx-badge dot type="success"></igx-badge>
* ```
*/
dot: boolean;
/**
* Defines a human-readable, accessor, author-localized description for
* the `type` and the `icon` or `value` of the element.
*
* @hidden
* @internal
*/
get roleDescription(): string;
get infoClass(): boolean;
get successClass(): boolean;
get warningClass(): boolean;
get errorClass(): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxBadgeComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxBadgeComponent, "igx-badge", never, { "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconSet": { "alias": "iconSet"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "outlined": { "alias": "outlined"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; }, {}, never, ["*"], true, never>;
static ngAcceptInputType_outlined: unknown;
static ngAcceptInputType_dot: unknown;
}
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
declare class IgxBadgeModule {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxBadgeModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<IgxBadgeModule, never, [typeof IgxBadgeComponent], [typeof IgxBadgeComponent]>;
static ɵinj: i0.ɵɵInjectorDeclaration<IgxBadgeModule>;
}
export { IgxBadgeComponent, IgxBadgeModule, IgxBadgeType };