Skip to content

Commit f4cdf4a

Browse files
nnixaannixaa
authored
feat(popover): add popover showcase (#1556)
1 parent ddb6306 commit f4cdf4a

File tree

8 files changed

+269
-0
lines changed

8 files changed

+269
-0
lines changed

‎src/app/@theme/theme.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
NbThemeModule,
1616
NbUserModule,
1717
NbCheckboxModule,
18+
NbPopoverModule,
1819
NbContextMenuModule,
1920
} from '@nebular/theme';
2021

@@ -49,6 +50,7 @@ const NB_MODULES = [
4950
NbSearchModule,
5051
NbSidebarModule,
5152
NbCheckboxModule,
53+
NbPopoverModule,
5254
NbContextMenuModule,
5355
NgbModule,
5456
];

‎src/app/pages/pages-menu.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ export const MENU_ITEMS: NbMenuItem[] = [
3232
title: 'Modals',
3333
link: '/pages/ui-features/modals',
3434
},
35+
{
36+
title: 'Popovers',
37+
link: '/pages/ui-features/popovers',
38+
},
3539
{
3640
title: 'Typography',
3741
link: '/pages/ui-features/typography',

‎src/app/pages/ui-features/popovers/popover-examples.component.ts‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'ngx-popover-tabs',
5+
template: `
6+
<nb-tabset>
7+
<nb-tab tabTitle="What's up?">
8+
<div class="p-4">
9+
Such a wonderful day!
10+
</div>
11+
</nb-tab>
12+
<nb-tab tabTitle="Second Tab">
13+
<div class="p-4">
14+
Indeed!
15+
</div>
16+
</nb-tab>
17+
</nb-tabset>
18+
`,
19+
})
20+
export class NgxPopoverTabsComponent {
21+
}
22+
23+
@Component({
24+
selector: 'ngx-popover-form',
25+
template: `
26+
<div class="p-4">
27+
<form>
28+
<div class="form-group">
29+
<input type="text" class="form-control" placeholder="Recipients">
30+
</div>
31+
<div class="form-group">
32+
<input type="text" class="form-control" placeholder="Subject">
33+
</div>
34+
<div class="form-group">
35+
<textarea class="form-control" placeholder="Message"></textarea>
36+
</div>
37+
<button type="submit" class="btn btn-primary w-100">Send</button>
38+
</form>
39+
</div>
40+
`,
41+
})
42+
export class NgxPopoverFormComponent {
43+
}
44+
45+
@Component({
46+
selector: 'ngx-popover-card',
47+
template: `
48+
<nb-card class="popover-card">
49+
<nb-card-header status="warning">
50+
Hello!
51+
</nb-card-header>
52+
<nb-card-body>
53+
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
54+
there live the blind texts.
55+
Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
56+
</nb-card-body>
57+
</nb-card>
58+
`,
59+
})
60+
export class NgxPopoverCardComponent {
61+
}

‎src/app/pages/ui-features/popovers/popovers.component.html‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<div class="row">
2+
<div class="col-lg-6">
3+
<nb-card size="small">
4+
<nb-card-header>Popover Position</nb-card-header>
5+
<nb-card-body>
6+
<p>When popover has not enough space based on the configured placement, it will adjust accordingly trying to fit the screen.</p>
7+
<button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="left">Left</button>
8+
<button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="top">Top</button>
9+
<button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="bottom">Bottom</button>
10+
<button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="right">Right</button>
11+
</nb-card-body>
12+
</nb-card>
13+
</div>
14+
15+
<div class="col-lg-6">
16+
<nb-card size="small">
17+
<nb-card-header>Simple Popovers</nb-card-header>
18+
<nb-card-body>
19+
<p>In a simples form popover can take a string of text to render.</p>
20+
<button class="btn btn-success with-margins" nbPopover="Hello, how are you today?">on click</button>
21+
<button class="btn btn-success with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hover">on hover</button>
22+
<button class="btn btn-success with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint">on hint</button>
23+
</nb-card-body>
24+
</nb-card>
25+
</div>
26+
</div>
27+
28+
<div class="row">
29+
<div class="col-lg-6">
30+
31+
<ng-template #tabs>
32+
<nb-tabset>
33+
<nb-tab tabTitle="What's up?">
34+
<div class="p-4">
35+
Such a wonderful day!
36+
</div>
37+
</nb-tab>
38+
<nb-tab tabTitle="Second Tab">
39+
<div class="p-4">
40+
Indeed!
41+
</div>
42+
</nb-tab>
43+
</nb-tabset>
44+
</ng-template>
45+
46+
<ng-template #form>
47+
<div class="p-4">
48+
<form>
49+
<div class="form-group">
50+
<input type="text" class="form-control" placeholder="Recipients">
51+
</div>
52+
<div class="form-group">
53+
<input type="text" class="form-control" placeholder="Subject">
54+
</div>
55+
<div class="form-group">
56+
<textarea class="form-control" placeholder="Message"></textarea>
57+
</div>
58+
<button type="submit" class="btn btn-primary w-100">Send</button>
59+
</form>
60+
</div>
61+
</ng-template>
62+
63+
<ng-template #card>
64+
<nb-card class="popover-card">
65+
<nb-card-header status="warning">
66+
Hello!
67+
</nb-card-header>
68+
<nb-card-body>
69+
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
70+
Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
71+
</nb-card-body>
72+
</nb-card>
73+
</ng-template>
74+
75+
<nb-card size="small">
76+
<nb-card-header>Template Popovers</nb-card-header>
77+
<nb-card-body>
78+
<p>You can pass a refference to `ng-template` to be rendered.</p>
79+
<button class="btn btn-warning with-margins" [nbPopover]="tabs">With tabs</button>
80+
<button class="btn btn-warning with-margins" [nbPopover]="form">With form</button>
81+
<button class="btn btn-warning with-margins" [nbPopover]="card">With card</button>
82+
</nb-card-body>
83+
</nb-card>
84+
</div>
85+
86+
<div class="col-lg-6">
87+
<nb-card size="small">
88+
<nb-card-header>Component Popovers</nb-card-header>
89+
<nb-card-body>
90+
<p>Same way popover can render any angular compnoent.</p>
91+
<button class="btn btn-warning with-margins" [nbPopover]="tabsComponent">With tabs</button>
92+
<button class="btn btn-warning with-margins" [nbPopover]="formComponent">With form</button>
93+
<button class="btn btn-warning with-margins" [nbPopover]="cardComponent">With card</button>
94+
</nb-card-body>
95+
</nb-card>
96+
</div>
97+
</div>
98+
99+
<div class="row">
100+
<div class="col-md-12">
101+
<nb-card>
102+
<nb-card-header>Event Debouncing</nb-card-header>
103+
<nb-card-body>
104+
<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>
105+
106+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
107+
show hint
108+
</button>
109+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
110+
show hint
111+
</button>
112+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
113+
show hint
114+
</button>
115+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
116+
show hint
117+
</button>
118+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
119+
show hint
120+
</button>
121+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
122+
show hint
123+
</button>
124+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
125+
show hint
126+
</button>
127+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
128+
show hint
129+
</button>
130+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
131+
show hint
132+
</button>
133+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
134+
show hint
135+
</button>
136+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
137+
show hint
138+
</button>
139+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
140+
show hint
141+
</button>
142+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
143+
show hint
144+
</button>
145+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
146+
show hint
147+
</button>
148+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
149+
show hint
150+
</button>
151+
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
152+
show hint
153+
</button>
154+
</nb-card-body>
155+
</nb-card>
156+
</div>
157+
</div>

