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,
|
||||
NbUserModule,
|
||||
NbCheckboxModule,
|
||||
NbPopoverModule,
|
||||
NbContextMenuModule,
|
||||
} from '@nebular/theme';
|
||||
|
||||
|
|
@ -49,6 +50,7 @@ const NB_MODULES = [
|
|||
NbSearchModule,
|
||||
NbSidebarModule,
|
||||
NbCheckboxModule,
|
||||
NbPopoverModule,
|
||||
NbContextMenuModule,
|
||||
NgbModule,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -32,6 +32,10 @@ export const MENU_ITEMS: NbMenuItem[] = [
|
|||
title: 'Modals',
|
||||
link: '/pages/ui-features/modals',
|
||||
},
|
||||
{
|
||||
title: 'Popovers',
|
||||
link: '/pages/ui-features/popovers',
|
||||
},
|
||||
{
|
||||
title: '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 { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
|
||||
import { SearchComponent } from './search-fields/search-fields.component';
|
||||
import { PopoversComponent } from './popovers/popovers.component';
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
|
|
@ -25,6 +26,9 @@ const routes: Routes = [{
|
|||
}, {
|
||||
path: 'modals',
|
||||
component: ModalsComponent,
|
||||
}, {
|
||||
path: 'popovers',
|
||||
component: PopoversComponent,
|
||||
}, {
|
||||
path: 'typography',
|
||||
component: TypographyComponent,
|
||||
|
|
|
|||
|
|
@ -11,6 +11,11 @@ import { ModalComponent } from './modals/modal/modal.component';
|
|||
import { TypographyComponent } from './typography/typography.component';
|
||||
import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.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 = [
|
||||
UiFeaturesComponent,
|
||||
|
|
@ -23,6 +28,10 @@ const components = [
|
|||
Tab1Component,
|
||||
Tab2Component,
|
||||
SearchComponent,
|
||||
PopoversComponent,
|
||||
NgxPopoverCardComponent,
|
||||
NgxPopoverFormComponent,
|
||||
NgxPopoverTabsComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -36,6 +45,9 @@ const components = [
|
|||
],
|
||||
entryComponents: [
|
||||
ModalComponent,
|
||||
NgxPopoverCardComponent,
|
||||
NgxPopoverFormComponent,
|
||||
NgxPopoverTabsComponent,
|
||||
],
|
||||
})
|
||||
export class UiFeaturesModule { }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue