/** * @license * Copyright Endlessjs. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ import { ElComponentStatus } from '../component-status'; export declare type ElBadgePhysicalPosition = 'top left' | 'top right' | 'bottom left' | 'bottom right'; export declare type ElBadgeLogicalPosition = 'top start' | 'top end' | 'bottom start' | 'bottom end'; export declare type ElBadgePosition = ElBadgePhysicalPosition | ElBadgeLogicalPosition; /** * Badge is a simple labeling component. * It can be used to add additional information to any content or highlight unread items. * * Element is absolute positioned, so parent should be * [positioned element](https://developer.mozilla.org/en-US/docs/Web/CSS/position). * It means parent `position` should be set to anything except `static`, e.g. `relative`, * `absolute`, `fixed`, or `sticky`. * * ### Installation * * Import `ElBadgeModule` to your feature module. * ```ts * @NgModule({ * imports: [ * // ... * ElBadgeModule, * ], * }) * export class PageModule { } * ``` * ### Usage * * Badge with default position and status(color): * * ```html * * ``` * * For example, badge can be placed into el-card header: * @stacked-example(Showcase, badge/badge-showcase.component) * * Badge located on the bottom right with warning status: * * ```html * * * ``` * * @styles * * badge-border-radius: * badge-text-font-family: * badge-text-font-size: * badge-text-font-weight: * badge-text-line-height: * badge-padding: * badge-primary-background-color: * badge-primary-text-color: * badge-success-background-color: * badge-success-text-color: * badge-info-background-color: * badge-info-text-color: * badge-warning-background-color: * badge-warning-text-color: * badge-danger-background-color: * badge-danger-text-color: */ export declare class ElBadgeComponent { /** * Text to display * @type string */ text: string; /** * Badge position * * Can be set to any class or to one of predefined positions: * 'top left', 'top right', 'bottom left', 'bottom right', * 'top start', 'top end', 'bottom start', 'bottom end' * @type string */ position: ElBadgePosition; protected _defaultPosition: ElBadgePosition; protected _position: ElBadgePosition; /** * Badge status (adds specific styles): * 'primary', 'info', 'success', 'warning', 'danger' */ status: ElComponentStatus; readonly primary: boolean; readonly success: boolean; readonly info: boolean; readonly warning: boolean; readonly danger: boolean; readonly top: boolean; readonly right: boolean; readonly bottom: boolean; readonly left: boolean; readonly start: boolean; readonly end: boolean; }