‎src/app/pages/ui-features/popovers/popovers.component.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
button.with-margins {
2+
margin: 0 0.75rem 2rem 0;
3+
}
4+
5+
/deep/ nb-card.popover-card {
6+
margin-bottom: 0;
7+
width: 300px;
8+
box-shadow: none;
9+
}
10+
11+
:host /deep/ .btn-outline-secondary {
12+
margin: 0 0.5rem 0.5rem 0;
13+
}

‎src/app/pages/ui-features/popovers/popovers.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component } from '@angular/core';
2+
import {
3+
NgxPopoverCardComponent, NgxPopoverFormComponent,
4+
NgxPopoverTabsComponent,
5+
} from './popover-examples.component';
6+
7+
@Component({
8+
selector: 'ngx-popovers',
9+
styleUrls: ['./popovers.component.scss'],
10+
templateUrl: './popovers.component.html',
11+
})
12+
export class PopoversComponent {
13+
tabsComponent = NgxPopoverTabsComponent;
14+
cardComponent = NgxPopoverCardComponent;
15+
formComponent = NgxPopoverFormComponent;
16+
}

‎src/app/pages/ui-features/ui-features-routing.module.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { ModalsComponent } from './modals/modals.component';
99
import { TypographyComponent } from './typography/typography.component';
1010
import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
1111
import { SearchComponent } from './search-fields/search-fields.component';
12+
import { PopoversComponent } from './popovers/popovers.component';
1213

1314
const routes: Routes = [{
1415
path: '',
@@ -25,6 +26,9 @@ const routes: Routes = [{
2526
}, {
2627
path: 'modals',
2728
component: ModalsComponent,
29+
}, {
30+
path: 'popovers',
31+
component: PopoversComponent,
2832
}, {
2933
path: 'typography',
3034
component: TypographyComponent,

‎src/app/pages/ui-features/ui-features.module.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ import { ModalComponent } from './modals/modal/modal.component';
1111
import { TypographyComponent } from './typography/typography.component';
1212
import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
1313
import { SearchComponent } from './search-fields/search-fields.component';
14+
import { PopoversComponent } from './popovers/popovers.component';
15+
import {
16+
NgxPopoverCardComponent, NgxPopoverFormComponent,
17+
NgxPopoverTabsComponent,
18+
} from './popovers/popover-examples.component';
1419

1520
const components = [
1621
UiFeaturesComponent,
@@ -23,6 +28,10 @@ const components = [
2328
Tab1Component,
2429
Tab2Component,
2530
SearchComponent,
31+
PopoversComponent,
32+
NgxPopoverCardComponent,
33+
NgxPopoverFormComponent,
34+
NgxPopoverTabsComponent,
2635
];
2736

2837
@NgModule({
@@ -36,6 +45,9 @@ const components = [
3645
],
3746
entryComponents: [
3847
ModalComponent,
48+
NgxPopoverCardComponent,
49+
NgxPopoverFormComponent,
50+
NgxPopoverTabsComponent,
3951
],
4052
})
4153
export class UiFeaturesModule { }

0 commit comments

Comments
 (0)
⚡