1 | /**
|
2 | * @license
|
3 | * Copyright Akveo. All Rights Reserved.
|
4 | * Licensed under the MIT License. See License.txt in the project root for license information.
|
5 | */
|
6 | import { NbStatusService } from '../../services/status.service';
|
7 | import { NbComponentOrCustomStatus } from '../component-status';
|
8 | export declare type NbBadgePhysicalPosition = 'top left' | 'top right' | 'bottom left' | 'bottom right' | 'center right' | 'center left';
|
9 | export declare type NbBadgeLogicalPosition = 'top start' | 'top end' | 'bottom start' | 'bottom end' | 'center start' | 'center end';
|
10 | export declare type NbBadgePosition = NbBadgePhysicalPosition | NbBadgeLogicalPosition;
|
11 | export interface NbBadge {
|
12 | text?: string;
|
13 | position?: NbBadgePosition;
|
14 | status?: NbComponentOrCustomStatus;
|
15 | dotMode?: boolean;
|
16 | }
|
17 | /**
|
18 | * Badge is a simple labeling component.
|
19 | * It can be used to add additional information to any content or highlight unread items.
|
20 | *
|
21 | * Element is absolute positioned, so parent should be
|
22 | * [positioned element](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
|
23 | * It means parent `position` should be set to anything except `static`, e.g. `relative`,
|
24 | * `absolute`, `fixed`, or `sticky`.
|
25 | *
|
26 | * ### Installation
|
27 | *
|
28 | * Import `NbBadgeModule` to your feature module.
|
29 | * ```ts
|
30 | * @NgModule({
|
31 | * imports: [
|
32 | * // ...
|
33 | * NbBadgeModule,
|
34 | * ],
|
35 | * })
|
36 | * export class PageModule { }
|
37 | * ```
|
38 | * ### Usage
|
39 | *
|
40 | * Badge with default position and status(color):
|
41 | *
|
42 | * ```html
|
43 | * <nb-badge text="badgeText"></nb-badge>
|
44 | * ```
|
45 | *
|
46 | * For example, badge can be placed into nb-card header:
|
47 | * @stacked-example(Showcase, badge/badge-showcase.component)
|
48 | *
|
49 | * Badge located on the bottom right with warning status:
|
50 | *
|
51 | * ```html
|
52 | * <nb-badge text="badgeText" status="warning" position="bottom right">
|
53 | * </nb-badge>
|
54 | * ```
|
55 | *
|
56 | * @styles
|
57 | *
|
58 | * badge-border-radius:
|
59 | * badge-text-font-family:
|
60 | * badge-text-font-size:
|
61 | * badge-text-font-weight:
|
62 | * badge-text-line-height:
|
63 | * badge-padding:
|
64 | * badge-basic-background-color:
|
65 | * badge-basic-text-color:
|
66 | * badge-primary-background-color:
|
67 | * badge-primary-text-color:
|
68 | * badge-success-background-color:
|
69 | * badge-success-text-color:
|
70 | * badge-info-background-color:
|
71 | * badge-info-text-color:
|
72 | * badge-warning-background-color:
|
73 | * badge-warning-text-color:
|
74 | * badge-danger-background-color:
|
75 | * badge-danger-text-color:
|
76 | * badge-control-background-color:
|
77 | * badge-control-text-color:
|
78 | */
|
79 | export declare class NbBadgeComponent implements NbBadge {
|
80 | protected statusService: NbStatusService;
|
81 | /**
|
82 | * Text to display
|
83 | * @type string
|
84 | */
|
85 | text: string;
|
86 | /**
|
87 | * Badge position
|
88 | *
|
89 | * Can be set to any class or to one of predefined positions:
|
90 | * 'top left', 'top right', 'bottom left', 'bottom right',
|
91 | * 'top start', 'top end', 'bottom start', 'bottom end'
|
92 | * @type string
|
93 | */
|
94 | get position(): NbBadgePosition;
|
95 | set position(value: NbBadgePosition);
|
96 | protected _defaultPosition: NbBadgePosition;
|
97 | protected _position: NbBadgePosition;
|
98 | /**
|
99 | * Shows badge as a dot. No text is shown.
|
100 | * @type boolean
|
101 | */
|
102 | get dotMode(): boolean;
|
103 | set dotMode(value: boolean);
|
104 | protected _dotMode: boolean;
|
105 | /**
|
106 | * Badge status (adds specific styles):
|
107 | * 'basic', 'primary', 'info', 'success', 'warning', 'danger', 'control'
|
108 | */
|
109 | status: NbComponentOrCustomStatus;
|
110 | get additionalClasses(): string[];
|
111 | get primary(): boolean;
|
112 | get success(): boolean;
|
113 | get info(): boolean;
|
114 | get warning(): boolean;
|
115 | get danger(): boolean;
|
116 | get basic(): boolean;
|
117 | get control(): boolean;
|
118 | get top(): boolean;
|
119 | get right(): boolean;
|
120 | get bottom(): boolean;
|
121 | get left(): boolean;
|
122 | get start(): boolean;
|
123 | get end(): boolean;
|
124 | get center(): boolean;
|
125 | constructor(statusService: NbStatusService);
|
126 | }
|