-
Notifications
You must be signed in to change notification settings - Fork 7.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(popover): add popover showcase (#1556)
- Loading branch information
Showing
8 changed files
with
269 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
src/app/pages/ui-features/popovers/popover-examples.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'ngx-popover-tabs', | ||
template: ` | ||
<nb-tabset> | ||
<nb-tab tabTitle="What's up?"> | ||
<div class="p-4"> | ||
Such a wonderful day! | ||
</div> | ||
</nb-tab> | ||
<nb-tab tabTitle="Second Tab"> | ||
<div class="p-4"> | ||
Indeed! | ||
</div> | ||
</nb-tab> | ||
</nb-tabset> | ||
`, | ||
}) | ||
export class NgxPopoverTabsComponent { | ||
} | ||
|
||
@Component({ | ||
selector: 'ngx-popover-form', | ||
template: ` | ||
<div class="p-4"> | ||
<form> | ||
<div class="form-group"> | ||
<input type="text" class="form-control" placeholder="Recipients"> | ||
</div> | ||
<div class="form-group"> | ||
<input type="text" class="form-control" placeholder="Subject"> | ||
</div> | ||
<div class="form-group"> | ||
<textarea class="form-control" placeholder="Message"></textarea> | ||
</div> | ||
<button type="submit" class="btn btn-primary w-100">Send</button> | ||
</form> | ||
</div> | ||
`, | ||
}) | ||
export class NgxPopoverFormComponent { | ||
} | ||
|
||
@Component({ | ||
selector: 'ngx-popover-card', | ||
template: ` | ||
<nb-card class="popover-card"> | ||
<nb-card-header status="warning"> | ||
Hello! | ||
</nb-card-header> | ||
<nb-card-body> | ||
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, | ||
there live the blind texts. | ||
Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. | ||
</nb-card-body> | ||
</nb-card> | ||
`, | ||
}) | ||
export class NgxPopoverCardComponent { | ||
} |
157 changes: 157 additions & 0 deletions
157
src/app/pages/ui-features/popovers/popovers.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,157 @@ | ||
<div class="row"> | ||
<div class="col-lg-6"> | ||
<nb-card size="small"> | ||
<nb-card-header>Popover Position</nb-card-header> | ||
<nb-card-body> | ||
<p>When popover has not enough space based on the configured placement, it will adjust accordingly trying to fit the screen.</p> | ||
<button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="left">Left</button> | ||
<button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="top">Top</button> | ||
<button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="bottom">Bottom</button> | ||
<button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="right">Right</button> | ||
</nb-card-body> | ||
</nb-card> | ||
</div> | ||
|
||
<div class="col-lg-6"> | ||
<nb-card size="small"> | ||
<nb-card-header>Simple Popovers</nb-card-header> | ||
<nb-card-body> | ||
<p>In a simples form popover can take a string of text to render.</p> | ||
<button class="btn btn-success with-margins" nbPopover="Hello, how are you today?">on click</button> | ||
<button class="btn btn-success with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hover">on hover</button> | ||
<button class="btn btn-success with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint">on hint</button> | ||
</nb-card-body> | ||
</nb-card> | ||
</div> | ||
</div> | ||
|
||
<div class="row"> | ||
<div class="col-lg-6"> | ||
|
||
<ng-template #tabs> | ||
<nb-tabset> | ||
<nb-tab tabTitle="What's up?"> | ||
<div class="p-4"> | ||
Such a wonderful day! | ||
</div> | ||
</nb-tab> | ||
<nb-tab tabTitle="Second Tab"> | ||
<div class="p-4"> | ||
Indeed! | ||
</div> | ||
</nb-tab> | ||
</nb-tabset> | ||
</ng-template> | ||
|
||
<ng-template #form> | ||
<div class="p-4"> | ||
<form> | ||
<div class="form-group"> | ||
<input type="text" class="form-control" placeholder="Recipients"> | ||
</div> | ||
<div class="form-group"> | ||
<input type="text" class="form-control" placeholder="Subject"> | ||
</div> | ||
<div class="form-group"> | ||
<textarea class="form-control" placeholder="Message"></textarea> | ||
</div> | ||
<button type="submit" class="btn btn-primary w-100">Send</button> | ||
</form> | ||
</div> | ||
</ng-template> | ||
|
||
<ng-template #card> | ||
<nb-card class="popover-card"> | ||
<nb-card-header status="warning"> | ||
Hello! | ||
</nb-card-header> | ||
<nb-card-body> | ||
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. | ||
Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. | ||
</nb-card-body> | ||
</nb-card> | ||
</ng-template> | ||
|
||
<nb-card size="small"> | ||
<nb-card-header>Template Popovers</nb-card-header> | ||
<nb-card-body> | ||
<p>You can pass a refference to `ng-template` to be rendered.</p> | ||
<button class="btn btn-warning with-margins" [nbPopover]="tabs">With tabs</button> | ||
<button class="btn btn-warning with-margins" [nbPopover]="form">With form</button> | ||
<button class="btn btn-warning with-margins" [nbPopover]="card">With card</button> | ||
</nb-card-body> | ||
</nb-card> | ||
</div> | ||
|
||
<div class="col-lg-6"> | ||
<nb-card size="small"> | ||
<nb-card-header>Component Popovers</nb-card-header> | ||
<nb-card-body> | ||
<p>Same way popover can render any angular compnoent.</p> | ||
<button class="btn btn-warning with-margins" [nbPopover]="tabsComponent">With tabs</button> | ||
<button class="btn btn-warning with-margins" [nbPopover]="formComponent">With form</button> | ||
<button class="btn btn-warning with-margins" [nbPopover]="cardComponent">With card</button> | ||
</nb-card-body> | ||
</nb-card> | ||
</div> | ||
</div> | ||
|
||
<div class="row"> | ||
<div class="col-md-12"> | ||
<nb-card> | ||
<nb-card-header>Event Debouncing</nb-card-header> | ||
<nb-card-body> | ||
<p>Quickly move mouse cursor over the buttons, only the last popover will be created. It allows us to avoid excess white improving page performance.</p> | ||
|
||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> | ||
show hint | ||
</button> | ||
</nb-card-body> | ||
</nb-card> | ||
</div> | ||
</div> |
13 changes: 13 additions & 0 deletions
13
src/app/pages/ui-features/popovers/popovers.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
button.with-margins { | ||
margin: 0 0.75rem 2rem 0; | ||
} | ||
|
||
/deep/ nb-card.popover-card { | ||
margin-bottom: 0; | ||
width: 300px; | ||
box-shadow: none; | ||
} | ||
|
||
:host /deep/ .btn-outline-secondary { | ||
margin: 0 0.5rem 0.5rem 0; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { Component } from '@angular/core'; | ||
import { | ||
NgxPopoverCardComponent, NgxPopoverFormComponent, | ||
NgxPopoverTabsComponent, | ||
} from './popover-examples.component'; | ||
|
||
@Component({ | ||
selector: 'ngx-popovers', | ||
styleUrls: ['./popovers.component.scss'], | ||
templateUrl: './popovers.component.html', | ||
}) | ||
export class PopoversComponent { | ||
tabsComponent = NgxPopoverTabsComponent; | ||
cardComponent = NgxPopoverCardComponent; | ||
formComponent = NgxPopoverFormComponent; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters