| 1 | import { NbStatusService } from '../../services/status.service';
|
| 2 | import { NbComponentSize } from '../component-size';
|
| 3 | import { NbComponentOrCustomStatus } from '../component-status';
|
| 4 | import * as i0 from "@angular/core";
|
| 5 | /**
|
| 6 | * Progress Bar is a component for indicating progress.
|
| 7 | *
|
| 8 | * Simple usage:
|
| 9 | *
|
| 10 | * ```html
|
| 11 | * <nb-progress-bar [value]="50"></nb-progress-bar>
|
| 12 | * ```
|
| 13 | * ### Installation
|
| 14 | *
|
| 15 | * Import `NbProgressBarModule` to your feature module.
|
| 16 | * ```ts
|
| 17 | * @NgModule({
|
| 18 | * imports: [
|
| 19 | * // ...
|
| 20 | * NbProgressBarModule,
|
| 21 | * ],
|
| 22 | * })
|
| 23 | * export class PageModule { }
|
| 24 | * ```
|
| 25 | * ### Usage
|
| 26 | *
|
| 27 | * Progress bar accepts property `value` in range 0-100
|
| 28 | * @stacked-example(Progress bar, progress-bar/progress-bar-showcase.component)
|
| 29 | *
|
| 30 | * Progress bar background could be configured by providing a `status` property:
|
| 31 | * @stacked-example(Progress bar status, progress-bar/progress-bar-status.component)
|
| 32 | *
|
| 33 | * Progress bar size (height and font-size) could be configured by providing a `size` property:
|
| 34 | * @stacked-example(Progress bar size, progress-bar/progress-bar-size.component)
|
| 35 | *
|
| 36 | * `displayValue` property shows current value inside progress bar. It's also possible to add custom text inside:
|
| 37 | * @stacked-example(Progress bar value, progress-bar/progress-bar-value.component)
|
| 38 | *
|
| 39 | * Progress bar supports `width` and `background-color` transition:
|
| 40 | * @stacked-example(Progress bar interactive, progress-bar/progress-bar-interactive.component)
|
| 41 | *
|
| 42 | * @styles
|
| 43 | *
|
| 44 | * progress-bar-animation-duration:
|
| 45 | * progress-bar-border-radius:
|
| 46 | * progress-bar-text-font-family:
|
| 47 | * progress-bar-tiny-height:
|
| 48 | * progress-bar-tiny-text-font-size:
|
| 49 | * progress-bar-tiny-text-font-weight:
|
| 50 | * progress-bar-tiny-text-line-height:
|
| 51 | * progress-bar-small-height:
|
| 52 | * progress-bar-small-text-font-size:
|
| 53 | * progress-bar-small-text-font-weight:
|
| 54 | * progress-bar-small-text-line-height:
|
| 55 | * progress-bar-medium-height:
|
| 56 | * progress-bar-medium-text-font-size:
|
| 57 | * progress-bar-medium-text-font-weight:
|
| 58 | * progress-bar-medium-text-line-height:
|
| 59 | * progress-bar-large-height:
|
| 60 | * progress-bar-large-text-font-size:
|
| 61 | * progress-bar-large-text-font-weight:
|
| 62 | * progress-bar-large-text-line-height:
|
| 63 | * progress-bar-giant-height:
|
| 64 | * progress-bar-giant-text-font-size:
|
| 65 | * progress-bar-giant-text-font-weight:
|
| 66 | * progress-bar-giant-text-line-height:
|
| 67 | * progress-bar-basic-background-color:
|
| 68 | * progress-bar-basic-filled-background-color:
|
| 69 | * progress-bar-basic-text-color:
|
| 70 | * progress-bar-primary-background-color:
|
| 71 | * progress-bar-primary-filled-background-color:
|
| 72 | * progress-bar-primary-text-color:
|
| 73 | * progress-bar-success-background-color:
|
| 74 | * progress-bar-success-filled-background-color:
|
| 75 | * progress-bar-success-text-color:
|
| 76 | * progress-bar-info-background-color:
|
| 77 | * progress-bar-info-filled-background-color:
|
| 78 | * progress-bar-info-text-color:
|
| 79 | * progress-bar-warning-background-color:
|
| 80 | * progress-bar-warning-filled-background-color:
|
| 81 | * progress-bar-warning-text-color:
|
| 82 | * progress-bar-danger-background-color:
|
| 83 | * progress-bar-danger-filled-background-color:
|
| 84 | * progress-bar-danger-text-color:
|
| 85 | * progress-bar-control-background-color:
|
| 86 | * progress-bar-control-filled-background-color:
|
| 87 | * progress-bar-control-text-color:
|
| 88 | */
|
| 89 | export declare class NbProgressBarComponent {
|
| 90 | protected statusService: NbStatusService;
|
| 91 | /**
|
| 92 | * Progress bar value in percent (0 - 100)
|
| 93 | */
|
| 94 | value: number;
|
| 95 | /**
|
| 96 | * Progress bar background (`basic` (default), `primary`, `info`, `success`, `warning`, `danger`, `control`)
|
| 97 | */
|
| 98 | status: NbComponentOrCustomStatus;
|
| 99 | /**
|
| 100 | * Progress bar size (`tiny`, `small`, `medium` (default), `large`, `giant`)
|
| 101 | */
|
| 102 | size: NbComponentSize;
|
| 103 | /**
|
| 104 | * Displays value inside progress bar
|
| 105 | */
|
| 106 | displayValue: boolean;
|
| 107 | get tiny(): boolean;
|
| 108 | get small(): boolean;
|
| 109 | get medium(): boolean;
|
| 110 | get large(): boolean;
|
| 111 | get giant(): boolean;
|
| 112 | get primary(): boolean;
|
| 113 | get success(): boolean;
|
| 114 | get info(): boolean;
|
| 115 | get warning(): boolean;
|
| 116 | get danger(): boolean;
|
| 117 | get basic(): boolean;
|
| 118 | get control(): boolean;
|
| 119 | get additionalClasses(): string[];
|
| 120 | constructor(statusService: NbStatusService);
|
| 121 | static ɵfac: i0.ɵɵFactoryDeclaration<NbProgressBarComponent, never>;
|
| 122 | static ɵcmp: i0.ɵɵComponentDeclaration<NbProgressBarComponent, "nb-progress-bar", never, { "value": { "alias": "value"; "required": false; }; "status": { "alias": "status"; "required": false; }; "size": { "alias": "size"; "required": false; }; "displayValue": { "alias": "displayValue"; "required": false; }; }, {}, never, ["*"], false, never>;
|
| 123 | }
|