From 3693494477c7682bbcfeeec0ea001e2a7554db4b Mon Sep 17 00:00:00 2001 From: Alexander Demeshko Date: Thu, 7 Jun 2018 14:31:22 +0300 Subject: [PATCH] feat(theme): add progress-bar component (#459) --- DEV_DOCS.md | 41 ++++++++ docs/app/app.module.ts | 5 +- docs/structure.ts | 7 ++ e2e/popover.e2e-spec.ts | 9 ++ .../_progress-bar.component.theme.scss | 63 ++++++++++++ .../progress-bar/progress-bar.component.scss | 19 ++++ .../progress-bar/progress-bar.component.ts | 95 +++++++++++++++++++ .../progress-bar/progress-bar.module.ts | 19 ++++ .../progress-bar/progress-bar.spec.ts | 60 ++++++++++++ src/framework/theme/index.ts | 2 + .../theme/styles/global/_components.scss | 2 + .../theme/styles/themes/_default.scss | 23 +++++ src/playground/playground-routing.module.ts | 31 +++++- src/playground/playground.module.ts | 12 +++ .../progress-bar-interactive.component.html | 13 +++ .../progress-bar-interactive.component.ts | 38 ++++++++ .../progress-bar-showcase.component.html | 5 + .../progress-bar-showcase.component.ts | 9 ++ .../progress-bar-size.component.html | 9 ++ .../progress-bar-size.component.ts | 14 +++ .../progress-bar-status.component.html | 9 ++ .../progress-bar-status.component.ts | 14 +++ .../progress-bar-value.component.html | 6 ++ .../progress-bar-value.component.ts | 14 +++ 24 files changed, 517 insertions(+), 2 deletions(-) create mode 100644 src/framework/theme/components/progress-bar/_progress-bar.component.theme.scss create mode 100644 src/framework/theme/components/progress-bar/progress-bar.component.scss create mode 100644 src/framework/theme/components/progress-bar/progress-bar.component.ts create mode 100644 src/framework/theme/components/progress-bar/progress-bar.module.ts create mode 100644 src/framework/theme/components/progress-bar/progress-bar.spec.ts create mode 100644 src/playground/progress-bar/progress-bar-interactive.component.html create mode 100644 src/playground/progress-bar/progress-bar-interactive.component.ts create mode 100644 src/playground/progress-bar/progress-bar-showcase.component.html create mode 100644 src/playground/progress-bar/progress-bar-showcase.component.ts create mode 100644 src/playground/progress-bar/progress-bar-size.component.html create mode 100644 src/playground/progress-bar/progress-bar-size.component.ts create mode 100644 src/playground/progress-bar/progress-bar-status.component.html create mode 100644 src/playground/progress-bar/progress-bar-status.component.ts create mode 100644 src/playground/progress-bar/progress-bar-value.component.html create mode 100644 src/playground/progress-bar/progress-bar-value.component.ts diff --git a/DEV_DOCS.md b/DEV_DOCS.md index 2d34bc3980..c5b74eb284 100644 --- a/DEV_DOCS.md +++ b/DEV_DOCS.md @@ -223,6 +223,7 @@ For example, if you wanna add getting started article you have to do the followi ### Component block + If you have to render all the information about componend parsed with typedoc you have to use component blocks: @@ -342,6 +343,46 @@ To start a new release (publish the framework packages on NPM) you need: 8. build demo with npm run build:prod 9. upload demo using `scp -r dist/ server_details` + +# create a new component guide +- create directory in `src/framework/theme/components/your-component` with following files: +```` +your-component.component.ts (component file) +your-component.module.ts (module file) +your-component.component.html (optional, html file) +your-component.component.scss (optional, common styles for your component) +_your-component.component.theme.scss (optional, styles that depends on theme vars) + +```` + +- register your component in framework +```` +src/framework/theme/index.ts (add exports of your component and module) +src/framework/theme/styles/global/_components.scss (if you create _your-component.component.theme.scss you have to register mixin) + +```` + +- tests +```` +src/framework/theme/components/your-component/your-component.spec.ts if you want to test basic rendering +e2e/your-component.e2e-spec.ts if you need to test complex actions such as user interaction +```` + +- register your component in docs +```` +add it to docs/structure.ts + +src/playground/your-component/your-component-showcase.component.ts (create example usage of your component) +src/playground/your-component/your-component-showcase.component.html (most probably looks like ) + +src/playground/playground.module.ts (register your component in module) +src/playground/playground-routing.module.ts (routing) + +your-component.component.ts (add line in docs section- * @stacked-example(Your component, your-component/your-component-showcase.component) +```` +- after `npm run docs:serve` you can see your component at `http://localhost:4100/#/docs/components/your-component` + + # TODO - steps to start the development - describe framework and demo dependencies diff --git a/docs/app/app.module.ts b/docs/app/app.module.ts index c61bb087ca..8238b1593c 100644 --- a/docs/app/app.module.ts +++ b/docs/app/app.module.ts @@ -15,7 +15,9 @@ import { NbLayoutModule, NbMenuModule, NbTabsetModule, - NbCheckboxModule, NbSearchModule, + NbProgressBarModule, + NbCheckboxModule, + NbSearchModule, } from '@nebular/theme'; import { NgdAppComponent } from './app.component'; import { routes } from './app.routes'; @@ -37,6 +39,7 @@ export const DOCS = new InjectionToken('Docs Structure'); NbLayoutModule, NbTabsetModule, NbCheckboxModule, + NbProgressBarModule, NbMenuModule.forRoot(), NbThemeModule.forRoot({ name: '' }), NbSidebarModule.forRoot(), diff --git a/docs/structure.ts b/docs/structure.ts index 33c8bd00b2..1d7e96cc25 100644 --- a/docs/structure.ts +++ b/docs/structure.ts @@ -231,6 +231,13 @@ export const structure = [ 'NbCheckboxComponent', ], }, + { + type: 'tabs', + name: 'Progress Bar', + source: [ + 'NbProgressBarComponent', + ], + }, { type: 'tabs', name: 'Badge', diff --git a/e2e/popover.e2e-spec.ts b/e2e/popover.e2e-spec.ts index b4eecdc5c1..69e58750ff 100644 --- a/e2e/popover.e2e-spec.ts +++ b/e2e/popover.e2e-spec.ts @@ -191,4 +191,13 @@ describe('nb-popover', () => { done(); }) }); + + it('have to hide popover when host removed', done => { + element(contentTemplate).click(); + expect(element(popover).isPresent()).toBeTruthy(); + browser.get('#/').then(() => { + expect(element(popover).isPresent()).toBeFalsy(); + done(); + }) + }); }); diff --git a/src/framework/theme/components/progress-bar/_progress-bar.component.theme.scss b/src/framework/theme/components/progress-bar/_progress-bar.component.theme.scss new file mode 100644 index 0000000000..9097a145c4 --- /dev/null +++ b/src/framework/theme/components/progress-bar/_progress-bar.component.theme.scss @@ -0,0 +1,63 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@mixin nb-progress-bar-theme() { + + .progress-container { + height: nb-theme(progress-bar-height); + border-radius: nb-theme(progress-bar-radius); + background-color: nb-theme(progress-bar-bg); + &.xlg { + .progress-value { + font-size: nb-theme(progress-bar-font-size-xlg); + } + height: nb-theme(progress-bar-height-xlg); + } + &.lg { + .progress-value { + font-size: nb-theme(progress-bar-font-size-lg); + } + height: nb-theme(progress-bar-height-lg); + } + &.sm { + .progress-value { + font-size: nb-theme(progress-bar-font-size-sm); + } + height: nb-theme(progress-bar-height-sm); + } + &.xs { + .progress-value { + font-size: nb-theme(progress-bar-font-size-xs); + } + height: nb-theme(progress-bar-height-xs); + } + } + .progress-value { + background-color: nb-theme(progress-bar-default-bg); + color: nb-theme(progress-bar-font-color); + font-size: nb-theme(progress-bar-font-size); + font-weight: nb-theme(progress-bar-font-weight); + line-height: nb-theme(progress-bar-line-height); + transition-duration: nb-theme(progress-bar-animation-duration); + transition-property: width, background-color; + &.primary { + background-color: nb-theme(progress-bar-primary-bg); + } + &.info { + background-color: nb-theme(progress-bar-info-bg); + } + &.success { + background-color: nb-theme(progress-bar-success-bg); + } + &.warning { + background-color: nb-theme(progress-bar-warning-bg); + } + &.danger { + background-color: nb-theme(progress-bar-danger-bg); + } + } +} + diff --git a/src/framework/theme/components/progress-bar/progress-bar.component.scss b/src/framework/theme/components/progress-bar/progress-bar.component.scss new file mode 100644 index 0000000000..ea925deba8 --- /dev/null +++ b/src/framework/theme/components/progress-bar/progress-bar.component.scss @@ -0,0 +1,19 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +:host { + display: block; +} + +.progress-container { + overflow: hidden; +} + +.progress-value { + height: 100%; + text-align: center; + overflow: hidden; +} diff --git a/src/framework/theme/components/progress-bar/progress-bar.component.ts b/src/framework/theme/components/progress-bar/progress-bar.component.ts new file mode 100644 index 0000000000..42a96381a3 --- /dev/null +++ b/src/framework/theme/components/progress-bar/progress-bar.component.ts @@ -0,0 +1,95 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { Component, Input } from '@angular/core'; + +/** + * Progress Bar is a component for indicating progress. + * + * Simple usage: + * + * ```html + * + * ``` + * + * Progress bar accepts property `value` in range 0-100 + * @stacked-example(Progress bar, progress-bar/progress-bar-showcase.component) + * + * Progress bar background could be configured by providing a `status` property: + * @stacked-example(Progress bar status, progress-bar/progress-bar-status.component) + * + * Progress bar size (height and font-size) could be configured by providing a `size` property: + * @stacked-example(Progress bar size, progress-bar/progress-bar-size.component) + * + * `displayValue` property shows current value inside progress bar. It's also possible to add custom text inside: + * @stacked-example(Progress bar value, progress-bar/progress-bar-value.component) + * + * Progress bar supports `width` and `background-color` transition: + * @stacked-example(Progress bar interactive, progress-bar/progress-bar-interactive.component) + * + * @styles + * + * progress-bar-height-xlg: + * progress-bar-height-lg: + * progress-bar-height: + * progress-bar-height-sm: + * progress-bar-height-xs: + * progress-bar-font-size-xlg: + * progress-bar-font-size-lg: + * progress-bar-font-size: + * progress-bar-font-size-sm: + * progress-bar-font-size-xs: + * progress-bar-radius: + * progress-bar-bg-color: + * progress-bar-font-color: + * progress-bar-font-weight: + * progress-bar-default-bg-color: + * progress-bar-primary-bg-color: + * progress-bar-success-bg-color: + * progress-bar-info-bg-color: + * progress-bar-warning-bg-color: + * progress-bar-danger-bg-color: + */ +@Component({ + selector: 'nb-progress-bar', + styleUrls: ['./progress-bar.component.scss'], + template: ` +
+
+ {{ value }}% + +
+
+ `, +}) +export class NbProgressBarComponent { + + /** + * Progress bar value in percent (0 - 100) + * @type {number} + * @private + */ + @Input() value: number = 0; + + /** + * Progress bar background (primary, info success, warning, danger) + * @param {string} val + */ + @Input() status: string; + + /** + * Progress bar size (xs, sm, lg, xlg) + * @param {string} val + */ + @Input() size: string; + + /** + * Displays value inside progress bar + * @param {string} val + */ + @Input() displayValue: boolean = false; + +} diff --git a/src/framework/theme/components/progress-bar/progress-bar.module.ts b/src/framework/theme/components/progress-bar/progress-bar.module.ts new file mode 100644 index 0000000000..3d2ac8da09 --- /dev/null +++ b/src/framework/theme/components/progress-bar/progress-bar.module.ts @@ -0,0 +1,19 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { NgModule } from '@angular/core'; + +import { NbSharedModule } from '../shared/shared.module'; +import { NbProgressBarComponent } from './progress-bar.component'; + +@NgModule({ + imports: [ + NbSharedModule, + ], + declarations: [NbProgressBarComponent], + exports: [NbProgressBarComponent], +}) +export class NbProgressBarModule { } diff --git a/src/framework/theme/components/progress-bar/progress-bar.spec.ts b/src/framework/theme/components/progress-bar/progress-bar.spec.ts new file mode 100644 index 0000000000..4d5ee7b366 --- /dev/null +++ b/src/framework/theme/components/progress-bar/progress-bar.spec.ts @@ -0,0 +1,60 @@ +import { NbProgressBarComponent } from './progress-bar.component'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; + +describe('Component: NbProgressBar', () => { + + let progressBar: NbProgressBarComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [NbProgressBarComponent], + }); + + fixture = TestBed.createComponent(NbProgressBarComponent); + progressBar = fixture.componentInstance; + }); + + it('Setting value 50 should set width to 50%', () => { + progressBar.value = 50; + fixture.detectChanges(); + expect( + fixture + .debugElement + .query(By.css('.progress-value')).nativeElement.style.width) + .toBe('50%'); + }); + + it('Setting status danger should set class danger', () => { + progressBar.status = 'danger'; + fixture.detectChanges(); + expect( + fixture + .debugElement + .query(By.css('.progress-value')).nativeElement.classList.contains('danger')) + .toBeTruthy() + }); + + it('Setting size sm should set class sm', () => { + progressBar.size = 'sm'; + fixture.detectChanges(); + expect( + fixture + .debugElement + .query(By.css('.progress-container')).nativeElement.classList.contains('sm')) + .toBeTruthy() + }); + + it('Setting displayValue should create span with value label', () => { + progressBar.value = 40; + progressBar.displayValue = true; + fixture.detectChanges(); + expect( + fixture + .debugElement + .query(By.css('.progress-value span')).nativeElement.innerHTML) + .toContain('40%') + }); + +}); diff --git a/src/framework/theme/index.ts b/src/framework/theme/index.ts index ac21e22586..34d96b0a3f 100644 --- a/src/framework/theme/index.ts +++ b/src/framework/theme/index.ts @@ -31,3 +31,5 @@ export * from './components/popover/popover.directive'; export * from './components/popover/popover.module'; export * from './components/context-menu/context-menu.directive'; export * from './components/context-menu/context-menu.module'; +export * from './components/progress-bar/progress-bar.component'; +export * from './components/progress-bar/progress-bar.module'; diff --git a/src/framework/theme/styles/global/_components.scss b/src/framework/theme/styles/global/_components.scss index 7408e23a22..f7e98e0408 100644 --- a/src/framework/theme/styles/global/_components.scss +++ b/src/framework/theme/styles/global/_components.scss @@ -16,6 +16,7 @@ @import '../../components/actions/actions.component.theme'; @import '../../components/search/search.component.theme'; @import '../../components/checkbox/checkbox.component.theme'; +@import '../../components/progress-bar/progress-bar.component.theme'; @import '../../components/badge/badge.component.theme'; @import '../../components/popover/popover.component.theme'; @import '../../components/context-menu/context-menu.component.theme'; @@ -34,6 +35,7 @@ @include nb-actions-theme(); @include nb-search-theme(); @include nb-checkbox-theme(); + @include nb-progress-bar-theme(); @include nb-badge-theme(); @include nb-popover-theme(); @include nb-context-menu-theme(); diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 42a0809bcf..21a2696a0a 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -422,6 +422,29 @@ $theme: ( badge-info-bg-color: color-info, badge-warning-bg-color: color-warning, badge-danger-bg-color: color-danger, + + progress-bar-height-xlg: 1.75rem, + progress-bar-height-lg: 1.5rem, + progress-bar-height: 1.375rem, + progress-bar-height-sm: 1.25rem, + progress-bar-height-xs: 1rem, + progress-bar-animation-duration: 400ms, + progress-bar-font-size-xlg: font-size-xlg, + progress-bar-font-size-lg: font-size-lg, + progress-bar-font-size: font-size, + progress-bar-font-size-sm: font-size-sm, + progress-bar-font-size-xs: font-size-xs, + progress-bar-radius: radius, + progress-bar-bg: layout-bg, + progress-bar-font-color: color-white, + progress-bar-font-weight: font-weight-bold, + progress-bar-default-bg: color-info, + progress-bar-primary-bg: color-primary, + progress-bar-success-bg: color-success, + progress-bar-info-bg: color-info, + progress-bar-warning-bg: color-warning, + progress-bar-danger-bg: color-danger, + ); // register the theme diff --git a/src/playground/playground-routing.module.ts b/src/playground/playground-routing.module.ts index dbe6189e8e..22330dfaea 100644 --- a/src/playground/playground-routing.module.ts +++ b/src/playground/playground-routing.module.ts @@ -93,7 +93,11 @@ import { NbSidebarThreeTestComponent } from './sidebar/sidebar-three-test.compon import { NbTabsetTestComponent } from './tabset/tabset-test.component'; import { NbUserTestComponent } from './user/user-test.component'; import { NbBootstrapTestComponent } from './bootstrap/bootstrap-test.component'; - +import { NbProgressBarShowcaseComponent } from './progress-bar/progress-bar-showcase.component'; +import { NbProgressBarStatusComponent } from './progress-bar/progress-bar-status.component'; +import { NbProgressBarValueComponent } from './progress-bar/progress-bar-value.component'; +import { NbProgressBarSizeComponent } from './progress-bar/progress-bar-size.component'; +import { NbProgressBarInteractiveComponent } from './progress-bar/progress-bar-interactive.component'; export const routes: Routes = [ { @@ -337,6 +341,31 @@ export const routes: Routes = [ }, ], }, + { + path: 'progress-bar', + children: [ + { + path: 'progress-bar-showcase.component', + component: NbProgressBarShowcaseComponent, + }, + { + path: 'progress-bar-status.component', + component: NbProgressBarStatusComponent, + }, + { + path: 'progress-bar-size.component', + component: NbProgressBarSizeComponent, + }, + { + path: 'progress-bar-value.component', + component: NbProgressBarValueComponent, + }, + { + path: 'progress-bar-interactive.component', + component: NbProgressBarInteractiveComponent, + }, + ], + }, ], }, { diff --git a/src/playground/playground.module.ts b/src/playground/playground.module.ts index 550f9e5aa7..da374b9c68 100644 --- a/src/playground/playground.module.ts +++ b/src/playground/playground.module.ts @@ -22,6 +22,7 @@ import { NbBadgeModule, NbContextMenuModule, NbRouteTabsetModule, + NbProgressBarModule, } from '@nebular/theme'; import { NbPlaygroundRoutingModule } from './playground-routing.module'; @@ -114,6 +115,11 @@ import { NbUserTestComponent } from './user/user-test.component'; import { NbThemeDynamicTestComponent } from './layout/theme-dynamic-test.component'; import { NbBootstrapTestComponent } from './bootstrap/bootstrap-test.component'; import { NbPlaygroundSharedModule } from './shared/shared.module'; +import { NbProgressBarShowcaseComponent } from './progress-bar/progress-bar-showcase.component'; +import { NbProgressBarStatusComponent } from './progress-bar/progress-bar-status.component'; +import { NbProgressBarValueComponent } from './progress-bar/progress-bar-value.component'; +import { NbProgressBarSizeComponent } from './progress-bar/progress-bar-size.component'; +import { NbProgressBarInteractiveComponent } from './progress-bar/progress-bar-interactive.component'; export const NB_MODULES = [ NbCardModule, @@ -133,6 +139,7 @@ export const NB_MODULES = [ NbBadgeModule, NbContextMenuModule, NbPlaygroundSharedModule, + NbProgressBarModule, ]; export const NB_EXAMPLE_COMPONENTS = [ @@ -146,6 +153,11 @@ export const NB_EXAMPLE_COMPONENTS = [ NbCheckboxStatusComponent, NbCheckboxDisabledComponent, NbCheckboxTestComponent, + NbProgressBarShowcaseComponent, + NbProgressBarStatusComponent, + NbProgressBarValueComponent, + NbProgressBarSizeComponent, + NbProgressBarInteractiveComponent, NbLayoutShowcaseComponent, NbLayoutWFooterComponent, NbLayoutFixedHeaderComponent, diff --git a/src/playground/progress-bar/progress-bar-interactive.component.html b/src/playground/progress-bar/progress-bar-interactive.component.html new file mode 100644 index 0000000000..f8202f279b --- /dev/null +++ b/src/playground/progress-bar/progress-bar-interactive.component.html @@ -0,0 +1,13 @@ + + +
+ + + + + + + +
+ + diff --git a/src/playground/progress-bar/progress-bar-interactive.component.ts b/src/playground/progress-bar/progress-bar-interactive.component.ts new file mode 100644 index 0000000000..19cbc9f2e6 --- /dev/null +++ b/src/playground/progress-bar/progress-bar-interactive.component.ts @@ -0,0 +1,38 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nb-progress-bar-interactive', + templateUrl: './progress-bar-interactive.component.html', + styles: [` + .container { + display: flex; + align-items: center; + } + + nb-progress-bar { + flex: 1; + } + `], +}) + +export class NbProgressBarInteractiveComponent { + + value = 25; + + setValue(newValue) { + this.value = Math.min(Math.max(newValue, 0), 100) + } + + get status(){ + if (this.value <= 25) { + return 'danger'; + } else if (this.value <= 50) { + return 'warning'; + } else if (this.value <= 75) { + return 'info'; + } else { + return 'success'; + } + } + +} diff --git a/src/playground/progress-bar/progress-bar-showcase.component.html b/src/playground/progress-bar/progress-bar-showcase.component.html new file mode 100644 index 0000000000..d98982d963 --- /dev/null +++ b/src/playground/progress-bar/progress-bar-showcase.component.html @@ -0,0 +1,5 @@ + + + + + diff --git a/src/playground/progress-bar/progress-bar-showcase.component.ts b/src/playground/progress-bar/progress-bar-showcase.component.ts new file mode 100644 index 0000000000..f5e9da7192 --- /dev/null +++ b/src/playground/progress-bar/progress-bar-showcase.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nb-progress-bar-showcase', + templateUrl: './progress-bar-showcase.component.html', +}) + +export class NbProgressBarShowcaseComponent { +} diff --git a/src/playground/progress-bar/progress-bar-size.component.html b/src/playground/progress-bar/progress-bar-size.component.html new file mode 100644 index 0000000000..ad11097fe3 --- /dev/null +++ b/src/playground/progress-bar/progress-bar-size.component.html @@ -0,0 +1,9 @@ + + + xs + sm + none + lg + xlg + + diff --git a/src/playground/progress-bar/progress-bar-size.component.ts b/src/playground/progress-bar/progress-bar-size.component.ts new file mode 100644 index 0000000000..2b07c7add8 --- /dev/null +++ b/src/playground/progress-bar/progress-bar-size.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nb-progress-bar-size', + templateUrl: './progress-bar-size.component.html', + styles: [` + nb-progress-bar ~ nb-progress-bar { + margin-top: 1rem; + } + `], +}) + +export class NbProgressBarSizeComponent { +} diff --git a/src/playground/progress-bar/progress-bar-status.component.html b/src/playground/progress-bar/progress-bar-status.component.html new file mode 100644 index 0000000000..af9e36650c --- /dev/null +++ b/src/playground/progress-bar/progress-bar-status.component.html @@ -0,0 +1,9 @@ + + + primary + info + success + warning + danger + + diff --git a/src/playground/progress-bar/progress-bar-status.component.ts b/src/playground/progress-bar/progress-bar-status.component.ts new file mode 100644 index 0000000000..e70c742859 --- /dev/null +++ b/src/playground/progress-bar/progress-bar-status.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nb-progress-bar-status', + templateUrl: './progress-bar-status.component.html', + styles: [` + nb-progress-bar ~ nb-progress-bar { + margin-top: 1rem; + } + `], +}) + +export class NbProgressBarStatusComponent { +} diff --git a/src/playground/progress-bar/progress-bar-value.component.html b/src/playground/progress-bar/progress-bar-value.component.html new file mode 100644 index 0000000000..59da7ebb15 --- /dev/null +++ b/src/playground/progress-bar/progress-bar-value.component.html @@ -0,0 +1,6 @@ + + + + Custom value + + diff --git a/src/playground/progress-bar/progress-bar-value.component.ts b/src/playground/progress-bar/progress-bar-value.component.ts new file mode 100644 index 0000000000..cf696611e5 --- /dev/null +++ b/src/playground/progress-bar/progress-bar-value.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nb-progress-bar-value', + templateUrl: './progress-bar-value.component.html', + styles: [` + nb-progress-bar ~ nb-progress-bar { + margin-top: 1rem; + } + `], +}) + +export class NbProgressBarValueComponent { +}