mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
feat(popover): add popover showcase (#1556)
This commit is contained in:
Dmitry Nehaychik
GitHub
parent
ddb63062f5
commit
f4cdf4ab22
8 changed files with 269 additions and 0 deletions
|
|
@ -15,6 +15,7 @@ import {
|
||||||
NbThemeModule,
|
NbThemeModule,
|
||||||
NbUserModule,
|
NbUserModule,
|
||||||
NbCheckboxModule,
|
NbCheckboxModule,
|
||||||
|
NbPopoverModule,
|
||||||
NbContextMenuModule,
|
NbContextMenuModule,
|
||||||
} from '@nebular/theme';
|
} from '@nebular/theme';
|
||||||
|
|
||||||
|
|
@ -49,6 +50,7 @@ const NB_MODULES = [
|
||||||
NbSearchModule,
|
NbSearchModule,
|
||||||
NbSidebarModule,
|
NbSidebarModule,
|
||||||
NbCheckboxModule,
|
NbCheckboxModule,
|
||||||
|
NbPopoverModule,
|
||||||
NbContextMenuModule,
|
NbContextMenuModule,
|
||||||
NgbModule,
|
NgbModule,
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -32,6 +32,10 @@ export const MENU_ITEMS: NbMenuItem[] = [
|
||||||
title: 'Modals',
|
title: 'Modals',
|
||||||
link: '/pages/ui-features/modals',
|
link: '/pages/ui-features/modals',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'Popovers',
|
||||||
|
link: '/pages/ui-features/popovers',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: 'Typography',
|
title: 'Typography',
|
||||||
link: '/pages/ui-features/typography',
|
link: '/pages/ui-features/typography',
|
||||||
|
|
|
||||||
|
|
@ -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
src/app/pages/ui-features/popovers/popovers.component.html
Normal file
157
src/app/pages/ui-features/popovers/popovers.component.html
Normal file
|
|
@ -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
src/app/pages/ui-features/popovers/popovers.component.scss
Normal file
13
src/app/pages/ui-features/popovers/popovers.component.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
16
src/app/pages/ui-features/popovers/popovers.component.ts
Normal file
16
src/app/pages/ui-features/popovers/popovers.component.ts
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -9,6 +9,7 @@ import { ModalsComponent } from './modals/modals.component';
|
||||||
import { TypographyComponent } from './typography/typography.component';
|
import { TypographyComponent } from './typography/typography.component';
|
||||||
import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
|
import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
|
||||||
import { SearchComponent } from './search-fields/search-fields.component';
|
import { SearchComponent } from './search-fields/search-fields.component';
|
||||||
|
import { PopoversComponent } from './popovers/popovers.component';
|
||||||
|
|
||||||
const routes: Routes = [{
|
const routes: Routes = [{
|
||||||
path: '',
|
path: '',
|
||||||
|
|
@ -25,6 +26,9 @@ const routes: Routes = [{
|
||||||
}, {
|
}, {
|
||||||
path: 'modals',
|
path: 'modals',
|
||||||
component: ModalsComponent,
|
component: ModalsComponent,
|
||||||
|
}, {
|
||||||
|
path: 'popovers',
|
||||||
|
component: PopoversComponent,
|
||||||
}, {
|
}, {
|
||||||
path: 'typography',
|
path: 'typography',
|
||||||
component: TypographyComponent,
|
component: TypographyComponent,
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,11 @@ import { ModalComponent } from './modals/modal/modal.component';
|
||||||
import { TypographyComponent } from './typography/typography.component';
|
import { TypographyComponent } from './typography/typography.component';
|
||||||
import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
|
import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
|
||||||
import { SearchComponent } from './search-fields/search-fields.component';
|
import { SearchComponent } from './search-fields/search-fields.component';
|
||||||
|
import { PopoversComponent } from './popovers/popovers.component';
|
||||||
|
import {
|
||||||
|
NgxPopoverCardComponent, NgxPopoverFormComponent,
|
||||||
|
NgxPopoverTabsComponent,
|
||||||
|
} from './popovers/popover-examples.component';
|
||||||
|
|
||||||
const components = [
|
const components = [
|
||||||
UiFeaturesComponent,
|
UiFeaturesComponent,
|
||||||
|
|
@ -23,6 +28,10 @@ const components = [
|
||||||
Tab1Component,
|
Tab1Component,
|
||||||
Tab2Component,
|
Tab2Component,
|
||||||
SearchComponent,
|
SearchComponent,
|
||||||
|
PopoversComponent,
|
||||||
|
NgxPopoverCardComponent,
|
||||||
|
NgxPopoverFormComponent,
|
||||||
|
NgxPopoverTabsComponent,
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
@ -36,6 +45,9 @@ const components = [
|
||||||
],
|
],
|
||||||
entryComponents: [
|
entryComponents: [
|
||||||
ModalComponent,
|
ModalComponent,
|
||||||
|
NgxPopoverCardComponent,
|
||||||
|
NgxPopoverFormComponent,
|
||||||
|
NgxPopoverTabsComponent,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class UiFeaturesModule { }
|
export class UiFeaturesModule { }
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue