first commit
This commit is contained in:
6
src/app/content/ngbbootstrap/alerts/alerts.component.css
Normal file
6
src/app/content/ngbbootstrap/alerts/alerts.component.css
Normal file
@@ -0,0 +1,6 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
:host ::ng-deep .btn-close {
|
||||
font-size: 5px !important;
|
||||
}
|
||||
818
src/app/content/ngbbootstrap/alerts/alerts.component.html
Normal file
818
src/app/content/ngbbootstrap/alerts/alerts.component.html
Normal file
@@ -0,0 +1,818 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<!-- Basic Alerts start -->
|
||||
<section id="basic-alerts">
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12" *blockUI="'basicAlerts'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadBasicAlerts($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Basic Alerts
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>Alert is a component to provide contextual feedback messages for user.
|
||||
Bootstrap provides styles for the following types : <code>'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'</code>
|
||||
</p>
|
||||
<h6>Primary Alert</h6>
|
||||
|
||||
<ngb-alert [dismissible]="false" [type]="'primary'" role="alert" class="mb-2">
|
||||
<strong>Good Morning!</strong> Start your day with some alerts.
|
||||
</ngb-alert>
|
||||
<h6>Secondary Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'secondary'" role="alert" class="mb-2">
|
||||
<strong>Hello!</strong> This is secondary alert - check it out.
|
||||
</ngb-alert>
|
||||
<h6>Success Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'success'" role="alert" class="mb-2">
|
||||
<strong>Well done!</strong> You successfully read this important alert message.
|
||||
</ngb-alert>
|
||||
<h6>Danger Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'danger'" role="alert" class="mb-2">
|
||||
<strong>Oh snap!</strong> Change a few things up and submit again.
|
||||
</ngb-alert>
|
||||
<h6>Warning Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'warning'" role="alert" class="mb-2">
|
||||
<strong>Warning!</strong> Better check yourself, you're not looking too good.
|
||||
</ngb-alert>
|
||||
<h6>Info Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'info'" role="alert" class="mb-2">
|
||||
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||||
</ngb-alert>
|
||||
<h6>Light Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'light'" role="alert" class="mb-2">
|
||||
<strong>Hello!</strong> This is light alert - check it out.
|
||||
</ngb-alert>
|
||||
<h6>Dark Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'dark'" role="alert" class="mb-2">
|
||||
<strong>Hello!</strong> This is dark alert - check it out.
|
||||
</ngb-alert>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12" *blockUI="'dismissibleAlerts'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadDismissible($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Dismissible Alerts
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>To add dismiss button use input <code>[dismissible]="true"</code> which adds <code>close (X)</code> button to the right.</p>
|
||||
<h6>Primary Alert</h6>
|
||||
<ngb-alert *ngIf="!isPrimaryClosed2" [dismissible]="true" [type]="'primary'"
|
||||
(close)="isPrimaryClosed2=true" role="alert" class="mb-2">
|
||||
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a> with some alerts.
|
||||
</ngb-alert>
|
||||
<h6>Secondary Alert</h6>
|
||||
<ngb-alert *ngIf="!isSecondaryClosed2" [dismissible]="true" [type]="'secondary'"
|
||||
(close)="isSecondaryClosed2=true" role="alert" class="mb-2">
|
||||
<strong>Hello!</strong> This is <a [routerLink]="" class="alert-link">secondary alert</a> - check it out.
|
||||
</ngb-alert>
|
||||
<h6>Success Alert</h6>
|
||||
<ngb-alert *ngIf="!isSuccessClosed2" [dismissible]="true" [type]="'success'"
|
||||
(close)="isSuccessClosed2=true" role="alert" class="mb-2">
|
||||
<strong>Well done!</strong> You successfully read this <a [routerLink]="" class="alert-link">important</a>
|
||||
alert message.
|
||||
</ngb-alert>
|
||||
<h6>Danger Alert</h6>
|
||||
<ngb-alert *ngIf="!isDangerClosed2" [dismissible]="true" [type]="'danger'"
|
||||
(close)="isDangerClosed2=true" role="alert" class="mb-2">
|
||||
<strong>Oh snap!</strong> Change a <a [routerLink]="" class="alert-link">few things up</a> and submit
|
||||
again.
|
||||
</ngb-alert>
|
||||
<h6>Warning Alert</h6>
|
||||
<ngb-alert *ngIf="!isWarningClosed2" [dismissible]="true" [type]="'warning'"
|
||||
(close)="isWarningClosed2=true" role="alert" class="mb-2">
|
||||
<strong>Warning!</strong> Better check yourself, you're not <a [routerLink]="" class="alert-link">looking
|
||||
too good</a>.
|
||||
</ngb-alert>
|
||||
<h6>Info Alert</h6>
|
||||
<ngb-alert *ngIf="!isInfoClosed2" [dismissible]="true" [type]="'info'"
|
||||
(close)="isInfoClosed2=true" role="alert" class="mb-2">
|
||||
<strong>Heads up!</strong> This alert needs <a [routerLink]="" class="alert-link">your attention</a>, but
|
||||
it's not super important.
|
||||
</ngb-alert>
|
||||
<h6>Light Alert</h6>
|
||||
<ngb-alert *ngIf="!isLightClosed2" [dismissible]="true" [type]="'light'" class="mb-2"
|
||||
(close)="isLightClosed2=true" role="alert">
|
||||
<strong>Hello!</strong> This is <a [routerLink]="" class="alert-link">light alert</a> - check it out.
|
||||
</ngb-alert>
|
||||
<h6>Dark Alert</h6>
|
||||
<ngb-alert *ngIf="!isDarkClosed2" [dismissible]="true" [type]="'dark'" class="mb-2"
|
||||
(close)="isDarkClosed2=true" role="alert">
|
||||
<strong>Hello!</strong> This is <a [routerLink]="" class="alert-link">dark alert</a> - check it out.
|
||||
</ngb-alert>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Basic Alerts end -->
|
||||
|
||||
<!-- Alerts with No Border start -->
|
||||
<section id="alert-border-0" class="mb-2">
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Alerts with Links</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p> Add <code>.alert-link</code> class to add links to alerts. And use input <code>[routerLink]=""</code> to add url link.</p>
|
||||
<h6>Primary Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'primary'" class="mb-2" role="alert">
|
||||
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a> with some alerts.
|
||||
</ngb-alert>
|
||||
<h6>Secondary Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'secondary'" class="mb-2" role="alert">
|
||||
<strong>Hello!</strong> This is <a [routerLink]="" class="alert-link">secondary alert</a> - check it out.
|
||||
</ngb-alert>
|
||||
<h6>Success Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'success'" class="mb-2" role="alert">
|
||||
<strong>Well done!</strong> You successfully read this <a [routerLink]="" class="alert-link">important</a>
|
||||
alert message.
|
||||
</ngb-alert>
|
||||
<h6>Danger Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'danger'" class="mb-2" role="alert">
|
||||
<strong>Oh snap!</strong> Change a <a [routerLink]="" class="alert-link">few things up</a> and submit again.
|
||||
</ngb-alert>
|
||||
<h6>Warning Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'warning'" class="mb-2" role="alert">
|
||||
<strong>Warning!</strong> Better check yourself, you're not <a [routerLink]="" class="alert-link">looking too
|
||||
good</a>.
|
||||
</ngb-alert>
|
||||
<h6>Info Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'info'" class="mb-2" role="alert">
|
||||
<strong>Heads up!</strong> This alert needs <a [routerLink]="" class="alert-link">your attention</a>, but
|
||||
it's not super important.
|
||||
</ngb-alert>
|
||||
<h6>Light Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'light'" class="mb-2" role="alert">
|
||||
<strong>Hello!</strong> This is <a [routerLink]="" class="alert-link">light alert</a> - check it out.
|
||||
</ngb-alert>
|
||||
<h6>Dark Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'dark'" class="mb-2" role="alert">
|
||||
<strong>Hello!</strong> This is <a [routerLink]="" class="alert-link">dark alert</a> - check it out.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Alerts with No Border</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p> Add <code>.border-0</code> class along with <code>.alert</code> class for alerts with no borders.
|
||||
</p>
|
||||
<h6>Primary Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'primary'" class="border-0 mb-2" role="alert">
|
||||
<strong>Good Morning!</strong> Start your day with some alerts.
|
||||
</ngb-alert>
|
||||
<h6>Secondary Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'secondary'" class="border-0 mb-2" role="alert">
|
||||
<strong>Hello!</strong> This is secondary alert - check it out.
|
||||
</ngb-alert>
|
||||
<h6>Success Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'success'" class="border-0 mb-2" role="alert">
|
||||
<strong>Well done!</strong> You successfully read this important alert message.
|
||||
</ngb-alert>
|
||||
<h6>Danger Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'danger'" class="border-0 mb-2" role="alert">
|
||||
<strong>Oh snap!</strong> Change a few things up and submit again.
|
||||
</ngb-alert>
|
||||
<h6>Warning Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'warning'" class="border-0 mb-2" role="alert">
|
||||
<strong>Warning!</strong> Better check yourself, you're not looking too good.
|
||||
</ngb-alert>
|
||||
<h6>Info Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'info'" class="border-0 mb-2" role="alert">
|
||||
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||||
</ngb-alert>
|
||||
<h6>Light Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'light'" class="border-0 mb-2" role="alert">
|
||||
<strong>Hello!</strong> This is light alert - check it out.
|
||||
</ngb-alert>
|
||||
<h6>Dark Alert</h6>
|
||||
<ngb-alert [dismissible]="false" [type]="'dark'" class="border-0 mb-2" role="alert">
|
||||
<strong>Hello!</strong> This is dark alert - check it out.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Alerts with No Border end -->
|
||||
|
||||
<!-- Alerts with icons start -->
|
||||
<section id="alerts-with-icons" class="mb-2">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Alerts with icons</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>To add left/right icons to the alert, use class <code>.alert-icon-left</code> or
|
||||
<code>alert-icon-right</code>
|
||||
with icon class <code>.alert-icon</code>.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Primary Alert</h6>
|
||||
<ngb-alert *ngIf="!isPrimaryClosed5" class="alert-icon-left mb-2" [dismissible]="true" [type]="'primary'"
|
||||
(close)="isPrimaryClosed5=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-heart"></i></span>
|
||||
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a> with some
|
||||
alerts.
|
||||
</ngb-alert>
|
||||
<h6>Success Alert</h6>
|
||||
<ngb-alert *ngIf="!isSuccessClosed5" class="alert-icon-left mb-2" [dismissible]="true" [type]="'success'"
|
||||
(close)="isSuccessClosed5=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-thumbs-o-up"></i></span>
|
||||
<strong>Well done!</strong> You successfully read this <a [routerLink]="" class="alert-link">important</a>
|
||||
alert message.
|
||||
</ngb-alert>
|
||||
<h6>Danger Alert</h6>
|
||||
<ngb-alert *ngIf="!isDangerClosed5" class="alert-icon-left mb-2" [dismissible]="true" [type]="'danger'"
|
||||
(close)="isDangerClosed5=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-thumbs-o-down"></i></span>
|
||||
<strong>Oh snap!</strong> Change a <a [routerLink]="" class="alert-link">few things up</a> and submit
|
||||
again.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Warning Alert</h6>
|
||||
<ngb-alert *ngIf="!isWarningClosed5" class="alert-icon-right mb-2" [dismissible]="true"
|
||||
[type]="'warning'" (close)="isWarningClosed5=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-warning"></i></span>
|
||||
<strong>Warning!</strong> Better check yourself, you're not <a [routerLink]="" class="alert-link">looking
|
||||
too good</a>.
|
||||
</ngb-alert>
|
||||
<h6>Info Alert</h6>
|
||||
<ngb-alert *ngIf="!isInfoClosed5" class="alert-icon-right mb-2" [dismissible]="true" [type]="'info'"
|
||||
(close)="isInfoClosed5=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-info-circle"></i></span>
|
||||
<strong>Heads up!</strong> This alert needs <a [routerLink]="" class="alert-link">your attention</a>,
|
||||
but it's not super important.
|
||||
</ngb-alert>
|
||||
<h6>Custom Alert</h6>
|
||||
<ngb-alert *ngIf="!isCustomClosed5" class="alert-icon-right mb-2" [dismissible]="true"
|
||||
[type]="'blue-grey'" (close)="isCustomClosed5=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-photo"></i></span>
|
||||
<strong>Great!</strong> You are using some <a [routerLink]="" class="alert-link">gorgeous</a> custom
|
||||
colors.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Alerts with icons end -->
|
||||
|
||||
|
||||
<!-- Alerts with icons & Arrow start -->
|
||||
<section id="alerts-with-icons-arrow" class="mb-2">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Alerts with icons & Arrow</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>To add left/right icons with arrow to the alert, use class <code>.alert-arrow-left</code> or
|
||||
<code>alert-arrow-right</code>
|
||||
as required.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Primary Alert</h6>
|
||||
<ngb-alert *ngIf="!isPrimaryClosed6" class="alert-icon-left alert-arrow-left mb-2" [dismissible]="true"
|
||||
[type]="'primary'" (close)="isPrimaryClosed6=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-heart"></i></span>
|
||||
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a> with some
|
||||
alerts.
|
||||
</ngb-alert>
|
||||
<h6>Success Alert</h6>
|
||||
<ngb-alert *ngIf="!isSuccessClosed6" class="alert-icon-left alert-arrow-left mb-2" [dismissible]="true"
|
||||
[type]="'success'" (close)="isSuccessClosed6=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-thumbs-o-up"></i></span>
|
||||
<strong>Well done!</strong> You successfully read this <a [routerLink]="" class="alert-link">important</a>
|
||||
alert message.
|
||||
</ngb-alert>
|
||||
<h6>Danger Alert</h6>
|
||||
<ngb-alert *ngIf="!isDangerClosed6" class="alert-icon-left alert-arrow-left mb-2" [dismissible]="true"
|
||||
[type]="'danger'" (close)="isDangerClosed6=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-thumbs-o-down"></i></span>
|
||||
<strong>Oh snap!</strong> Change a <a [routerLink]="" class="alert-link">few things up</a> and submit
|
||||
again.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Warning Alert</h6>
|
||||
<ngb-alert *ngIf="!isWarningClosed6" class="alert-icon-right alert-arrow-right mb-2" [dismissible]="true"
|
||||
[type]="'warning'" (close)="isWarningClosed6=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-warning"></i></span>
|
||||
<strong>Warning!</strong> Better check yourself, you're not <a [routerLink]="" class="alert-link">looking
|
||||
too good</a>.
|
||||
</ngb-alert>
|
||||
<h6>Info Alert</h6>
|
||||
<ngb-alert *ngIf="!isInfoClosed6" class="alert-icon-right alert-arrow-right mb-2" [dismissible]="true"
|
||||
[type]="'info'" (close)="isInfoClosed6=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-info-circle"></i></span>
|
||||
<strong>Heads up!</strong> This alert needs <a [routerLink]="" class="alert-link">your attention</a>,
|
||||
but it's not super important.
|
||||
</ngb-alert>
|
||||
<h6>Custom Alert</h6>
|
||||
<ngb-alert *ngIf="!isCustomClosed6" class="alert-icon-right alert-arrow-right mb-2" [dismissible]="true"
|
||||
[type]="'blue-grey'" (close)="isCustomClosed6=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-photo"></i></span>
|
||||
<strong>Great!</strong> You are using some <a [routerLink]="" class="alert-link">gorgeous</a> custom
|
||||
colors.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Alerts with icons & Arrow end -->
|
||||
|
||||
<!-- Solid Alerts start -->
|
||||
<section id="solid-alerts">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Solid Alerts</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>To use solid alert, add background color class to the <code>.alert</code> container class. Alerts also support custom color classes from theme color system. To use a custom color, add <code>.bg-*</code> to the <code>.alert</code> class.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Primary Alert</h6>
|
||||
<ngb-alert *ngIf="!isPrimaryClosed7" [dismissible]="true" [type]="''" class="bg-primary mb-2"
|
||||
(close)="isPrimaryClosed7=true" role="alert">
|
||||
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a> with some alerts.
|
||||
</ngb-alert>
|
||||
<h6>Success Alert</h6>
|
||||
<ngb-alert *ngIf="!isSuccessClosed7" [dismissible]="true" [type]="''" class="mb-2 bg-success"
|
||||
(close)="isSuccessClosed7=true" role="alert">
|
||||
<strong>Well done!</strong> You successfully read this <a [routerLink]="" class="alert-link">important</a> alert message.
|
||||
</ngb-alert>
|
||||
<h6>Danger Alert</h6>
|
||||
<ngb-alert *ngIf="!isDangerClosed7" [dismissible]="true" [type]="''" class="mb-2 bg-danger"
|
||||
(close)="isDangerClosed7=true" role="alert">
|
||||
<strong>Oh snap!</strong> Change a <a [routerLink]="" class="alert-link">few things up</a> and submit again.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Warning Alert</h6>
|
||||
<ngb-alert *ngIf="!isWarningClosed7" [dismissible]="true" [type]="''" class="mb-2 bg-warning"
|
||||
(close)="isWarningClosed7=true" role="alert">
|
||||
<strong>Warning!</strong> Better check yourself, you're not <a [routerLink]="" class="alert-link">looking too good</a>.
|
||||
</ngb-alert>
|
||||
<h6>Info Alert</h6>
|
||||
<ngb-alert *ngIf="!isInfoClosed7" [dismissible]="true" [type]="''" class="mb-2 bg-info"
|
||||
(close)="isInfoClosed7=true" role="alert">
|
||||
<strong>Heads up!</strong> This alert needs <a [routerLink]="" class="alert-link">your attention</a>, but it's not super important.
|
||||
</ngb-alert>
|
||||
<h6>Custom Alert</h6>
|
||||
<ngb-alert *ngIf="!isCustomClosed7" [dismissible]="true" [type]="''" class="mb-2 bg-cyan"
|
||||
(close)="isCustomClosed7=true" role="alert">
|
||||
<strong>Great!</strong> You are using some <a [routerLink]="" class="alert-link">gorgeous</a> custom colors.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Solid Alerts end -->
|
||||
|
||||
|
||||
<!-- Solid Alerts with icons start -->
|
||||
<section id="solid-alerts-with-icons">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Solid Alerts with icons</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>To use solid alert with icons, add class <code>.alert-icon-left</code> or <code>alert-icon-right</code> to <code>.alert</code> container class.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Primary Alert</h6>
|
||||
<ngb-alert *ngIf="!isPrimaryClosed8" [dismissible]="true" [type]="''"
|
||||
(close)="isPrimaryClosed8=true" class="alert-icon-left mb-2 bg-primary" role="alert">
|
||||
<span class="alert-icon"><i class="la la-heart"></i></span>
|
||||
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a> with some alerts.
|
||||
</ngb-alert>
|
||||
<h6>Success Alert</h6>
|
||||
<ngb-alert *ngIf="!isSuccessClosed8" [dismissible]="true" [type]="''"
|
||||
(close)="isSuccessClosed8=true" class="alert-icon-left bg-success mb-2" role="alert">
|
||||
<span class="alert-icon"><i class="la la-thumbs-o-up"></i></span>
|
||||
<strong>Well done!</strong> You successfully read this <a [routerLink]="" class="alert-link">important</a> alert message.
|
||||
</ngb-alert>
|
||||
<h6>Danger Alert</h6>
|
||||
<ngb-alert *ngIf="!isDangerClosed8" [dismissible]="true" [type]="''"
|
||||
(close)="isDangerClosed8=true" class="alert-icon-left bg-danger mb-2"role="alert">
|
||||
<span class="alert-icon"><i class="la la-thumbs-o-down"></i></span>
|
||||
<strong>Oh snap!</strong> Change a <a [routerLink]="" class="alert-link">few things up</a> and submit again.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Warning Alert</h6>
|
||||
<ngb-alert *ngIf="!isWarningClosed8" [dismissible]="true" [type]="''"
|
||||
(close)="isWarningClosed8=true" class="alert-icon-left bg-warning mb-2" role="alert">
|
||||
<span class="alert-icon"><i class="la la-warning"></i></span>
|
||||
<strong>Warning!</strong> Better check yourself, you're not <a [routerLink]="" class="alert-link">looking too good</a>.
|
||||
</ngb-alert>
|
||||
<h6>Info Alert</h6>
|
||||
<ngb-alert *ngIf="!isInfoClosed8" [dismissible]="true" [type]="''"
|
||||
(close)="isInfoClosed8=true" class="alert-icon-left bg-info mb-2" role="alert">
|
||||
<span class="alert-icon"><i class="la la-info-circle"></i></span>
|
||||
<strong>Heads up!</strong> This alert needs <a [routerLink]="" class="alert-link">your attention</a>, but it's not super important.
|
||||
</ngb-alert>
|
||||
<h6>Custom Alert</h6>
|
||||
<ngb-alert *ngIf="!isCustomClosed8" [dismissible]="true" [type]="''"
|
||||
(close)="isCustomClosed8=true" class="alert-icon-left bg-cyan mb-2" role="alert">
|
||||
<span class="alert-icon"><i class="la la-photo"></i></span>
|
||||
<strong>Great!</strong> You are using some <a [routerLink]="" class="alert-link">gorgeous</a> custom colors.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Solid Alerts with icons end -->
|
||||
|
||||
<!-- Solid Alerts with icons & Arrow start -->
|
||||
<section id="solid-alerts-with-icons-arrows">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Solid Alerts with icons & arrow</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>To use solid alert with icons, add class <code>.alert-arrow-left</code> or <code>alert-arrow-right</code> with icon classes to <code>.alert</code> container class.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Primary Alert</h6>
|
||||
<ngb-alert *ngIf="!isPrimaryClosed9" [dismissible]="true" [type]="''"
|
||||
(close)="isPrimaryClosed9=true" class="alert-icon-left alert-arrow-left bg-primary mb-2" role="alert">
|
||||
<span class="alert-icon"><i class="la la-heart"></i></span>
|
||||
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a> with some alerts.
|
||||
</ngb-alert>
|
||||
<h6>Success Alert</h6>
|
||||
<ngb-alert *ngIf="!isSuccessClosed9" [dismissible]="true" [type]="''"
|
||||
(close)="isSuccessClosed9=true" class="alert-icon-left alert-arrow-left bg-success mb-2" role="alert">
|
||||
<span class="alert-icon"><i class="la la-thumbs-o-up"></i></span>
|
||||
<strong>Well done!</strong> You successfully read this <a [routerLink]="" class="alert-link">important</a> alert message.
|
||||
</ngb-alert>
|
||||
<h6>Danger Alert</h6>
|
||||
<ngb-alert *ngIf="!isDangerClosed9" [dismissible]="true" [type]="''"
|
||||
(close)="isDangerClosed9=true" class="alert-icon-left alert-arrow-left bg-danger mb-2" role="alert">
|
||||
<span class="alert-icon"><i class="la la-thumbs-o-down"></i></span>
|
||||
<strong>Oh snap!</strong> Change a <a [routerLink]="" class="alert-link">few things up</a> and submit again.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Warning Alert</h6>
|
||||
<ngb-alert *ngIf="!isWarningClosed9" [dismissible]="true" [type]="''"
|
||||
(close)="isWarningClosed9=true" class="alert-icon-right alert-arrow-right bg-warning mb-2" role="alert">
|
||||
<span class="alert-icon"><i class="la la-warning"></i></span>
|
||||
<strong>Warning!</strong> Better check yourself, you're not <a [routerLink]="" class="alert-link">looking too good</a>.
|
||||
</ngb-alert>
|
||||
<h6>Info Alert</h6>
|
||||
<ngb-alert *ngIf="!isInfoClosed9" [dismissible]="true" [type]="''"
|
||||
(close)="isInfoClosed9=true" class="alert-icon-right alert-arrow-right bg-info mb-2" role="alert">
|
||||
<span class="alert-icon"><i class="la la-info-circle"></i></span>
|
||||
<strong>Heads up!</strong> This alert needs <a [routerLink]="" class="alert-link">your attention</a>, but it's not super important.
|
||||
</ngb-alert>
|
||||
<h6>Custom Alert</h6>
|
||||
<ngb-alert *ngIf="!isCustomClosed9" [dismissible]="true" [type]="''"
|
||||
(close)="isCustomClosed9=true" class="alert-icon-right alert-arrow-right bg-cyan mb-2" role="alert">
|
||||
<span class="alert-icon"><i class="la la-photo"></i></span>
|
||||
<strong>Great!</strong> You are using some <a [routerLink]="" class="alert-link">gorgeous</a> custom colors.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Solid Alerts with icons & Arrow end -->
|
||||
|
||||
<!-- Round Alerts start -->
|
||||
<section id="round-alerts">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Round Alerts</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>To use round alert, add class <code>.round</code> to <code>.alert</code> container class.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Primary Alert</h6>
|
||||
<ngb-alert *ngIf="!isPrimaryClosed10" class="bg-primary round mb-2" [dismissible]="true"
|
||||
[type]="''" (close)="isPrimaryClosed10=true" role="alert">
|
||||
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a> with some
|
||||
alerts.
|
||||
</ngb-alert>
|
||||
<h6>Success Alert</h6>
|
||||
<ngb-alert *ngIf="!isSuccessClosed10" class="bg-success round mb-2" [dismissible]="true"
|
||||
[type]="''" (close)="isSuccessClosed10=true" role="alert">
|
||||
<strong>Well done!</strong> You successfully read this <a [routerLink]="" class="alert-link">important</a>
|
||||
alert message.
|
||||
</ngb-alert>
|
||||
<h6>Danger Alert</h6>
|
||||
<ngb-alert *ngIf="!isDangerClosed10" class="round bg-danger mb-2" [dismissible]="true" [type]="''"
|
||||
(close)="isDangerClosed10=true" role="alert">
|
||||
<strong>Oh snap!</strong> Change a <a [routerLink]="" class="alert-link">few things up</a> and submit
|
||||
again.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Warning Alert</h6>
|
||||
<ngb-alert *ngIf="!isWarningClosed10" class="bg-warning round mb-2" [dismissible]="true"
|
||||
[type]="''" (close)="isWarningClosed10=true" role="alert">
|
||||
<strong>Warning!</strong> Better check yourself, you're not <a [routerLink]="" class="alert-link">looking
|
||||
too good</a>.
|
||||
</ngb-alert>
|
||||
<h6>Info Alert</h6>
|
||||
<ngb-alert *ngIf="!isInfoClosed10" class="round bg-info mb-2" [dismissible]="true" [type]="''"
|
||||
(close)="isInfoClosed10=true" role="alert">
|
||||
<strong>Heads up!</strong> This alert needs <a [routerLink]="" class="alert-link">your attention</a>,
|
||||
but it's not super important.
|
||||
</ngb-alert>
|
||||
<h6>Custom Alert</h6>
|
||||
<ngb-alert *ngIf="!isCustomClosed10" class="round bg-cyan mb-2" [dismissible]="true" [type]="''"
|
||||
(close)="isCustomClosed10=true" role="alert">
|
||||
<strong>Great!</strong> You are using some <a [routerLink]="" class="alert-link">gorgeous</a> custom
|
||||
colors.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Round Alerts end -->
|
||||
|
||||
|
||||
<!-- Round Alerts with icons start -->
|
||||
<section id="round-alerts-with-icons">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Round Alerts with icons</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>To use round alert, add class <code>.round</code> to <code>.alert</code> container class. To use
|
||||
Icons, add class <code>.alert-icon-left</code> or <code>alert-icon-right</code> to
|
||||
<code>.alert</code>
|
||||
container class.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Primary Alert</h6>
|
||||
<ngb-alert *ngIf="!isPrimaryClosed11" class="round bg-primary alert-icon-left mb-2" [dismissible]="true"
|
||||
[type]="''" (close)="isPrimaryClosed11=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-heart"></i></span>
|
||||
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a> with some
|
||||
alerts.
|
||||
</ngb-alert>
|
||||
<h6>Success Alert</h6>
|
||||
<ngb-alert *ngIf="!isSuccessClosed11" class="round bg-success alert-icon-left mb-2" [dismissible]="true"
|
||||
[type]="''" (close)="isSuccessClosed11=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-thumbs-o-up"></i></span>
|
||||
<strong>Well done!</strong> You successfully read this <a [routerLink]="" class="alert-link">important</a>
|
||||
alert message.
|
||||
</ngb-alert>
|
||||
<h6>Danger Alert</h6>
|
||||
<ngb-alert *ngIf="!isDangerClosed11" class="round bg-danger alert-icon-left mb-2" [dismissible]="true"
|
||||
[type]="''" (close)="isDangerClosed11=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-thumbs-o-down"></i></span>
|
||||
<strong>Oh snap!</strong> Change a <a [routerLink]="" class="alert-link">few things up</a> and submit
|
||||
again.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Warning Alert</h6>
|
||||
<ngb-alert *ngIf="!isWarningClosed11" class="round bg-warning alert-icon-right mb-2" [dismissible]="true"
|
||||
[type]="''" (close)="isWarningClosed11=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-warning"></i></span>
|
||||
<strong>Warning!</strong> Better check yourself, you're not <a [routerLink]="" class="alert-link">looking
|
||||
too good</a>.
|
||||
</ngb-alert>
|
||||
<h6>Info Alert</h6>
|
||||
<ngb-alert *ngIf="!isInfoClosed11" class="bg-info round alert-icon-right mb-2" [dismissible]="true"
|
||||
[type]="''" (close)="isInfoClosed11=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-info-circle"></i></span>
|
||||
<strong>Heads up!</strong> This alert needs <a [routerLink]="" class="alert-link">your attention</a>,
|
||||
but it's not super important.
|
||||
</ngb-alert>
|
||||
<h6>Custom Alert</h6>
|
||||
<ngb-alert *ngIf="!isCustomClosed11" class="bg-cyan round alert-icon-right mb-2" [dismissible]="true"
|
||||
[type]="''" (close)="isCustomClosed11=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-photo"></i></span>
|
||||
<strong>Great!</strong> You are using some <a [routerLink]="" class="alert-link">gorgeous</a> custom
|
||||
colors.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Round Alerts with icons end -->
|
||||
|
||||
<!-- Round Alerts with icons & Arrow start -->
|
||||
<section id="round-alerts-with-icons-arrows">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Round Alerts with icons & arrow</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>To use round alert, add class <code>.round</code> to <code>.alert</code> container class. To add
|
||||
left/right icons with arrow to the alert, use class <code>.alert-arrow-left</code> or
|
||||
<code>alert-arrow-right</code>
|
||||
with icon classes.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Primary Alert</h6>
|
||||
<ngb-alert *ngIf="!isPrimaryClosed12" class="bg-primary round alert-icon-left alert-arrow-left mb-2"
|
||||
[dismissible]="true" [type]="''" (close)="isPrimaryClosed12=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-heart"></i></span>
|
||||
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a> with some
|
||||
alerts.
|
||||
</ngb-alert>
|
||||
<h6>Success Alert</h6>
|
||||
<ngb-alert *ngIf="!isSuccessClosed12" class="bg-success round alert-icon-left alert-arrow-left mb-2"
|
||||
[dismissible]="true" [type]="''" (close)="isSuccessClosed12=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-thumbs-o-up"></i></span>
|
||||
<strong>Well done!</strong> You successfully read this <a [routerLink]="" class="alert-link">important</a>
|
||||
alert message.
|
||||
</ngb-alert>
|
||||
<h6>Danger Alert</h6>
|
||||
<ngb-alert *ngIf="!isDangerClosed12" class="bg-danger round alert-icon-left alert-arrow-left mb-2"
|
||||
[dismissible]="true" [type]="''" (close)="isDangerClosed12=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-thumbs-o-down"></i></span>
|
||||
<strong>Oh snap!</strong> Change a <a [routerLink]="" class="alert-link">few things up</a> and submit
|
||||
again.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Warning Alert</h6>
|
||||
<ngb-alert *ngIf="!isWarningClosed12" class="bg-warning round alert-icon-right alert-arrow-right mb-2"
|
||||
[dismissible]="true" [type]="''" (close)="isWarningClosed12=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-warning"></i></span>
|
||||
<strong>Warning!</strong> Better check yourself, you're not <a [routerLink]="" class="alert-link">looking
|
||||
too good</a>.
|
||||
</ngb-alert>
|
||||
<h6>Info Alert</h6>
|
||||
<ngb-alert *ngIf="!isInfoClosed12" class="bg-info round alert-icon-right alert-arrow-right mb-2"
|
||||
[dismissible]="true" [type]="''" (close)="isInfoClosed12=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-info-circle"></i></span>
|
||||
<strong>Heads up!</strong> This alert needs <a [routerLink]="" class="alert-link">your attention</a>,
|
||||
but it's not super important.
|
||||
</ngb-alert>
|
||||
<h6>Custom Alert</h6>
|
||||
<ngb-alert *ngIf="!isCustomClosed12" class="bg-cyan round alert-icon-right alert-arrow-right mb-2"
|
||||
[dismissible]="true" [type]="''" (close)="isCustomClosed12=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-photo"></i></span>
|
||||
<strong>Great!</strong> You are using some <a [routerLink]="" class="alert-link">gorgeous</a> custom
|
||||
colors.
|
||||
</ngb-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Round Alerts with icons & Arrow end -->
|
||||
|
||||
|
||||
<!-- Alerts with Additional Content start -->
|
||||
<section id="additional-content-alerts">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Alerts with Additional Content</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>Alerts can also contain additional HTML elements like headings and paragraphs.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Primary Alert</h6>
|
||||
<ngb-alert *ngIf="!isPrimaryClosed13" class="alert-primary" [dismissible]="true" [type]="'primary'"
|
||||
(close)="isPrimaryClosed13=true" role="alert">
|
||||
<h4 class="alert-heading mb-2">Good Morning!</h4>
|
||||
<p>Aww yeah, you successfully read this <a [routerLink]="" class="alert-link">important alert</a>
|
||||
message. This example text is going to run a bit longer so that you can see how spacing
|
||||
within an alert works with this kind of content.</p>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and
|
||||
tidy.</p>
|
||||
</ngb-alert>
|
||||
<h6>No Border Success Alert</h6>
|
||||
<ngb-alert *ngIf="!isSuccessClosed13" class="alert-success border-0 mb-2" [dismissible]="true"
|
||||
[type]="'success'" (close)="isSuccessClosed13=true" role="alert">
|
||||
<h4 class="alert-heading mb-2">Well done!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to
|
||||
run a bit longer so that you can see how <a [routerLink]="" class="alert-link">spacing within</a> an
|
||||
alert works with this kind of content.</p>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and
|
||||
tidy.</p>
|
||||
</ngb-alert>
|
||||
<h6>Solid Danger Alert</h6>
|
||||
<ngb-alert *ngIf="!isDangerClosed13" class="alert-danger mb-2" [dismissible]="true" [type]="'danger'"
|
||||
(close)="isDangerClosed13=true" role="alert">
|
||||
<h4 class="alert-heading mb-2">Oh snap!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to
|
||||
run a bit longer so that you can see how spacing within an alert works with this kind of
|
||||
content.</p>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things <a [routerLink]=""
|
||||
class="alert-link">nice and tidy</a>.</p>
|
||||
</ngb-alert>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<h6>Warning Alert</h6>
|
||||
<ngb-alert *ngIf="!isWarningClosed13" class="alert-warning mb-2" [dismissible]="true" [type]="'warning'"
|
||||
(close)="isWarningClosed13=true" role="alert">
|
||||
<h4 class="alert-heading mb-2">Warning!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is <a [routerLink]=""
|
||||
class="alert-link">going to run</a> a bit longer so that you can see how spacing
|
||||
within an
|
||||
alert works with this kind of content.</p>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and
|
||||
tidy.</p>
|
||||
</ngb-alert>
|
||||
<h6>No Border Info Alert</h6>
|
||||
<ngb-alert *ngIf="!isInfoClosed13" class="alert-info border-0 mb-2" [dismissible]="true" [type]="'info'"
|
||||
(close)="isInfoClosed13=true" role="alert">
|
||||
<h4 class="alert-heading mb-2">Heads up!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to
|
||||
run a bit longer so that you can see how spacing within <a [routerLink]="" class="alert-link">an
|
||||
alert</a> works with this kind of content.</p>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and
|
||||
tidy.</p>
|
||||
</ngb-alert>
|
||||
<h6>Solid Custom Alert</h6>
|
||||
<ngb-alert *ngIf="!isCustomClosed13" class="alert-amber mb-2" [dismissible]="true" [type]="'custom'"
|
||||
(close)="isCustomClosed13=true" role="alert">
|
||||
<h4 class="alert-heading mb-2">Great!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to
|
||||
run a bit longer so that you can see how spacing within an alert works with this kind of
|
||||
content.</p>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin <a [routerLink]="" class="alert-link">utilities</a>
|
||||
to keep things nice and tidy.</p>
|
||||
</ngb-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Alerts with Additional Content end -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
25
src/app/content/ngbbootstrap/alerts/alerts.component.spec.ts
Normal file
25
src/app/content/ngbbootstrap/alerts/alerts.component.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { AlertsComponent } from './alerts.component';
|
||||
|
||||
describe('AlertsComponent', () => {
|
||||
let component: AlertsComponent;
|
||||
let fixture: ComponentFixture<AlertsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ AlertsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AlertsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
133
src/app/content/ngbbootstrap/alerts/alerts.component.ts
Normal file
133
src/app/content/ngbbootstrap/alerts/alerts.component.ts
Normal file
@@ -0,0 +1,133 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-alerts',
|
||||
templateUrl: './alerts.component.html',
|
||||
styleUrls: ['./alerts.component.css']
|
||||
})
|
||||
export class AlertsComponent implements OnInit {
|
||||
|
||||
@BlockUI('basicAlerts') blockUIBasicAlerts: NgBlockUI;
|
||||
@BlockUI('dismissibleAlerts') blockUIDismissibleAlerts: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
public isPrimaryClosed2 = false;
|
||||
public isSecondaryClosed2 = false;
|
||||
public isSuccessClosed2 = false;
|
||||
public isDangerClosed2 = false;
|
||||
public isWarningClosed2 = false;
|
||||
public isInfoClosed2 = false;
|
||||
public isLightClosed2 = false;
|
||||
public isDarkClosed2 = false;
|
||||
|
||||
public isPrimaryClosed5 = false;
|
||||
public isSuccessClosed5 = false;
|
||||
public isDangerClosed5 = false;
|
||||
public isWarningClosed5 = false;
|
||||
public isInfoClosed5 = false;
|
||||
public isCustomClosed5 = false;
|
||||
|
||||
public isPrimaryClosed6 = false;
|
||||
public isSuccessClosed6 = false;
|
||||
public isDangerClosed6 = false;
|
||||
public isWarningClosed6 = false;
|
||||
public isInfoClosed6 = false;
|
||||
public isCustomClosed6 = false;
|
||||
|
||||
public isPrimaryClosed7 = false;
|
||||
public isSuccessClosed7 = false;
|
||||
public isDangerClosed7 = false;
|
||||
public isWarningClosed7 = false;
|
||||
public isInfoClosed7 = false;
|
||||
public isCustomClosed7 = false;
|
||||
|
||||
public isPrimaryClosed8 = false;
|
||||
public isSuccessClosed8 = false;
|
||||
public isDangerClosed8 = false;
|
||||
public isWarningClosed8 = false;
|
||||
public isInfoClosed8 = false;
|
||||
public isCustomClosed8 = false;
|
||||
|
||||
public isPrimaryClosed9 = false;
|
||||
public isSuccessClosed9 = false;
|
||||
public isDangerClosed9 = false;
|
||||
public isWarningClosed9 = false;
|
||||
public isInfoClosed9 = false;
|
||||
public isCustomClosed9 = false;
|
||||
|
||||
public isPrimaryClosed10 = false;
|
||||
public isSuccessClosed10 = false;
|
||||
public isDangerClosed10 = false;
|
||||
public isWarningClosed10 = false;
|
||||
public isInfoClosed10 = false;
|
||||
public isCustomClosed10 = false;
|
||||
|
||||
public isPrimaryClosed11 = false;
|
||||
public isSuccessClosed11 = false;
|
||||
public isDangerClosed11 = false;
|
||||
public isWarningClosed11 = false;
|
||||
public isInfoClosed11 = false;
|
||||
public isCustomClosed11 = false;
|
||||
|
||||
public isPrimaryClosed12 = false;
|
||||
public isSuccessClosed12 = false;
|
||||
public isDangerClosed12 = false;
|
||||
public isWarningClosed12 = false;
|
||||
public isInfoClosed12 = false;
|
||||
public isCustomClosed12 = false;
|
||||
|
||||
public isPrimaryClosed13 = false;
|
||||
public isSuccessClosed13 = false;
|
||||
public isDangerClosed13 = false;
|
||||
public isWarningClosed13 = false;
|
||||
public isInfoClosed13 = false;
|
||||
public isCustomClosed13 = false;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Alerts',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Alerts',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadBasicAlerts() {
|
||||
this.blockUIBasicAlerts.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIBasicAlerts.stop();
|
||||
}, 2500);
|
||||
}
|
||||
reloadDismissible() {
|
||||
this.blockUIDismissibleAlerts.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIDismissibleAlerts.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
1425
src/app/content/ngbbootstrap/badges/badges.component.html
Normal file
1425
src/app/content/ngbbootstrap/badges/badges.component.html
Normal file
File diff suppressed because it is too large
Load Diff
25
src/app/content/ngbbootstrap/badges/badges.component.spec.ts
Normal file
25
src/app/content/ngbbootstrap/badges/badges.component.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { BadgesComponent } from './badges.component';
|
||||
|
||||
describe('BadgesComponent', () => {
|
||||
let component: BadgesComponent;
|
||||
let fixture: ComponentFixture<BadgesComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ BadgesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BadgesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
35
src/app/content/ngbbootstrap/badges/badges.component.ts
Normal file
35
src/app/content/ngbbootstrap/badges/badges.component.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-badges',
|
||||
templateUrl: './badges.component.html',
|
||||
styleUrls: ['./badges.component.css']
|
||||
})
|
||||
export class BadgesComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Badge',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Badge',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { BasicButtonsComponent } from './basic-buttons.component';
|
||||
|
||||
describe('BasicButtonsComponent', () => {
|
||||
let component: BasicButtonsComponent;
|
||||
let fixture: ComponentFixture<BasicButtonsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ BasicButtonsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BasicButtonsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,60 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-basic-buttons',
|
||||
templateUrl: './basic-buttons.component.html',
|
||||
styleUrls: ['./basic-buttons.component.css']
|
||||
})
|
||||
export class BasicButtonsComponent implements OnInit {
|
||||
|
||||
@BlockUI('states') blockUIStates: NgBlockUI;
|
||||
@BlockUI('basicButtons') blockUIBasicButtons: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Buttons',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Buttons',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadStates() {
|
||||
this.blockUIStates.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIStates.stop();
|
||||
}, 2500);
|
||||
}
|
||||
reloadBasicButtons() {
|
||||
this.blockUIBasicButtons.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIBasicButtons.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
11
src/app/content/ngbbootstrap/callout/callout.component.css
Normal file
11
src/app/content/ngbbootstrap/callout/callout.component.css
Normal file
@@ -0,0 +1,11 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: center !important;
|
||||
}
|
||||
|
||||
.align-items-center {
|
||||
align-items: center!important;
|
||||
}
|
||||
1406
src/app/content/ngbbootstrap/callout/callout.component.html
Normal file
1406
src/app/content/ngbbootstrap/callout/callout.component.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { CalloutComponent } from './callout.component';
|
||||
|
||||
describe('CalloutComponent', () => {
|
||||
let component: CalloutComponent;
|
||||
let fixture: ComponentFixture<CalloutComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ CalloutComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CalloutComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
62
src/app/content/ngbbootstrap/callout/callout.component.ts
Normal file
62
src/app/content/ngbbootstrap/callout/callout.component.ts
Normal file
@@ -0,0 +1,62 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-callout',
|
||||
templateUrl: './callout.component.html',
|
||||
styleUrls: ['./callout.component.css']
|
||||
})
|
||||
export class CalloutComponent implements OnInit {
|
||||
|
||||
@BlockUI('basicCallouts') blockUIBasicCallouts: NgBlockUI;
|
||||
@BlockUI('rightBorderedCallouts') blockUIRightBorderedCallouts: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Callout',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Callout',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadBasicCallouts() {
|
||||
this.blockUIBasicCallouts.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIBasicCallouts.stop();
|
||||
}, 2500);
|
||||
}
|
||||
reloadRightBorderedCallouts() {
|
||||
this.blockUIRightBorderedCallouts.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIRightBorderedCallouts.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
:host ::ng-deep img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .carousel-item-next:not(.carousel-item-left){
|
||||
transform: unset !important;
|
||||
}
|
||||
192
src/app/content/ngbbootstrap/carousel/carousel.component.html
Normal file
192
src/app/content/ngbbootstrap/carousel/carousel.component.html
Normal file
@@ -0,0 +1,192 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Basic Carousel start -->
|
||||
<section id="basic-carousel">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-1 mb-1">
|
||||
<p><strong> Nested carousels are not supported.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Basic Example</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<!-- <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> -->
|
||||
<ngb-carousel *ngIf="basicArray" >
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="basicArray[0]">
|
||||
</ng-template>
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="basicArray[1]">
|
||||
</ng-template>
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="basicArray[2]">
|
||||
</ng-template>
|
||||
</ngb-carousel>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Optional captions</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ngb-carousel *ngIf="optionalArray" [pauseOnHover]="true" interval="1500">
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="optionalArray[0]" alt="First slide">
|
||||
<div class="carousel-caption">
|
||||
<h3>First slide label</h3>
|
||||
<p>Donut jujubes I love topping I love sweet. Jujubes I love brownie gummi bears I love donut
|
||||
sweet chocolate. Tart chocolate marshmallow.Tart carrot cake muffin.</p>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="optionalArray[1]" alt="Second slide">
|
||||
<div class="carousel-caption">
|
||||
<h3>Second slide label</h3>
|
||||
<p>Tart macaroon marzipan I love soufflé apple pie wafer. Chocolate bar jelly caramels jujubes
|
||||
chocolate cake gummies. Cupcake cake I love cake danish carrot cake.</p>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="optionalArray[2]" alt="Third slide">
|
||||
<div class="carousel-caption">
|
||||
<h3>Third slide label</h3>
|
||||
<p>Pudding sweet pie gummies. Chocolate bar sweet tiramisu cheesecake chocolate cotton candy
|
||||
pastry muffin. Marshmallow cake powder icing.</p>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ngb-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Basic Carousel end -->
|
||||
|
||||
|
||||
|
||||
<!-- Carousel Options start -->
|
||||
<section id="carousel-options">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Carousel Options</h4>
|
||||
<p>Options can be passed to <code>ngb-carousel</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Interval Option</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>The amount of time to delay between automatically cycling an item. If false, carousel will not
|
||||
automatically cycle.</p>
|
||||
<ngb-carousel *ngIf="intervalOptionalArray" [pauseOnHover]="true" interval="1500">
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="intervalOptionalArray[0]">
|
||||
</ng-template>
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="intervalOptionalArray[1]">
|
||||
</ng-template>
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="intervalOptionalArray[2]">
|
||||
</ng-template>
|
||||
</ngb-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Pause Option</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and
|
||||
resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>null</code>,
|
||||
hovering over the carousel won't pause it.</p>
|
||||
<ngb-carousel *ngIf="pauseOptionArray" interval="1500" [pauseOnHover]="false">
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="pauseOptionArray[0]">
|
||||
</ng-template>
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="pauseOptionArray[1]">
|
||||
</ng-template>
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="pauseOptionArray[2]">
|
||||
</ng-template>
|
||||
</ngb-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Wrap Option</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Whether the carousel should cycle continuously or have hard stops. Default: true</p>
|
||||
<ngb-carousel *ngIf="wrapOptionArray" interval="1500" [wrap]="false" [pauseOnHover]="false">
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="wrapOptionArray[0]" >
|
||||
</ng-template>
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="wrapOptionArray[1]">
|
||||
</ng-template>
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="wrapOptionArray[2]">
|
||||
</ng-template>
|
||||
</ngb-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Keyboard Option</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Whether the carousel should react to keyboard events. Default: true</p>
|
||||
<ngb-carousel *ngIf="keyboardoptionArray" interval="3000" [keyboard]="true" [pauseOnHover]="true">
|
||||
<ng-template class="carousel-item-next active" ngbSlide>
|
||||
<img [src]="keyboardoptionArray[0]">
|
||||
</ng-template>
|
||||
<ng-template class="carousel-item-next" ngbSlide>
|
||||
<img [src]="keyboardoptionArray[1]">
|
||||
</ng-template>
|
||||
<ng-template class="carousel-item-next" ngbSlide>
|
||||
<img [src]="keyboardoptionArray[2]">
|
||||
</ng-template>
|
||||
</ngb-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Carousel Options end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { CarouselComponent } from './carousel.component';
|
||||
|
||||
describe('CarouselComponent', () => {
|
||||
let component: CarouselComponent;
|
||||
let fixture: ComponentFixture<CarouselComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ CarouselComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CarouselComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
69
src/app/content/ngbbootstrap/carousel/carousel.component.ts
Normal file
69
src/app/content/ngbbootstrap/carousel/carousel.component.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
@Component({
|
||||
selector: 'app-carousel',
|
||||
templateUrl: './carousel.component.html',
|
||||
styleUrls: ['./carousel.component.css']
|
||||
})
|
||||
export class CarouselComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
pauseOnHover = true;
|
||||
|
||||
basicArray = ['../../../assets/images/carousel/02.jpg',
|
||||
'../../../assets/images/carousel/03.jpg',
|
||||
'../../../assets/images/carousel/01.jpg'
|
||||
];
|
||||
|
||||
optionalArray = ['../../../assets/images/carousel/06.jpg',
|
||||
'../../../assets/images/carousel/08.jpg',
|
||||
'../../../assets/images/carousel/05.jpg'
|
||||
];
|
||||
|
||||
intervalOptionalArray = ['../../../assets/images/carousel/10.jpg',
|
||||
'../../../assets/images/carousel/15.jpg',
|
||||
'../../../assets/images/carousel/14.jpg'
|
||||
];
|
||||
|
||||
pauseOptionArray = ['../../../assets/images/carousel/03.jpg',
|
||||
'../../../assets/images/carousel/09.jpg',
|
||||
'../../../assets/images/carousel/07.jpg'
|
||||
];
|
||||
|
||||
wrapOptionArray = ['../../../assets/images/carousel/02.jpg',
|
||||
'../../../assets/images/carousel/04.jpg',
|
||||
'../../../assets/images/carousel/08.jpg'
|
||||
];
|
||||
|
||||
keyboardoptionArray = ['../../../assets/images/carousel/11.jpg',
|
||||
'../../../assets/images/carousel/06.jpg',
|
||||
'../../../assets/images/carousel/01.jpg'
|
||||
];
|
||||
|
||||
constructor(config: NgbCarouselConfig) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Carousel',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Carousel',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
23
src/app/content/ngbbootstrap/collapse/collapse.component.css
Normal file
23
src/app/content/ngbbootstrap/collapse/collapse.component.css
Normal file
@@ -0,0 +1,23 @@
|
||||
:host ::ng-deep .basic-accordation .btn-link {
|
||||
color: #1e9ff2;
|
||||
}
|
||||
|
||||
:host ::ng-deep .color-accordation .btn-link {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .basic-accordation .card,
|
||||
:host ::ng-deep .color-accordation .card {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:host ::ng-deep .align_right .card-header {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .card-header .btn {
|
||||
font-weight: 500;
|
||||
letter-spacing: .05rem;
|
||||
font-size: 1.12rem;
|
||||
padding: 0 !important;
|
||||
}
|
||||
1124
src/app/content/ngbbootstrap/collapse/collapse.component.html
Normal file
1124
src/app/content/ngbbootstrap/collapse/collapse.component.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { CollapseComponent } from './collapse.component';
|
||||
|
||||
describe('CollapseComponent', () => {
|
||||
let component: CollapseComponent;
|
||||
let fixture: ComponentFixture<CollapseComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ CollapseComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CollapseComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
116
src/app/content/ngbbootstrap/collapse/collapse.component.ts
Normal file
116
src/app/content/ngbbootstrap/collapse/collapse.component.ts
Normal file
@@ -0,0 +1,116 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-collapse',
|
||||
templateUrl: './collapse.component.html',
|
||||
styleUrls: ['./collapse.component.css']
|
||||
})
|
||||
export class CollapseComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
public basicAccordation1 = false;
|
||||
public basicAccordation2 = false;
|
||||
public basicAccordation3 = false;
|
||||
public basicAccordation4 = false;
|
||||
|
||||
public rightAlignAccordation1 = false;
|
||||
public rightAlignAccordation2 = false;
|
||||
public rightAlignAccordation3 = false;
|
||||
public rightAlignAccordation4 = false;
|
||||
|
||||
public rightIconAccordation1 = false;
|
||||
public rightIconAccordation2 = false;
|
||||
public rightIconAccordation3 = false;
|
||||
public rightIconAccordation4 = false;
|
||||
|
||||
public leftIconAccordation1 = false;
|
||||
public leftIconAccordation2 = false;
|
||||
public leftIconAccordation3 = false;
|
||||
public leftIconAccordation4 = false;
|
||||
|
||||
public basicColorAccordation1 = false;
|
||||
public basicColorAccordation2 = false;
|
||||
public basicColorAccordation3 = false;
|
||||
public basicColorAccordation4 = false;
|
||||
|
||||
public basicColorBorderAccordation1 = false;
|
||||
public basicColorBorderAccordation2 = false;
|
||||
public basicColorBorderAccordation3 = false;
|
||||
public basicColorBorderAccordation4 = false;
|
||||
|
||||
public basicBorderColorAccordation1 = false;
|
||||
public basicBorderColorAccordation2 = false;
|
||||
public basicBorderColorAccordation3 = false;
|
||||
public basicBorderColorAccordation4 = false;
|
||||
|
||||
public basicSectionBorderColorAccordation1 = false;
|
||||
public basicSectionBorderColorAccordation2 = false;
|
||||
public basicSectionBorderColorAccordation3 = false;
|
||||
public basicSectionBorderColorAccordation4 = false;
|
||||
|
||||
public basicCollapse1 = false;
|
||||
public basicCollapse2 = false;
|
||||
public basicCollapse3 = false;
|
||||
public basicCollapse4 = false;
|
||||
|
||||
public rightAlignCollapse1 = false;
|
||||
public rightAlignCollapse2 = false;
|
||||
public rightAlignCollapse3 = false;
|
||||
public rightAlignCollapse4 = false;
|
||||
|
||||
public rightIconCollapse1 = false;
|
||||
public rightIconCollapse2 = false;
|
||||
public rightIconCollapse3 = false;
|
||||
public rightIconCollapse4 = false;
|
||||
|
||||
public leftIconCollapse1 = false;
|
||||
public leftIconCollapse2 = false;
|
||||
public leftIconCollapse3 = false;
|
||||
public leftIconCollapse4 = false;
|
||||
|
||||
public basicColorCollapse1 = false;
|
||||
public basicColorCollapse2 = false;
|
||||
public basicColorCollapse3 = false;
|
||||
public basicColorCollapse4 = false;
|
||||
|
||||
public basicColorBorderCollapse1 = false;
|
||||
public basicColorBorderCollapse2 = false;
|
||||
public basicColorBorderCollapse3 = false;
|
||||
public basicColorBorderCollapse4 = false;
|
||||
|
||||
public basicBorderColorCollapse1 = false;
|
||||
public basicBorderColorCollapse2 = false;
|
||||
public basicBorderColorCollapse3 = false;
|
||||
public basicBorderColorCollapse4 = false;
|
||||
|
||||
public basicSectionBorderColorCollapse1 = false;
|
||||
public basicSectionBorderColorCollapse2 = false;
|
||||
public basicSectionBorderColorCollapse3 = false;
|
||||
public basicSectionBorderColorCollapse4 = false;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Collapse',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Collapse',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
13
src/app/content/ngbbootstrap/components.module.spec.ts
Normal file
13
src/app/content/ngbbootstrap/components.module.spec.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { ComponentsModule } from './components.module';
|
||||
|
||||
describe('ComponentsModule', () => {
|
||||
let componentsModule: ComponentsModule;
|
||||
|
||||
beforeEach(() => {
|
||||
componentsModule = new ComponentsModule();
|
||||
});
|
||||
|
||||
it('should create an instance', () => {
|
||||
expect(componentsModule).toBeTruthy();
|
||||
});
|
||||
});
|
||||
136
src/app/content/ngbbootstrap/components.module.ts
Normal file
136
src/app/content/ngbbootstrap/components.module.ts
Normal file
@@ -0,0 +1,136 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { AlertsComponent } from './alerts/alerts.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CalloutComponent } from './callout/callout.component';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { UiSwitchModule } from 'ngx-ui-switch';
|
||||
import { BasicButtonsComponent } from './basic-buttons/basic-buttons.component';
|
||||
import { ExtendedButtonsComponent } from './extended-buttons/extended-buttons.component';
|
||||
import { TooltipsComponent } from './tooltips/tooltips.component';
|
||||
import { DropdownsComponent } from './dropdowns/dropdowns.component';
|
||||
import { ListGroupComponent } from './list-group/list-group.component';
|
||||
import { PopoversComponent } from './popovers/popovers.component';
|
||||
import { CarouselComponent } from './carousel/carousel.component';
|
||||
import { CollapseComponent } from './collapse/collapse.component';
|
||||
import { BadgesComponent } from './badges/badges.component';
|
||||
import { MediaobjectsComponent } from './mediaobjects/mediaobjects.component';
|
||||
import { SpinnersComponent } from './spinners/spinners.component';
|
||||
import { PaginationComponent } from './pagination/pagination.component';
|
||||
import { PillsComponent } from './pills/pills.component';
|
||||
import { ModalsComponent } from './modals/modals.component';
|
||||
import { ProgressComponent } from './progress/progress.component';
|
||||
import { PillBadgesComponent } from './pill-badges/pill-badges.component';
|
||||
import { ScrollableComponent } from './scrollable/scrollable.component';
|
||||
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||
import { NavsComponent } from './navs/navs.component';
|
||||
import { CardModule } from '../partials/general/card/card.module';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
import { MatchHeightModule } from '../partials/general/match-height/match-height.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
NgbModule,
|
||||
CardModule,
|
||||
MatchHeightModule,
|
||||
BreadcrumbModule,
|
||||
PerfectScrollbarModule,
|
||||
UiSwitchModule,
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'alerts',
|
||||
component: AlertsComponent
|
||||
},
|
||||
{
|
||||
path: 'callout',
|
||||
component: CalloutComponent
|
||||
},
|
||||
{
|
||||
path: 'basic-buttons',
|
||||
component: BasicButtonsComponent
|
||||
},
|
||||
{
|
||||
path: 'extended-buttons',
|
||||
component: ExtendedButtonsComponent
|
||||
},
|
||||
{
|
||||
path: 'tooltips',
|
||||
component: TooltipsComponent
|
||||
},
|
||||
{
|
||||
path: 'dropdowns',
|
||||
component: DropdownsComponent
|
||||
},
|
||||
{
|
||||
path: 'list-group',
|
||||
component: ListGroupComponent
|
||||
},
|
||||
{
|
||||
path: 'popovers',
|
||||
component: PopoversComponent
|
||||
},
|
||||
{
|
||||
path: 'carousel',
|
||||
component: CarouselComponent
|
||||
},
|
||||
{
|
||||
path: 'collapse',
|
||||
component: CollapseComponent
|
||||
},
|
||||
{
|
||||
path: 'modals',
|
||||
component: ModalsComponent
|
||||
},
|
||||
{
|
||||
path: 'progress',
|
||||
component: ProgressComponent
|
||||
},
|
||||
{
|
||||
path: 'pill-badges',
|
||||
component: PillBadgesComponent
|
||||
},
|
||||
{
|
||||
path: 'scrollable',
|
||||
component: ScrollableComponent
|
||||
},
|
||||
{
|
||||
path: 'navs',
|
||||
component: NavsComponent
|
||||
},
|
||||
{
|
||||
path: 'badges',
|
||||
component: BadgesComponent
|
||||
},
|
||||
{
|
||||
path: 'mediaobjects',
|
||||
component: MediaobjectsComponent
|
||||
},
|
||||
{
|
||||
path: 'spinners',
|
||||
component: SpinnersComponent
|
||||
},
|
||||
{
|
||||
path: 'pagination',
|
||||
component: PaginationComponent
|
||||
},
|
||||
{
|
||||
path: 'pills',
|
||||
component: PillsComponent
|
||||
}
|
||||
])
|
||||
],
|
||||
declarations: [AlertsComponent, CalloutComponent, BasicButtonsComponent,
|
||||
ExtendedButtonsComponent, TooltipsComponent, DropdownsComponent, ListGroupComponent,
|
||||
PopoversComponent, CarouselComponent, CollapseComponent, ModalsComponent,
|
||||
ProgressComponent, PillBadgesComponent, ScrollableComponent,
|
||||
NavsComponent, BadgesComponent, MediaobjectsComponent, SpinnersComponent,
|
||||
PaginationComponent, PillsComponent],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ComponentsModule { }
|
||||
@@ -0,0 +1,5 @@
|
||||
@media only screen and (max-width:767px) {
|
||||
._left {
|
||||
left: calc(100% - 120px) !important;
|
||||
}
|
||||
}
|
||||
767
src/app/content/ngbbootstrap/dropdowns/dropdowns.component.html
Normal file
767
src/app/content/ngbbootstrap/dropdowns/dropdowns.component.html
Normal file
@@ -0,0 +1,767 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Basic Dropdowns start -->
|
||||
<section id="basic-dropdowns">
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Basic Dropdown</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<button class="dropdown-item" type="button">Action</button>
|
||||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item" type="button">Something else here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Dropdown with divider</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<a [routerLink]="" class="dropdown-item">Action</a>
|
||||
<a [routerLink]="" class="dropdown-item">Another action</a>
|
||||
<a [routerLink]="" class="dropdown-item">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a [routerLink]="" class="dropdown-item">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">With Disabled Menu</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<a [routerLink]="" class="dropdown-item">Action</a>
|
||||
<a [routerLink]="" class="dropdown-item disabled">Another action</a>
|
||||
<a [routerLink]="" class="dropdown-item">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a [routerLink]="" class="dropdown-item">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">With active state</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<a [routerLink]="" class="dropdown-item">Action</a>
|
||||
<a [routerLink]="" class="dropdown-item">Another action</a>
|
||||
<a [routerLink]="" class="dropdown-item active">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a [routerLink]="" class="dropdown-item">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Dropdown with Headers start -->
|
||||
<section id="dropdown-with-headers">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Dropdown with Headers</h4>
|
||||
<p>Add a header to label sections of actions in any dropdown menu.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Basic Header</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<h6 class="dropdown-header">1st Dropdown header</h6>
|
||||
<button class="dropdown-item" type="button">Action</button>
|
||||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<h6 class="dropdown-header">2nd Dropdown header</h6>
|
||||
<button class="dropdown-item" type="button">Something else here</button>
|
||||
<button class="dropdown-item" type="button">Another Link</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Header with divider</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<h6 class="dropdown-header">1st Dropdown header</h6>
|
||||
<a [routerLink]="" class="dropdown-item">Action</a>
|
||||
<a [routerLink]="" class="dropdown-item">Another action</a>
|
||||
<h6 class="dropdown-header">2nd Dropdown header</h6>
|
||||
<a [routerLink]="" class="dropdown-item">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a [routerLink]="" class="dropdown-item">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">With Highlighted Menu</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<h6 class="dropdown-header highlight">1st Dropdown header</h6>
|
||||
<a [routerLink]="" class="dropdown-item">Action</a>
|
||||
<a [routerLink]="" class="dropdown-item">Another action</a>
|
||||
<h6 class="dropdown-header highlight">2nd Dropdown header</h6>
|
||||
<a [routerLink]="" class="dropdown-item">Something else here</a>
|
||||
<a [routerLink]="" class="dropdown-item">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">With Header Icons</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<h6 class="dropdown-header"><i class="la la-lightbulb-o mr-1 font-medium-1"></i> <i
|
||||
class="la la-list float-right font-medium-1"></i> 1st Dropdown header</h6>
|
||||
<a [routerLink]="" class="dropdown-item">Action</a>
|
||||
<a [routerLink]="" class="dropdown-item">Another action</a>
|
||||
<h6 class="dropdown-header highlight"><i class="la la-link mr-1 font-medium-1"></i> <i
|
||||
class="la la-eye float-right font-medium-1"></i> 2nd Dropdown header</h6>
|
||||
<a [routerLink]="" class="dropdown-item">Something else here</a>
|
||||
<a [routerLink]="" class="dropdown-item">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Dropdown Buttons with Arrow start -->
|
||||
<section id="dropdown-buttons-with-arrow">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Dropdown Options</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Dropdown Buttons with Arrow</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-content">
|
||||
<p>Use <code>.arrow</code> class to <code>.dropdown-menu</code> to add arrow.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-3 col-6">
|
||||
<div class="btn-group mr-1 mb-1">
|
||||
<div ngbDropdown class="d-inline-block">
|
||||
<button class="btn btn-success dropdown-toggle" id="dropdownBasic1"
|
||||
ngbDropdownToggle>Action</button>
|
||||
<div ngbDropdownMenu class="open-left arrow" aria-labelledby="dropdownBasic1">
|
||||
<button class="dropdown-item">Action - 1</button>
|
||||
<button class="dropdown-item">Another Action</button>
|
||||
<button class="dropdown-item">Something else is here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3 col-6">
|
||||
<div class="btn-group mr-1 mb-1">
|
||||
<div ngbDropdown class="d-inline-block">
|
||||
<button class="btn btn-danger dropdown-toggle" id="dropdownBasic1"
|
||||
ngbDropdownToggle>Action</button>
|
||||
<div ngbDropdownMenu class="open-left arrow _left" aria-labelledby="dropdownBasic1">
|
||||
<button class="dropdown-item">Action - 1</button>
|
||||
<button class="dropdown-item">Another Action</button>
|
||||
<button class="dropdown-item">Something else is here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3 col-6">
|
||||
<div class="btn-group mr-1 mb-1">
|
||||
<div ngbDropdown class="d-inline-block">
|
||||
<button class="btn btn-info dropdown-toggle" id="dropdownBasic1"
|
||||
ngbDropdownToggle>Action</button>
|
||||
<div ngbDropdownMenu class="open-left arrow" aria-labelledby="dropdownBasic1">
|
||||
<button class="dropdown-item">Action - 1</button>
|
||||
<button class="dropdown-item">Another Action</button>
|
||||
<button class="dropdown-item">Something else is here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3 col-6">
|
||||
<div class="btn-group mr-1 mb-1">
|
||||
<div ngbDropdown class="d-inline-block">
|
||||
<button class="btn btn-warning dropdown-toggle" id="dropdownBasic1"
|
||||
ngbDropdownToggle>Action</button>
|
||||
<div ngbDropdownMenu class="open-left arrow _left" aria-labelledby="dropdownBasic1">
|
||||
<button class="dropdown-item">Action - 1</button>
|
||||
<button class="dropdown-item">Another Action</button>
|
||||
<button class="dropdown-item">Something else is here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Dropdown Buttons with Arrow end -->
|
||||
|
||||
|
||||
|
||||
<!-- Dropdown Active states start -->
|
||||
<section id="dropdown-active-states">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Dropdown Active states</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Dropdown Buttons with <code>.active</code> class and theme color buttons.</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6 col-sm-12 height-250">
|
||||
<div class="btn-group mr-1 mb-1 show">
|
||||
<div ngbDropdown [open]="true" [autoClose]="false" class="d-inline-block">
|
||||
<button class="btn btn-secondary dropdown-toggle" id="dropdownBasic1"
|
||||
ngbDropdownToggle>Action</button>
|
||||
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
|
||||
<button class="dropdown-item">Action - 1</button>
|
||||
<button class="dropdown-item">Another Action</button>
|
||||
<button class="dropdown-item active">Something else is here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 col-sm-12 height-250">
|
||||
<div class="btn-group mr-1 mb-1 show">
|
||||
<div ngbDropdown [open]="true" [autoClose]="false" class="d-inline-block">
|
||||
<button class="btn btn-primary dropdown-toggle" id="dropdownBasic2"
|
||||
ngbDropdownToggle>Action</button>
|
||||
<div ngbDropdownMenu aria-labelledby="dropdownBasic2">
|
||||
<button class="dropdown-item">Action - 1</button>
|
||||
<button class="dropdown-item">Another Action</button>
|
||||
<button class="dropdown-item active">Something else is here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 col-sm-12 height-250">
|
||||
<div class="btn-group mr-1 mb-1 show">
|
||||
<div ngbDropdown [open]="true" [autoClose]="false" class="d-inline-block">
|
||||
<button class="btn btn-info dropdown-toggle" id="dropdownBasic3"
|
||||
ngbDropdownToggle>Action</button>
|
||||
<div ngbDropdownMenu aria-labelledby="dropdownBasic3">
|
||||
<button class="dropdown-item">Action - 1</button>
|
||||
<button class="dropdown-item">Another Action</button>
|
||||
<button class="dropdown-item active">Something else is here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 col-sm-12 height-250">
|
||||
<div class="btn-group mr-1 mb-1 show">
|
||||
<div ngbDropdown [open]="true" [autoClose]="false" class="d-inline-block">
|
||||
<button class="btn btn-warning dropdown-toggle" id="dropdownBasic4"
|
||||
ngbDropdownToggle>Action</button>
|
||||
<div ngbDropdownMenu aria-labelledby="dropdownBasic4">
|
||||
<button class="dropdown-item">Action - 1</button>
|
||||
<button class="dropdown-item">Another Action</button>
|
||||
<button class="dropdown-item active">Something else is here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 col-sm-12 height-250">
|
||||
<div class="btn-group mr-1 mb-1 show">
|
||||
<div ngbDropdown [open]="true" [autoClose]="false" class="d-inline-block">
|
||||
<button class="btn btn-success dropdown-toggle" id="dropdownBasic5"
|
||||
ngbDropdownToggle>Action</button>
|
||||
<div ngbDropdownMenu aria-labelledby="dropdownBasic5">
|
||||
<button class="dropdown-item">Action - 1</button>
|
||||
<button class="dropdown-item">Another Action</button>
|
||||
<button class="dropdown-item active">Something else is here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 col-sm-12 height-250">
|
||||
<div class="btn-group mr-1 mb-1 show">
|
||||
<div ngbDropdown [open]="true" [autoClose]="false" class="d-inline-block">
|
||||
<button class="btn btn-danger dropdown-toggle" id="dropdownBasic6"
|
||||
ngbDropdownToggle>Action</button>
|
||||
<div ngbDropdownMenu aria-labelledby="dropdownBasic6">
|
||||
<button class="dropdown-item">Action - 1</button>
|
||||
<button class="dropdown-item">Another Action</button>
|
||||
<button class="dropdown-item active">Something else is here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Dropdown Active states end -->
|
||||
|
||||
<!-- Dropdown Sizes start -->
|
||||
<section id="dropdown-sizes">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Dropdowns Sizes</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Extra Large Size</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Use <code>.dropdown-menu-xl</code> class to set extra large size dropdown.</p>
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu dropdown-menu-xl show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<h6 class="dropdown-header">1st Dropdown header</h6>
|
||||
<a [routerLink]="" class="dropdown-item">Action</a>
|
||||
<a [routerLink]="" class="dropdown-item">Another action</a>
|
||||
<h6 class="dropdown-header">2nd Dropdown header</h6>
|
||||
<a [routerLink]="" class="dropdown-item">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a [routerLink]="" class="dropdown-item">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Large Size</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Use <code>.dropdown-menu-lg</code> class to set large size dropdown.</p>
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu dropdown-menu-lg show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<h6 class="dropdown-header">1st Dropdown header</h6>
|
||||
<a [routerLink]="" class="dropdown-item">Action</a>
|
||||
<a [routerLink]="" class="dropdown-item">Another action</a>
|
||||
<h6 class="dropdown-header">2nd Dropdown header</h6>
|
||||
<a [routerLink]="" class="dropdown-item">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a [routerLink]="" class="dropdown-item">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Small Size</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Use <code>.dropdown-menu-sm</code> class to set small size dropdown.</p>
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu dropdown-menu-sm show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<h6 class="dropdown-header">1st Dropdown header</h6>
|
||||
<a [routerLink]="" class="dropdown-item">Action</a>
|
||||
<a [routerLink]="" class="dropdown-item">Another action</a>
|
||||
<h6 class="dropdown-header">2nd Dropdown header</h6>
|
||||
<a [routerLink]="" class="dropdown-item">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a [routerLink]="" class="dropdown-item">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Dropdown Sizes end -->
|
||||
|
||||
<!-- Dropdown with components start -->
|
||||
<section id="dropdown-with-components">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-1">
|
||||
<h4>Dropdowns with components</h4>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Left Icons</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<button class="dropdown-item" type="button"><i class="mr-1 feather ft-eye"></i> Action</button>
|
||||
<button class="dropdown-item" type="button"><i class="mr-1 feather ft-edit"></i> Another action</button>
|
||||
<button class="dropdown-item" type="button"><i class="mr-1 feather ft-link"></i> Something else
|
||||
here</button>
|
||||
<div class="dropdown-divider"></div>
|
||||
<button class="dropdown-item" type="button"><i class="mr-1 feather ft-trending-up"></i> Something
|
||||
here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Right Icons</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<button class="dropdown-item" type="button"><i class="feather ft-crop float-right"></i> Action</button>
|
||||
<button class="dropdown-item" type="button"><i class="feather ft-link float-right"></i> Another
|
||||
action</button>
|
||||
<button class="dropdown-item" type="button"><i class="feather ft-trending-up float-right"></i> Something
|
||||
else here</button>
|
||||
<div class="dropdown-divider"></div>
|
||||
<button class="dropdown-item" type="button"><i class="feather ft-link float-right"></i> Something
|
||||
here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Icons on both sides</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<button class="dropdown-item" type="button"><i class="mr-1 feather ft-clock"></i> Action <i
|
||||
class="feather ft-edit float-right"></i></button>
|
||||
<button class="dropdown-item" type="button"><i class="mr-1 feather ft-share-2"></i> Another action <i
|
||||
class="feather ft-trash float-right"></i></button>
|
||||
<button class="dropdown-item" type="button"><i class="mr-1 feather ft-link"></i> Something else here <i
|
||||
class="feather ft-link float-right"></i></button>
|
||||
<div class="dropdown-divider"></div>
|
||||
<button class="dropdown-item" type="button"><i class="mr-1 feather ft-feather ft-bluetooth"></i> Something here<i
|
||||
class="feather ft-crop float-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">With Checkbox</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<div class="dropdown-item">
|
||||
<span class="skin skin-polaris">
|
||||
<span class="custom-control custom-checkbox float-right">
|
||||
<input type="checkbox" class="custom-control-input" id="firstOption1">
|
||||
<label class="custom-control-label" for="firstOption1"></label>
|
||||
</span>
|
||||
<label for="firstOption1">Dropdown First Option</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dropdown-item">
|
||||
<span class="skin skin-polaris">
|
||||
<span class="custom-control custom-checkbox float-right">
|
||||
<input type="checkbox" class="custom-control-input" id="firstOption2">
|
||||
<label class="custom-control-label" for="firstOption2"></label>
|
||||
</span>
|
||||
<label for="firstOption2">Dropdown Second Option</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dropdown-divider"></div>
|
||||
<div class="dropdown-item">
|
||||
<span class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="firstOption3">
|
||||
<label class="custom-control-label" for="firstOption3"></label>
|
||||
<label class="ml-1" for="firstOption3">Dropdown Third Option</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dropdown-item">
|
||||
<span class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input float-right" id="firstOption4">
|
||||
<label class="custom-control-label" for="firstOption4"></label>
|
||||
<label class="ml-1" for="firstOption4">Dropdown Fourth Option</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">With Radios</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<div class="dropdown-item">
|
||||
<span class="custom-control custom-radio float-right">
|
||||
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
|
||||
<label class="custom-control-label" for="customRadio1"></label>
|
||||
</span>
|
||||
<label for="customRadio1">First Radio Option</label>
|
||||
</div>
|
||||
<div class="dropdown-item">
|
||||
<span class="custom-control custom-radio float-right">
|
||||
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio2">
|
||||
<label class="custom-control-label" for="customRadio2"></label>
|
||||
</span>
|
||||
<label for="customRadio2">Second Radio Option</label>
|
||||
</div>
|
||||
<div class="dropdown-divider"></div>
|
||||
<div class="dropdown-item">
|
||||
<span class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio3">
|
||||
<label class="custom-control-label" for="customRadio3"></label>
|
||||
<label for="customRadio3" class="ml-1">Third Radio Option</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dropdown-item">
|
||||
<span class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio4">
|
||||
<label class="custom-control-label" for="customRadio4"></label>
|
||||
<label for="customRadio4" class="ml-1">Fourth Radio Option</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">With Switchery</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<div class="dropdown-item">
|
||||
<span class="float-right">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(100, 189, 99)" size="small"
|
||||
checked></ui-switch>
|
||||
</span>
|
||||
<label for="switchery1" class="card-title">Switchery Options</label>
|
||||
</div>
|
||||
<div class="dropdown-item">
|
||||
<span class="float-right">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(100, 189, 99)" size="small">
|
||||
</ui-switch>
|
||||
</span>
|
||||
<label for="switchery2" class="card-title">Switchery Options</label>
|
||||
</div>
|
||||
<div class="dropdown-divider"></div>
|
||||
<div class="dropdown-item">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(100, 189, 99)" size="small" checked
|
||||
disabled></ui-switch>
|
||||
<label for="switchery3" class="card-title ml-1">Switchery Options</label>
|
||||
</div>
|
||||
<div class="dropdown-item">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(100, 189, 99)" size="small">
|
||||
</ui-switch>
|
||||
<label for="switchery4" class="card-title ml-1">Switchery Options</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">With Labels</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<button class="dropdown-item" type="button">
|
||||
<span class="mr-1 badge badge-default badge-success">New</span> Action
|
||||
</button>
|
||||
<button class="dropdown-item" type="button">
|
||||
<span class="mr-1 badge badge-default badge-danger">bug</span> Another action
|
||||
</button>
|
||||
<button class="dropdown-item" type="button">
|
||||
<span class="mr-1 badge badge-default badge-info">check</span> Something else here
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">With Badge Pills</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<button class="dropdown-item" type="button">
|
||||
<span class="mr-1 badge badge-pill badge-default badge-danger badge-glow">50</span> Action
|
||||
</button>
|
||||
<button class="dropdown-item" type="button">
|
||||
<span class="mr-1 badge badge-pill badge-default badge-info badge-glow">15</span> Another action
|
||||
</button>
|
||||
<button class="dropdown-item" type="button">
|
||||
<span class="mr-1 badge badge-pill badge-default badge-warning badge-glow">45</span> Something
|
||||
else here
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Labels & Label pills</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="dropdown show">
|
||||
<div class="dropdown-menu show"
|
||||
style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
|
||||
<button class="dropdown-item" type="button">
|
||||
<span class="badge badge-default badge-success mr-1">New</span>
|
||||
Action
|
||||
<span class="badge badge-pill badge-default badge-danger badge-glow float-right">50</span>
|
||||
</button>
|
||||
<button class="dropdown-item" type="button">
|
||||
<span class="badge badge-pill badge-default badge-info badge-glow mr-1">15</span>
|
||||
Another action
|
||||
<span class="badge badge-default badge-success float-right">bug</span>
|
||||
</button>
|
||||
<button class="dropdown-item" type="button">
|
||||
<span class="badge badge-default badge-warning mr-1">check</span>
|
||||
Something else here
|
||||
<span class="badge badge-pill badge-default badge-info badge-glow ml-1">45</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Dropdown with components end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { DropdownsComponent } from './dropdowns.component';
|
||||
|
||||
describe('DropdownsComponent', () => {
|
||||
let component: DropdownsComponent;
|
||||
let fixture: ComponentFixture<DropdownsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DropdownsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DropdownsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dropdowns',
|
||||
templateUrl: './dropdowns.component.html',
|
||||
styleUrls: ['./dropdowns.component.css']
|
||||
})
|
||||
export class DropdownsComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Dropdowns',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Dropdowns',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
:host ::ng-deep .gap_fl_btn {
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,611 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Floating Buttons start-->
|
||||
<section id="floating-point">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-1">
|
||||
<h4 class="text-uppercase">Floating Buttons</h4>
|
||||
<p>Floating action buttons are used for a special type of promoted action. They are distinguished by a
|
||||
circled icon floating above the UI and have special motion behaviors related to morphing, launching, and
|
||||
the transferring anchor point. </p>
|
||||
<p>Use the class <code>.btn</code> along with class <code>.btn-float</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'floatingButtons'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadFloatingButtons($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Floating Buttons
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-12 mb-1">
|
||||
<div class="form-group text-center">
|
||||
<!-- Floating icon button Regular -->
|
||||
<a [routerLink]="" class="btn btn-float btn-square btn-secondary"><i
|
||||
class="la la-thumbs-o-up"></i></a>
|
||||
<a [routerLink]="" class="btn btn-float btn-square btn-float-lg btn-primary gap_fl_btn"><i
|
||||
class="la la-camera"></i></a>
|
||||
<a [routerLink]="" class="btn btn-float btn-square btn-secondary"><i
|
||||
class="la la-thumbs-o-down"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12 mb-1">
|
||||
<div class="form-group text-center">
|
||||
<!-- Floating button Regular with text -->
|
||||
<a [routerLink]="" class="btn btn-float btn-cyan"><i
|
||||
class="la la-search"></i><span>search</span></a>
|
||||
<a [routerLink]="" class="btn btn-float btn-float-lg btn-pink gap_fl_btn"><i
|
||||
class="la la-cloud-download"></i><span>Downloads</span></a>
|
||||
<a [routerLink]="" class="btn btn-float btn-cyan"><i
|
||||
class="la la-refresh"></i><span>refresh</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12 mb-1">
|
||||
<div class="form-group text-center">
|
||||
<!-- Regular Round Floating button -->
|
||||
<a [routerLink]="" class="btn btn-float btn-round btn-secondary"><i
|
||||
class="la la-thumbs-o-up"></i></a>
|
||||
<a [routerLink]="" class="btn btn-float btn-round btn-float-lg btn-primary gap_fl_btn"><i
|
||||
class="la la-camera"></i></a>
|
||||
<a [routerLink]="" class="btn btn-float btn-round btn-secondary"><i
|
||||
class="la la-thumbs-o-down"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Floating Buttons end -->
|
||||
|
||||
|
||||
|
||||
<!-- Floating Outline Buttons start-->
|
||||
<section id="floating-outline-buttons">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'floatingOutlineButtons'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadFloatingOutlineButtons($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Floating Outline Buttons
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-12 mb-1">
|
||||
<div class="form-group text-center">
|
||||
<!-- Floating icon Outline button -->
|
||||
<button type="button" class="btn btn-float btn-square btn-outline-secondary"><i
|
||||
class="la la-thumbs-o-up"></i></button>
|
||||
<button type="button"
|
||||
class="gap_fl_btn btn btn-float btn-square btn-float-lg btn-outline-primary"><i
|
||||
class="la la-camera"></i></button>
|
||||
<button type="button" class="btn btn-float btn-square btn-outline-secondary"><i
|
||||
class="la la-thumbs-o-down"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12 mb-1">
|
||||
<div class="form-group text-center">
|
||||
<!-- Floating Outline button with text -->
|
||||
<button type="button" class="btn btn-float btn-outline-cyan"><i
|
||||
class="la la-search"></i><span>search</span></button>
|
||||
<button type="button" class="gap_fl_btn btn btn-float btn-float-lg btn-outline-pink"><i
|
||||
class="la la-cloud-download"></i><span>Downloads</span></button>
|
||||
<button type="button" class="btn btn-float btn-outline-cyan"><i
|
||||
class="la la-refresh"></i><span>refresh</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12 mb-1">
|
||||
<div class="form-group text-center">
|
||||
<!-- Outline Round Floating button -->
|
||||
<button type="button" class="btn btn-float btn-outline-secondary btn-round"><i
|
||||
class="la la-thumbs-o-up"></i></button>
|
||||
<button type="button"
|
||||
class="gap_fl_btn btn btn-float btn-float-lg btn-outline-primary btn-round"><i
|
||||
class="la la-camera"></i></button>
|
||||
<button type="button" class="btn btn-float btn-outline-secondary btn-round"><i
|
||||
class="la la-thumbs-o-down"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Floating Outline Buttons end -->
|
||||
|
||||
|
||||
|
||||
<!-- Social Buttons for Bootstrap start-->
|
||||
<section id="social-buttons">
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 mb-1">
|
||||
<h4 class="text-uppercase">Social Buttons for Bootstrap</h4>
|
||||
<p>Buttons with built-in loading indicators, effectively bridging the gap between action and feedback.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Social Media Buttons</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-12 mb-1">
|
||||
<div class="form-group">
|
||||
<!-- Social Buttons with Social Name -->
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mr-1 mb-1 btn-facebook"><i
|
||||
class="la la-facebook"></i>
|
||||
Facebook</a>
|
||||
<a [routerLink]=""
|
||||
class="btn btn-social btn-min-width mr-1 mb-1 btn-reddit"><span
|
||||
class="la la-reddit font-medium-3"></span>
|
||||
Reddit</a>
|
||||
<a [routerLink]=""
|
||||
class="btn btn-social btn-min-width mr-1 mb-1 btn-twitter"><span
|
||||
class="la la-twitter"></span>
|
||||
Twitter</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mr-1 mb-1 btn-github"><i
|
||||
class="la la-github font-medium-3"></i>
|
||||
Github</a>
|
||||
<a [routerLink]=""
|
||||
class="btn btn-social btn-min-width mr-1 mb-1 btn-soundcloud"><span
|
||||
class="la la-soundcloud"></span>
|
||||
Soundcloud</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mr-1 mb-1 btn-vimeo"><span
|
||||
class="la la-vimeo-square font-medium-3"></span>
|
||||
Vimeo</a>
|
||||
<a [routerLink]=""
|
||||
class="btn btn-social btn-min-width mr-1 mb-1 btn-pinterest"><span
|
||||
class="la la-pinterest-p font-medium-3"></span>
|
||||
Pinterest</a>
|
||||
<a [routerLink]=""
|
||||
class="btn btn-social btn-min-width mr-1 mb-1 btn-tumblr"><span
|
||||
class="la la-tumblr font-medium-3"></span>
|
||||
Tumblr</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mr-1 mb-1 btn-yahoo"><span
|
||||
class="la la-yahoo font-medium-3"></span>
|
||||
Yahoo</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12 mb-1">
|
||||
<!-- Social Icon Buttons -->
|
||||
<div class="form-group">
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-adn"><span
|
||||
class="la la-adn"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-bitbucket"><span
|
||||
class="la la-bitbucket font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-dropbox"><span
|
||||
class="la la-dropbox font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-facebook"><span
|
||||
class="la la-facebook"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-flickr"><span
|
||||
class="la la-flickr font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-foursquare"><span
|
||||
class="la la-foursquare font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-github"><span
|
||||
class="la la-github font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-google"><span
|
||||
class="la la-google font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-instagram"><span
|
||||
class="la la-instagram font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-linkedin"><span
|
||||
class="la la-linkedin font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-microsoft"><span
|
||||
class="la la-windows font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-odnoklassniki"><span
|
||||
class="la la-odnoklassniki font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-openid"><span
|
||||
class="la la-openid font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-pinterest"><span
|
||||
class="la la-pinterest-p font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-reddit"><span
|
||||
class="la la-reddit font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-soundcloud"><span
|
||||
class="la la-soundcloud"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-tumblr"><span
|
||||
class="la la-tumblr font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-twitter"><span
|
||||
class="la la-twitter"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-vimeo"><span
|
||||
class="la la-vimeo-square font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-vk"><span
|
||||
class="la la-vk font-medium-3"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-yahoo"><span
|
||||
class="la la-yahoo font-medium-3"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12 mb-1 social-buttons">
|
||||
<div class="form-group">
|
||||
<!-- Social Buttons large name -->
|
||||
<a [routerLink]="" class="btn btn-social width-200 mr-1 mb-1 btn-adn"><span
|
||||
class="la la-adn font-medium-3"></span>
|
||||
Sign in with App.net</a>
|
||||
<a [routerLink]="" class="btn btn-social width-200 mr-1 mb-1 btn-dropbox"><span
|
||||
class="la la-dropbox font-medium-3"></span>
|
||||
Sign in with dropbox</a>
|
||||
<a [routerLink]="" class="btn btn-social width-200 mr-1 mb-1 btn-flickr"><span
|
||||
class="la la-flickr font-medium-3"></span>
|
||||
Sign in with flickr</a>
|
||||
<a [routerLink]="" class="btn btn-social width-200 mr-1 mb-1 btn-github"><span
|
||||
class="la la-github font-medium-3"></span>
|
||||
Sign in with github</a>
|
||||
<a [routerLink]="" class="btn btn-social width-200 mr-1 mb-1 btn-google"><span
|
||||
class="la la-google font-medium-3"></span>
|
||||
Sign in with google</a>
|
||||
<a [routerLink]="" class="btn btn-social width-200 mr-1 mb-1 btn-facebook"><span
|
||||
class="la la-facebook"></span>
|
||||
Sign in with facebook</a>
|
||||
<a [routerLink]=""
|
||||
class="btn btn-social width-200 mr-1 mb-1 btn-foursquare"><span
|
||||
class="la la-foursquare font-medium-3"></span>
|
||||
Sign in with foursquare</a>
|
||||
<a [routerLink]="" class="btn btn-social width-200 mr-1 mb-1 btn-bitbucket"><span
|
||||
class="la la-bitbucket font-medium-3"></span>
|
||||
Sign in with bitbucket</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Social Buttons for Bootstrap end -->
|
||||
|
||||
|
||||
|
||||
<!-- Social Media Buttons Size start-->
|
||||
<section id="social-buttons-sizes">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Social Media Buttons Size</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-12 mb-1">
|
||||
<div class="form-group">
|
||||
<!-- Social Buttons block size-->
|
||||
<a [routerLink]="" class="btn btn-social btn-block mb-1 btn-github"><i
|
||||
class="la la-github"></i>
|
||||
Github</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-block mb-1 btn-soundcloud"><span
|
||||
class="la la-soundcloud"></span>
|
||||
Soundcloud</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-block mb-1 btn-vimeo"><span
|
||||
class="la la-vimeo-square"></span>
|
||||
Vimeo</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-block mb-1 btn-yahoo"><span
|
||||
class="la la-yahoo"></span>
|
||||
Yahoo</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-block mb-1 btn-flickr"><span
|
||||
class="la la-flickr"></span>
|
||||
Flickr</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12 mb-1">
|
||||
<div class="form-group text-center">
|
||||
<!-- Social Buttons sizes -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-lg btn-yahoo"><span
|
||||
class="la la-yahoo"></span>
|
||||
Yahoo</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-yahoo"><span
|
||||
class="la la-yahoo"></span>
|
||||
Yahoo</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-sm btn-yahoo"><span
|
||||
class="la la-yahoo"></span>
|
||||
Yahoo</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-xs btn-yahoo"><span
|
||||
class="la la-yahoo"></span>
|
||||
Yahoo</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-lg btn-vimeo"><span
|
||||
class="la la-vimeo-square"></span>
|
||||
Vimeo</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-vimeo"><span
|
||||
class="la la-vimeo-square"></span>
|
||||
Vimeo</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-sm btn-vimeo"><span
|
||||
class="la la-vimeo-square"></span>
|
||||
Vimeo</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-xs btn-vimeo"><span
|
||||
class="la la-vimeo-square"></span>
|
||||
Vimeo</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Social icon Buttons Sizes -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<a [routerLink]=""
|
||||
class="btn btn-social-icon mb-1 mr-1 btn-lg btn-soundcloud"><span
|
||||
class="la la-soundcloud"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mb-1 mr-1 btn-soundcloud"><span
|
||||
class="la la-soundcloud"></span></a>
|
||||
<a [routerLink]=""
|
||||
class="btn btn-social-icon mb-1 mr-1 btn-sm btn-soundcloud"><span
|
||||
class="la la-soundcloud"></span></a>
|
||||
<a [routerLink]=""
|
||||
class="btn btn-social-icon mb-1 mr-1 btn-xs btn-soundcloud"><span
|
||||
class="la la-soundcloud"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<a [routerLink]="" class="btn btn-social-icon btn-lg mb-1 mr-1 btn-github"><i
|
||||
class="la la-github"></i></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mb-1 mr-1 btn-github"><i
|
||||
class="la la-github"></i></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon btn-sm mb-1 mr-1 btn-github"><i
|
||||
class="la la-github"></i></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon btn-xs mb-1 mr-1 btn-github"><i
|
||||
class="la la-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12 mb-1 social-buttons">
|
||||
<div class="form-group">
|
||||
<!-- Social Buttons block sizes -->
|
||||
<a [routerLink]=""
|
||||
class="btn btn-social mb-1 btn-block btn-lg btn-pinterest"><span
|
||||
class="la la-pinterest-p"></span>
|
||||
Sign in with Pinterest</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 btn-block btn-pinterest"><span
|
||||
class="la la-pinterest-p"></span>
|
||||
Sign in with Pinterest</a>
|
||||
<a [routerLink]=""
|
||||
class="btn btn-social mb-1 btn-block btn-sm btn-pinterest"><span
|
||||
class="la la-pinterest-p"></span>
|
||||
Sign in with Pinterest</a>
|
||||
<a [routerLink]=""
|
||||
class="btn btn-social mb-1 btn-block btn-xs btn-pinterest"><span
|
||||
class="la la-pinterest-p"></span>
|
||||
Sign in with Pinterest</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Social Media Buttons Size end -->
|
||||
|
||||
|
||||
<!-- Social Media Outline Buttons start-->
|
||||
<section id="social-outline-buttons">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Social Media Outline Buttons</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-12 mb-1">
|
||||
<div class="form-group">
|
||||
<!-- Social Outline Buttons -->
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-facebook"><i
|
||||
class="la la-facebook"></i> Facebook</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-reddit"><span
|
||||
class="la la-reddit font-medium-4"></span> Reddit</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-twitter"><span
|
||||
class="la la-twitter font-medium-4"></span> Twitter</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-github"><i
|
||||
class="la la-github font-medium-4"></i> Github</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-soundcloud"><span
|
||||
class="la la-soundcloud"></span> Soundcloud</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-vimeo"><span
|
||||
class="la la-vimeo-square font-medium-4"></span> Vimeo</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-pinterest"><span
|
||||
class="la la-pinterest-p font-medium-4"></span> Pinterest</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-tumblr"><span
|
||||
class="la la-tumblr font-medium-4"></span> Tumblr</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-yahoo"><span
|
||||
class="la la-yahoo font-medium-4"></span> Yahoo</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12 mb-1">
|
||||
<div class="form-group">
|
||||
<!-- Social Icons Outline Buttons -->
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-adn"><span
|
||||
class="la la-adn"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-bitbucket"><span
|
||||
class="la la-bitbucket font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-dropbox"><span
|
||||
class="la la-dropbox font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
|
||||
class="la la-facebook"></span></a>
|
||||
<a [routerLink]="" n class="btn btn-social-icon mr-1 mb-1 btn-outline-flickr"><span
|
||||
class="la la-flickr font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-foursquare"><span
|
||||
class="la la-foursquare font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
|
||||
class="la la-github font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-google"><span
|
||||
class="la la-google font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-instagram"><span
|
||||
class="la la-instagram font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
|
||||
class="la la-linkedin font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-microsoft"><span
|
||||
class="la la-windows font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-odnoklassniki"><span
|
||||
class="la la-odnoklassniki font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-openid"><span
|
||||
class="la la-openid font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-pinterest"><span
|
||||
class="la la-pinterest-p font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-reddit"><span
|
||||
class="la la-reddit font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-soundcloud"><span
|
||||
class="la la-soundcloud"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-tumblr"><span
|
||||
class="la la-tumblr font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
|
||||
class="la la-twitter"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-vimeo"><span
|
||||
class="la la-vimeo-square font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-vk"><span
|
||||
class="la la-vk font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-yahoo"><span
|
||||
class="la la-yahoo font-medium-4"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12 mb-1 social-buttons">
|
||||
<div class="form-group">
|
||||
<!-- Social Outline Buttons with text -->
|
||||
<a [routerLink]="" class="btn btn-social width-200 mb-1 mr-1 btn-outline-adn"><span
|
||||
class="la la-adn font-medium-4"></span> Sign in with App.net</a>
|
||||
<a [routerLink]="" class="btn btn-social width-200 mb-1 mr-1 btn-outline-dropbox"><span
|
||||
class="la la-dropbox font-medium-4"></span> Sign in with dropbox</a>
|
||||
<a [routerLink]="" class="btn btn-social width-200 mb-1 mr-1 btn-outline-flickr"><span
|
||||
class="la la-flickr font-medium-4"></span> Sign in with flickr</a>
|
||||
<a [routerLink]="" class="btn btn-social width-200 mb-1 mr-1 btn-outline-github"><span
|
||||
class="la la-github font-medium-4"></span> Sign in with github</a>
|
||||
<a [routerLink]="" class="btn btn-social width-200 mb-1 mr-1 btn-outline-google"><span
|
||||
class="la la-google font-medium-4"></span> Sign in with google</a>
|
||||
<a [routerLink]="" class="btn btn-social width-200 mb-1 mr-1 btn-outline-facebook"><span
|
||||
class="la la-facebook"></span> Sign in with facebook</a>
|
||||
<a [routerLink]="" class="btn btn-social width-200 mb-1 mr-1 btn-outline-foursquare"><span
|
||||
class="la la-foursquare font-medium-4"></span> Sign in with foursquare</a>
|
||||
<a [routerLink]="" class="btn btn-social width-200 mb-1 mr-1 btn-outline-bitbucket"><span
|
||||
class="la la-bitbucket font-medium-4"></span> Sign in with bitbucket</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Social Media Outline Buttons end -->
|
||||
|
||||
|
||||
|
||||
<!-- Social Media Outline Buttons Size start-->
|
||||
<section id="social-outline-buttons-sizes">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Social Media Outline Buttons Size</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-12 mb-1">
|
||||
<div class="form-group">
|
||||
<!-- Social Outline Block Buttons Here-->
|
||||
<a [routerLink]="" class="btn btn-social btn-block mb-1 btn-outline-github"><i
|
||||
class="la la-github"></i>
|
||||
Github</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-block mb-1 btn-outline-soundcloud"><span
|
||||
class="la la-soundcloud"></span> Soundcloud</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-block mb-1 btn-outline-vimeo"><span
|
||||
class="la la-vimeo-square"></span> Vimeo</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-block mb-1 btn-outline-yahoo"><span
|
||||
class="la la-yahoo"></span> Yahoo</a>
|
||||
<a [routerLink]="" class="btn btn-social btn-block mb-1 btn-outline-flickr"><span
|
||||
class="la la-flickr"></span> Flickr</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12 mb-1">
|
||||
<div class="form-group text-center">
|
||||
<!-- Social Outline Buttons sizes -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-lg btn-outline-yahoo"><span
|
||||
class="la la-yahoo"></span> Yahoo</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-outline-yahoo"><span
|
||||
class="la la-yahoo"></span>
|
||||
Yahoo</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-sm btn-outline-yahoo"><span
|
||||
class="la la-yahoo"></span> Yahoo</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-xs btn-outline-yahoo"><span
|
||||
class="la la-yahoo"></span> Yahoo</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-lg btn-outline-vimeo"><span
|
||||
class="la la-vimeo-square"></span> Vimeo</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-outline-vimeo"><span
|
||||
class="la la-vimeo-square"></span> Vimeo</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-sm btn-outline-vimeo"><span
|
||||
class="la la-vimeo-square"></span> Vimeo</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 mr-1 btn-xs btn-outline-vimeo"><span
|
||||
class="la la-vimeo-square"></span> Vimeo</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Social Outline Icon Buttons sizes -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<a [routerLink]="" class="btn btn-social-icon mb-1 mr-1 btn-lg btn-outline-soundcloud"><span
|
||||
class="la la-soundcloud"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mb-1 mr-1 btn-outline-soundcloud"><span
|
||||
class="la la-soundcloud"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mb-1 mr-1 btn-sm btn-outline-soundcloud"><span
|
||||
class="la la-soundcloud"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mb-1 mr-1 btn-xs btn-outline-soundcloud"><span
|
||||
class="la la-soundcloud"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<a [routerLink]="" class="btn btn-social-icon btn-lg mb-1 mr-1 btn-outline-github"><i
|
||||
class="la la-github"></i></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mb-1 mr-1 btn-outline-github"><i
|
||||
class="la la-github"></i></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon btn-sm mb-1 mr-1 btn-outline-github"><i
|
||||
class="la la-github"></i></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon btn-xs mb-1 mr-1 btn-outline-github"><i
|
||||
class="la la-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12 mb-1 social-buttons">
|
||||
<div class="form-group">
|
||||
<!-- Social Outline block Buttons sizes -->
|
||||
<a [routerLink]="" class="btn btn-social mb-1 btn-block btn-lg btn-outline-pinterest"><span
|
||||
class="la la-pinterest-p"></span> Sign in with Pinterest</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 btn-block btn-outline-pinterest"><span
|
||||
class="la la-pinterest-p"></span> Sign in with Pinterest</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 btn-block btn-sm btn-outline-pinterest"><span
|
||||
class="la la-pinterest-p"></span> Sign in with Pinterest</a>
|
||||
<a [routerLink]="" class="btn btn-social mb-1 btn-block btn-xs btn-outline-pinterest"><span
|
||||
class="la la-pinterest-p"></span> Sign in with Pinterest</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Social Media Outline Buttons Size end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { ExtendedButtonsComponent } from './extended-buttons.component';
|
||||
|
||||
describe('ExtendedButtonsComponent', () => {
|
||||
let component: ExtendedButtonsComponent;
|
||||
let fixture: ComponentFixture<ExtendedButtonsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ExtendedButtonsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ExtendedButtonsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,62 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-extended-buttons',
|
||||
templateUrl: './extended-buttons.component.html',
|
||||
styleUrls: ['./extended-buttons.component.css']
|
||||
})
|
||||
export class ExtendedButtonsComponent implements OnInit {
|
||||
|
||||
@BlockUI('floatingButtons') blockUIFloatingButtons: NgBlockUI;
|
||||
@BlockUI('floatingOutlineButtons') blockUIFloatingOutlineButtons: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Buttons Extended',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Buttons Extended',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadFloatingButtons() {
|
||||
this.blockUIFloatingButtons.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIFloatingButtons.stop();
|
||||
}, 2500);
|
||||
}
|
||||
reloadFloatingOutlineButtons() {
|
||||
this.blockUIFloatingOutlineButtons.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIFloatingOutlineButtons.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
:host ::ng-deep .list-group-item {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
:host ::ng-deep hr {
|
||||
height: 0px !important;
|
||||
}
|
||||
@@ -0,0 +1,533 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Basic ListGroups start -->
|
||||
<section id="basic-listgroup">
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12" *blockUI="'simpleListGroup'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadSimpleListGroup($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Simple ListGroup
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>The most basic list group is simply an unordered list with list items, and the proper classes.
|
||||
Build upon it with the options that follow, or your own CSS as needed.</p>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
</ul>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12" *blockUI="'disabledItems'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadDisabledItems($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Disabled items
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear disabled.</p>
|
||||
<div class="list-group">
|
||||
<a [routerLink]="" class="list-group-item disabled">Cras justo odio</a>
|
||||
<a [routerLink]="" class="list-group-item">Dapibus ac facilisis in</a>
|
||||
<a [routerLink]="" class="list-group-item">Morbi leo risus</a>
|
||||
<a [routerLink]="" class="list-group-item">Porta ac consectetur ac</a>
|
||||
<a [routerLink]="" class="list-group-item">Vestibulum at eros</a>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Basic ListGroups end -->
|
||||
|
||||
<!-- With Labels and Badges start -->
|
||||
<section id="using-labels-badges">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4>With Labels and Badges</h4>
|
||||
<hr>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12" *blockUI="'badges'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadBadges($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Badges
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>Add bagdes to any list group item to show unread counts, activity, etc.</p>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-primary badge-pill float-right">5</span>
|
||||
Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-success badge-pill float-right">2</span>
|
||||
Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-danger badge-pill float-right">1</span>
|
||||
Morbi leo risus
|
||||
</li>
|
||||
</ul>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12" *blockUI="'labels'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadLabels($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Labels
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>Add labels to any list group item to show notifications, message,etc.</p>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-warning float-right">Warning</span>
|
||||
Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-info float-right">info</span>
|
||||
Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="badge badge-danger float-right">danger</span>
|
||||
Morbi leo risus
|
||||
</li>
|
||||
</ul>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- With Labels and Badges end -->
|
||||
|
||||
<!-- With Icons start -->
|
||||
<section id="checkbox-input-group">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">With Icons</h4>
|
||||
<p>Left Icons and Right Icons need icon class before and after text of list group.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Left Icons</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<span class="float-left">
|
||||
<i class="la la-star-o mr-1"></i>
|
||||
</span>
|
||||
Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="float-left">
|
||||
<i class="la la-envelope-o mr-1"></i>
|
||||
</span>
|
||||
Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="float-left">
|
||||
<i class="la la-heart-o mr-1"></i>
|
||||
</span>
|
||||
Morbi leo risus
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Right Icons</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<span class="float-right">
|
||||
<i class="la la-sun-o"></i>
|
||||
</span>
|
||||
Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="float-right">
|
||||
<i class="la la-moon-o"></i>
|
||||
</span>
|
||||
Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="float-right">
|
||||
<i class="la la-cloud"></i>
|
||||
</span>
|
||||
Morbi leo risus
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- With Icons end -->
|
||||
|
||||
|
||||
|
||||
<!-- With Background Color Option start -->
|
||||
<section id="with-back-color">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">With Background Color Option</h4>
|
||||
<p>Use class <code>.bg-COLOR</code> for background color.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Blue Grey Background Color</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item bg-blue-grey white">
|
||||
Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item bg-blue-grey white">
|
||||
Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item bg-blue-grey white">
|
||||
Morbi leo risus
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Grey Background with Right Icons</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item bg-pink white">
|
||||
<span class="float-right">
|
||||
<i class="la la-bell-o"></i>
|
||||
</span>
|
||||
Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item bg-pink white">
|
||||
<span class="float-right">
|
||||
<i class="la la-comment-o"></i>
|
||||
</span>
|
||||
Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item bg-pink white">
|
||||
<span class="float-right">
|
||||
<i class="la la-heart-o"></i>
|
||||
</span>
|
||||
Morbi leo risus
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- With Background Color Option end -->
|
||||
|
||||
|
||||
|
||||
<!-- Anchors and buttons start -->
|
||||
<section id="anchors-n-buttons">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Anchors and buttons</h4>
|
||||
<p>Use anchors or buttons to create actionable list group items with hover, disabled, and active states by
|
||||
adding .list-group-item-action. This separate class contains a few overrides to add compatibility for
|
||||
<code><a></code>s and <code><button></code>s, as well as the hover and focus states.</p>
|
||||
<div class="alert alert-primary">Be sure to <strong>not use</strong> the standard <strong>.btn</strong>
|
||||
classes here.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Anchors</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="list-group">
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action active">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Buttons</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="list-group">
|
||||
<button type="button" class="list-group-item list-group-item-action active">
|
||||
Cras justo odio
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis
|
||||
in</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur
|
||||
ac</button>
|
||||
<button type="button" class="list-group-item list-group-item-action disabled">Vestibulum at
|
||||
eros</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Anchors and buttons end -->
|
||||
<!-- Custom Listgroups start -->
|
||||
<section id="custom-listgroup">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Custom ListGroups</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card" style="height: 545px;">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Contextual classes</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>Use contextual classes to style list items, default or linked. Also includes .active state.</p>
|
||||
<div class="list-group">
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis
|
||||
in</a>
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh
|
||||
libero</a>
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur
|
||||
ac</a>
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Custom content</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>Add nearly any HTML within, even for linked list groups like the one below.</p>
|
||||
<div class="list-group">
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action flex-column align-items-start active">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="text-bold-600 white">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
|
||||
blandit.</p>
|
||||
<small>Donec id elit non mi porta.</small>
|
||||
</a>
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="text-bold-600">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
|
||||
blandit.</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</a>
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="text-bold-600">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
|
||||
blandit.</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Custom Listgroups end -->
|
||||
|
||||
<!-- ListGroups with Media start -->
|
||||
<section id="listgroup-with-media">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4>ListGroups with Media</h4>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Media On Left</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media-list list-group">
|
||||
<div class="list-group-item list-group-item-action media">
|
||||
<a class="media-link" [routerLink]="">
|
||||
<span class="media-left">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../assets/images/portrait/small/avatar-s-11.png" alt="Generic placeholder image"
|
||||
style="width: 48px;height: 48px;">
|
||||
</span>
|
||||
<span class="media-body">
|
||||
Dapibus ac facilisis in
|
||||
<br>
|
||||
<span class="grey">CEO</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list-group-item list-group-item-action media">
|
||||
<a class="media-link" [routerLink]="">
|
||||
<span class="media-left">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../assets/images/portrait/small/avatar-s-14.png" alt="Generic placeholder image"
|
||||
style="width: 48px;height: 48px;">
|
||||
</span>
|
||||
<span class="media-body">
|
||||
Cras sit amet nibh libero
|
||||
<br>
|
||||
<span class="grey">PM</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list-group-item list-group-item-action media">
|
||||
<a class="media-link" [routerLink]="">
|
||||
<span class="media-left">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../assets/images/portrait/small/avatar-s-3.png" alt="Generic placeholder image"
|
||||
style="width: 48px;height: 48px;">
|
||||
</span>
|
||||
<span class="media-body">
|
||||
Porta ac consectetur ac
|
||||
<br>
|
||||
<span class="grey">CS</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list-group-item list-group-item-action media">
|
||||
<a class="media-link" [routerLink]="">
|
||||
<span class="media-left">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../assets/images/portrait/small/avatar-s-17.png" alt="Generic placeholder image"
|
||||
style="width: 48px;height: 48px;">
|
||||
</span>
|
||||
<span class="media-body">
|
||||
Vestibulum at eros
|
||||
<br>
|
||||
<span class="grey">MD</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Media with Custom content</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media-list list-group">
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action media active">
|
||||
<div class="media-left">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../assets/images/portrait/small/avatar-s-7.png" alt="Generic placeholder image"
|
||||
style="width: 48px;height: 48px;">
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h5 class="list-group-item-heading white">List group item heading</h5>
|
||||
<span class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.</span>
|
||||
</div>
|
||||
</a>
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action media">
|
||||
<div class="media-left">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../assets/images/portrait/small/avatar-s-16.png" alt="Generic placeholder image"
|
||||
style="width: 48px;height: 48px;">
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h5 class="list-group-item-heading">List group item heading</h5>
|
||||
<span class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.</span>
|
||||
</div>
|
||||
</a>
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action media">
|
||||
<div class="media-left">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../assets/images/portrait/small/avatar-s-12.png" alt="Generic placeholder image"
|
||||
style="width: 48px;height: 48px;">
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h5 class="list-group-item-heading">List group item heading</h5>
|
||||
<span class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.</span>
|
||||
</div>
|
||||
</a>
|
||||
<a [routerLink]="" class="list-group-item list-group-item-action media">
|
||||
<div class="media-left">
|
||||
<img class="media-object rounded-circle"
|
||||
src="../../../assets/images/portrait/small/avatar-s-9.png" alt="Generic placeholder image"
|
||||
style="width: 48px;height: 48px;">
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h5 class="list-group-item-heading">List group item heading</h5>
|
||||
<span class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ListGroups with Media end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { ListGroupComponent } from './list-group.component';
|
||||
|
||||
describe('ListGroupComponent', () => {
|
||||
let component: ListGroupComponent;
|
||||
let fixture: ComponentFixture<ListGroupComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ListGroupComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ListGroupComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,80 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-list-group',
|
||||
templateUrl: './list-group.component.html',
|
||||
styleUrls: ['./list-group.component.css']
|
||||
})
|
||||
export class ListGroupComponent implements OnInit {
|
||||
|
||||
@BlockUI('simpleListGroup') blockUISimpleListGroup: NgBlockUI;
|
||||
@BlockUI('disabledItems') blockUIDisabledItems: NgBlockUI;
|
||||
@BlockUI('badges') blockUIBadges: NgBlockUI;
|
||||
@BlockUI('labels') blockUILabels: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'List Group',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'List Group',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadSimpleListGroup() {
|
||||
this.blockUISimpleListGroup.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUISimpleListGroup.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadDisabledItems() {
|
||||
this.blockUIDisabledItems.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIDisabledItems.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadBadges() {
|
||||
this.blockUIBadges.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIBadges.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadLabels() {
|
||||
this.blockUILabels.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUILabels.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { MediaobjectsComponent } from './mediaobjects.component';
|
||||
|
||||
describe('MediaobjectsComponent', () => {
|
||||
let component: MediaobjectsComponent;
|
||||
let fixture: ComponentFixture<MediaobjectsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MediaobjectsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MediaobjectsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,62 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-mediaobjects',
|
||||
templateUrl: './mediaobjects.component.html',
|
||||
styleUrls: ['./mediaobjects.component.css']
|
||||
})
|
||||
|
||||
export class MediaobjectsComponent implements OnInit {
|
||||
|
||||
@BlockUI('leftAlignedMediaObjects') blockUILeftAlignedMediaObjects: NgBlockUI;
|
||||
@BlockUI('leftMediaWithRightText') blockUILeftMediaWithRightText: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Media Objects',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Media Objects',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadLeftAlignedMediaObjects() {
|
||||
this.blockUILeftAlignedMediaObjects.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUILeftAlignedMediaObjects.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadLeftMediaWithRightText() {
|
||||
this.blockUILeftMediaWithRightText.start('Loading..');
|
||||
setTimeout(() => {
|
||||
this.blockUILeftMediaWithRightText.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
10
src/app/content/ngbbootstrap/modals/modals.component.css
Normal file
10
src/app/content/ngbbootstrap/modals/modals.component.css
Normal file
@@ -0,0 +1,10 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
|
||||
outline: none !important;
|
||||
}
|
||||
::ng-deep ngb-modal-backdrop {
|
||||
z-index: 1050 !important;
|
||||
}
|
||||
3197
src/app/content/ngbbootstrap/modals/modals.component.html
Normal file
3197
src/app/content/ngbbootstrap/modals/modals.component.html
Normal file
File diff suppressed because it is too large
Load Diff
25
src/app/content/ngbbootstrap/modals/modals.component.spec.ts
Normal file
25
src/app/content/ngbbootstrap/modals/modals.component.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { ModalsComponent } from './modals.component';
|
||||
|
||||
describe('ModalsComponent', () => {
|
||||
let component: ModalsComponent;
|
||||
let fixture: ComponentFixture<ModalsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ModalsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ModalsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
266
src/app/content/ngbbootstrap/modals/modals.component.ts
Normal file
266
src/app/content/ngbbootstrap/modals/modals.component.ts
Normal file
@@ -0,0 +1,266 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-modals',
|
||||
templateUrl: './modals.component.html',
|
||||
styleUrls: ['./modals.component.css']
|
||||
})
|
||||
export class ModalsComponent implements OnInit {
|
||||
|
||||
@BlockUI('basicModals') blockUIBasicModals: NgBlockUI;
|
||||
@BlockUI('modalThemes') blockUIModalThemes: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
constructor(private modalService: NgbModal) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Modal',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Modal',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
openDefaultModel(DefaultModelContent) {
|
||||
this.modalService.open(DefaultModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
openModelIcon(modalIconContent) {
|
||||
this.modalService.open(modalIconContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
openDisableKeyboard(disableKeyboardContent) {
|
||||
this.modalService.open(disableKeyboardContent, { windowClass: 'animated fadeInDown', keyboard: false });
|
||||
}
|
||||
openDisableBackDrop(DisableBackDropContent) {
|
||||
this.modalService.open(DisableBackDropContent, { windowClass: 'animated fadeInDown', backdrop: 'static' });
|
||||
}
|
||||
OpenShowModel(OpenShowModelContent) {
|
||||
this.modalService.open(OpenShowModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
OpenDisableAnimation(DisableAnimationContent) {
|
||||
this.modalService.open(DisableAnimationContent);
|
||||
}
|
||||
PrimaryModel(PrimaryModelContent) {
|
||||
this.modalService.open(PrimaryModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
SuccessModel(SuccessModelContent) {
|
||||
this.modalService.open(SuccessModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
DangerModel(DangerModelContent) {
|
||||
this.modalService.open(DangerModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
InfoModel(InfoModelContent) {
|
||||
this.modalService.open(InfoModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
WarningModel(WarningModelContent) {
|
||||
this.modalService.open(WarningModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
BorderModel(BorderModelContent) {
|
||||
this.modalService.open(BorderModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
SmallModel(SmallModelContent) {
|
||||
this.modalService.open(SmallModelContent, { windowClass: 'animated fadeInDown', size: 'sm' });
|
||||
}
|
||||
DefaultSizeModel(DefaultSizeModelContent) {
|
||||
this.modalService.open(DefaultSizeModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
LargeModel(LargeModelContent) {
|
||||
this.modalService.open(LargeModelContent, { windowClass: 'animated fadeInDown', size: 'lg' });
|
||||
}
|
||||
openDefaultHeadingModel(DefaultHeadingModelContent) {
|
||||
this.modalService.open(DefaultHeadingModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
openSubtitleModel(SubtitleModelContent) {
|
||||
this.modalService.open(SubtitleModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
openH1Model(H1ModelContent) {
|
||||
this.modalService.open(H1ModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
openH2Model(H2ModelContent) {
|
||||
this.modalService.open(H2ModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
openH3Model(H3ModelContent) {
|
||||
this.modalService.open(H3ModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
openH4Model(H4ModelContent) {
|
||||
this.modalService.open(H4ModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
openH5Model(H5ModelContent) {
|
||||
this.modalService.open(H5ModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
openH6Model(H6ModelContent) {
|
||||
this.modalService.open(H6ModelContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
openLoginForm(LoginFormContent) {
|
||||
this.modalService.open(LoginFormContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
openLoginFormIcon(LoginFormIconContent) {
|
||||
this.modalService.open(LoginFormIconContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
openBootstrapInputForm(BootstrapInputFormContent) {
|
||||
this.modalService.open(BootstrapInputFormContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
openBounceAnimation(BounceContent) {
|
||||
this.modalService.open(BounceContent, { windowClass: 'animated bounce' });
|
||||
}
|
||||
openFlashAnimation(FlashContent) {
|
||||
this.modalService.open(FlashContent, { windowClass: 'animated flash' });
|
||||
}
|
||||
openPulseAnimation(PulseContent) {
|
||||
this.modalService.open(PulseContent, { windowClass: 'animated pulse' });
|
||||
}
|
||||
openRubberBandAnimation(RubberBandContent) {
|
||||
this.modalService.open(RubberBandContent, { windowClass: 'animated rubberBand' });
|
||||
}
|
||||
openShakeAnimation(ShakeContent) {
|
||||
this.modalService.open(ShakeContent, { windowClass: 'animated shake' });
|
||||
}
|
||||
openRollInAnimation(RollInContent) {
|
||||
this.modalService.open(RollInContent, { windowClass: 'animated rollIn' });
|
||||
}
|
||||
openSwingAnimation(SwingContent) {
|
||||
this.modalService.open(SwingContent, { windowClass: 'animated swing' });
|
||||
}
|
||||
openTadaAnimation(TadaContent) {
|
||||
this.modalService.open(TadaContent, { windowClass: 'animated tada' });
|
||||
}
|
||||
openWobbleAnimation(WobbleContent) {
|
||||
this.modalService.open(WobbleContent, { windowClass: 'animated wobble' });
|
||||
}
|
||||
openJelloAnimation(JelloContent) {
|
||||
this.modalService.open(JelloContent, { windowClass: 'animated jello' });
|
||||
}
|
||||
BounceInAnimation(BounceInContent) {
|
||||
this.modalService.open(BounceInContent, { windowClass: 'animated bounceIn' });
|
||||
}
|
||||
BounceInDownAnimation(BounceInDownContent) {
|
||||
this.modalService.open(BounceInDownContent, { windowClass: 'animated bounceInDown' });
|
||||
}
|
||||
BounceInLeftAnimation(BounceInLeftContent) {
|
||||
this.modalService.open(BounceInLeftContent, { windowClass: 'animated bounceInLeft' });
|
||||
}
|
||||
BounceInRightAnimation(BounceInRightContent) {
|
||||
this.modalService.open(BounceInRightContent, { windowClass: 'animated bounceInRight' });
|
||||
}
|
||||
BounceInUpAnimation(BounceInUpContent) {
|
||||
this.modalService.open(BounceInUpContent, { windowClass: 'animated bounceInUp' });
|
||||
}
|
||||
FadeInAnimation(FadeInContent) {
|
||||
this.modalService.open(FadeInContent, { windowClass: 'animated FadeIn' });
|
||||
}
|
||||
FadeInDownAnimation(FadeInDownContent) {
|
||||
this.modalService.open(FadeInDownContent, { windowClass: 'animated fadeInDown' });
|
||||
}
|
||||
FadeInDownBigAnimation(FadeInDownBigContent) {
|
||||
this.modalService.open(FadeInDownBigContent, { windowClass: 'animated fadeInDownBig' });
|
||||
}
|
||||
FadeInLeftAnimation(FadeInLeftContent) {
|
||||
this.modalService.open(FadeInLeftContent, { windowClass: 'animated fadeInLeft' });
|
||||
}
|
||||
FadeInLeftBigAnimation(FadeInLeftBigContent) {
|
||||
this.modalService.open(FadeInLeftBigContent, { windowClass: 'animated fadeInLeftBig' });
|
||||
}
|
||||
FadeInRightAnimation(FadeInRightContent) {
|
||||
this.modalService.open(FadeInRightContent, { windowClass: 'animated fadeInRight' });
|
||||
}
|
||||
FadeInRightBigAnimation(FadeInRightBigContent) {
|
||||
this.modalService.open(FadeInRightBigContent, { windowClass: 'animated fadeInRightBig' });
|
||||
}
|
||||
FadeInUpAnimation(FadeInUpContent) {
|
||||
this.modalService.open(FadeInUpContent, { windowClass: 'animated fadeInUp' });
|
||||
}
|
||||
FadeInUpBigAnimation(FadeInUpBigContent) {
|
||||
this.modalService.open(FadeInUpBigContent, { windowClass: 'animated fadeInUpBig' });
|
||||
}
|
||||
FlipInXAnimation(FlipInXContent) {
|
||||
this.modalService.open(FlipInXContent, { windowClass: 'animated flipInX' });
|
||||
}
|
||||
FlipInYAnimation(FlipInYContent) {
|
||||
this.modalService.open(FlipInYContent, { windowClass: 'animated flipInY' });
|
||||
}
|
||||
LightSpeedInAnimation(LightSpeedInContent) {
|
||||
this.modalService.open(LightSpeedInContent, { windowClass: 'animated lightSpeedIn' });
|
||||
}
|
||||
RotateInAnimation(RotateInContent) {
|
||||
this.modalService.open(RotateInContent, { windowClass: 'animated rotateIn' });
|
||||
}
|
||||
RotateInDownLeftAnimation(RotateInDownLeftContent) {
|
||||
this.modalService.open(RotateInDownLeftContent, { windowClass: 'animated rotateInDownLeft' });
|
||||
}
|
||||
RotateInDownRightAnimation(RotateInDownRightContent) {
|
||||
this.modalService.open(RotateInDownRightContent, { windowClass: 'animated rotateInDownRight' });
|
||||
}
|
||||
RotateInUpLeftAnimation(RotateInUpLeftContent) {
|
||||
this.modalService.open(RotateInUpLeftContent, { windowClass: 'animated rotateInUpLeft' });
|
||||
}
|
||||
RotateInUpRightAnimation(RotateInUpRightContent) {
|
||||
this.modalService.open(RotateInUpRightContent, { windowClass: 'animated rotateInUpRight' });
|
||||
}
|
||||
ZoomInAnimation(ZoomInContent) {
|
||||
this.modalService.open(ZoomInContent, { windowClass: 'animated zoomIn' });
|
||||
}
|
||||
ZoomInDownAnimation(ZoomInDownContent) {
|
||||
this.modalService.open(ZoomInDownContent, { windowClass: 'animated zoomInDown' });
|
||||
}
|
||||
ZoomInLeftAnimation(ZoomInLeftContent) {
|
||||
this.modalService.open(ZoomInLeftContent, { windowClass: 'animated zoomInLeft' });
|
||||
}
|
||||
ZoomInRightAnimation(ZoomInRightContent) {
|
||||
this.modalService.open(ZoomInRightContent, { windowClass: 'animated zoomInRight' });
|
||||
}
|
||||
zoomInUpAnimation(zoomInUpContent) {
|
||||
this.modalService.open(zoomInUpContent, { windowClass: 'animated zoomInUp' });
|
||||
}
|
||||
slideInUpAnimation(slideInUpContent) {
|
||||
this.modalService.open(slideInUpContent, { windowClass: 'animated slideInUp' });
|
||||
}
|
||||
SlideInLeftAnimation(SlideInLeftContent) {
|
||||
this.modalService.open(SlideInLeftContent, { windowClass: 'animated slideInLeft' });
|
||||
}
|
||||
SlideInRightAnimation(SlideInRightContent) {
|
||||
this.modalService.open(SlideInRightContent, { windowClass: 'animated slideInRight' });
|
||||
}
|
||||
SlideInDownAnimation(SlideInDownContent) {
|
||||
this.modalService.open(SlideInDownContent, { windowClass: 'animated slideInDown' });
|
||||
}
|
||||
|
||||
reloadBasicModals() {
|
||||
this.blockUIBasicModals.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIBasicModals.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadModalThemes() {
|
||||
this.blockUIModalThemes.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIModalThemes.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
573
src/app/content/ngbbootstrap/navs/navs.component.html
Normal file
573
src/app/content/ngbbootstrap/navs/navs.component.html
Normal file
@@ -0,0 +1,573 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Basic Navs start -->
|
||||
<section id="basic-nav-components">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt-1">
|
||||
<p>If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical
|
||||
parent container of the <code><ul>,</code> or wrap a <code><nav></code> element around the
|
||||
whole navigation.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Base nav</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column mb-1">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Roll your own navigation style by extending the base <code>.nav</code> component. All Bootstrap’s
|
||||
nav components are built on top of this by specifying additional styles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Nav with Border</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border mb-1">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>To wrap with border, use <code>.wrap-border</code> class.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Nav with Square Border</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border square-border mb-1">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>To wrap with square border, use <code>.square-border</code> class with <code>.wrap-border</code>
|
||||
class.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Nav with Divider</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border mb-1">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>To add divider, use <code>.dropdown-divider</code> class to <code><li></code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Basic Navs end -->
|
||||
|
||||
|
||||
<!-- Nav with Header Options start -->
|
||||
<section id="nav-with-header-options">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Navs with header Options</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Nav with Header</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border mb-1">
|
||||
<li class="nav-header">Heading Option 1</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="nav-header">Heading Option 2</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>To add header to nav, use <code>.nav-header</code> class.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Heading with Icon</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border mb-1">
|
||||
<li class="nav-header"><i class="la la-bars mr-1"></i> Heading Option 1</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="nav-header"><i class="la la-bars mr-1"></i> Heading Option 2</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>You can also add icon to the text in header section.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Heading with Right Icon</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border mb-1">
|
||||
<li class="nav-header mt-1">Heading Option 1 <i class="la la-bell-o float-right mr-1"></i></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="nav-header">Heading Option 2 <i class="la la-eye mr-1 float-right"></i></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>You can add icon to right side of the text by using <code>.float-right</code> class.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Heading Icon both the side</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border mb-1">
|
||||
<li class="nav-header mt-1"><i class="la la-bars mr-1"></i> Heading Option 1 <i
|
||||
class="la la-bell-o float-right mr-1"></i></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="nav-header"><i class="la la-bars mr-1"></i> Heading Option 2 <i
|
||||
class="la la-eye mr-1 float-right"></i></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>You can also add icon to both sides of the text in header section.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Nav with Header Options end -->
|
||||
|
||||
|
||||
<!-- Links with Icons start -->
|
||||
<section id="links-with-icons">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Links with Icons</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Icon on left</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border mb-1">
|
||||
<li class="nav-header">Heading Option 1</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active"><i class="la la-angle-double-right"></i> Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><i class="la la-angle-double-right"></i> Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><i class="la la-angle-double-right"></i> Link</a>
|
||||
</li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="nav-header">Heading Option 2</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><i class="la la-angle-double-right"></i> Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Use icon name class to set icons.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Icon on Right</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border mb-1">
|
||||
<li class="nav-header">Heading Option 1</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active"><i class="la la-eye float-right"></i>Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><i class="la la-eye float-right"></i>Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><i class="la la-eye float-right"></i>Link</a>
|
||||
</li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="nav-header">Heading Option 2 </li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><i class="la la-eye float-right"></i>Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>To set icons to right use <code>.float-right</code> class.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Icon on both side of links</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border mb-1">
|
||||
<li class="nav-header">Heading Option 1</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active"><i class="la la-angle-double-right"></i><i
|
||||
class="la la-eye float-right"></i> Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><i class="la la-angle-double-right"></i><i class="la la-eye float-right"></i>
|
||||
Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><i class="la la-angle-double-right"></i><i class="la la-eye float-right"></i>
|
||||
Link</a>
|
||||
</li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="nav-header">Heading Option 2 </li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><i class="la la-angle-double-right"></i><i class="la la-eye float-right"></i>
|
||||
Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">With Header and list Icons</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border mb-1">
|
||||
<li class="nav-header"> <i class="la la-disc2"></i> Heading Option 1</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active"><i class="la la-caret-right"></i><i
|
||||
class="la la-heart6 float-right"></i> Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><i class="la la-caret-right"></i><i class="la la-heart6 float-right"></i>
|
||||
Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><i class="la la-caret-right"></i><i class="la la-heart6 float-right"></i>
|
||||
Link</a>
|
||||
</li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="nav-header"><i class="la la-disc2"></i> Heading Option 2 </li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><i class="la la-caret-right"></i><i class="la la-heart6 float-right"></i>
|
||||
Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Links with Icons end -->
|
||||
|
||||
<!-- Navs with Labels & Label pills start -->
|
||||
<section id="navs-labels-pills">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-1">
|
||||
<h4>Navs with Labels & Label pills</h4>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">With Label</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border mb-1">
|
||||
<li class="nav-header">
|
||||
<span class="badge badge-default badge-success">New</span> Heading Option 1
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="nav-header">Heading Option 2 <span
|
||||
class="badge badge-default badge-warning float-right">beware</span></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>To add label to nav, use <code>.badge.badge-COLOR</code> classes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">With Label Pills</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border mb-1">
|
||||
<li class="nav-header">
|
||||
<span class="badge badge-pill badge-default badge-danger badge-glow">5</span> Heading Option 1
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="nav-header">Heading Option 2 <span
|
||||
class="badge badge-pill badge-default badge-info badge-glow float-right">1</span></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>To add label pill to nav, use <code>.badge.badge-pill.badge-COLOR</code> classes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">With Label for links</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border mb-1">
|
||||
<li class="nav-header">
|
||||
<i class="feather ft-disc"></i>
|
||||
<span class="badge badge-default badge-success float-right">New</span> Heading Option 1
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active">Active <span
|
||||
class="badge badge-pill badge-default badge-danger float-right badge-glow">2</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link <span
|
||||
class="badge badge-pill badge-default badge-danger float-right badge-glow">1</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link <span
|
||||
class="badge badge-pill badge-default badge-danger float-right badge-glow">3</span></a>
|
||||
</li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="nav-header"><i class="feather ft-disc"></i> Heading Option 2 <span
|
||||
class="badge badge-default badge-info float-right">Info</span></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link <span
|
||||
class="badge badge-pill badge-default badge-warning float-right badge-glow">4</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link <span
|
||||
class="badge badge-pill badge-default badge-warning float-right badge-glow">2</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">With Label Pills for links</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column wrap-border mb-1">
|
||||
<li class="nav-header">
|
||||
<i class="feather ft-disc"></i>
|
||||
<span class="float-right">Notifications
|
||||
</span>
|
||||
Heading Option 1
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active">Active
|
||||
<span class="badge badge-pill badge-glow badge-default badge-warning float-right">2</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link
|
||||
<span class="badge badge-default badge-info badge-pill badge-glow float-right">4</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link
|
||||
<span class="badge badge-default badge-success badge-pill badge-glow float-right">1</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="nav-header">
|
||||
<i class="feather ft-disc"></i>
|
||||
Heading Option 2
|
||||
<span class="float-right">
|
||||
Available
|
||||
</span>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link
|
||||
<span class="badge badge-default badge-danger float-right">Offline</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link">Link <span
|
||||
class="badge badge-default badge-success float-right">Online</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Navs with Labels & Label pills end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
25
src/app/content/ngbbootstrap/navs/navs.component.spec.ts
Normal file
25
src/app/content/ngbbootstrap/navs/navs.component.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { NavsComponent } from './navs.component';
|
||||
|
||||
describe('NavsComponent', () => {
|
||||
let component: NavsComponent;
|
||||
let fixture: ComponentFixture<NavsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NavsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NavsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
37
src/app/content/ngbbootstrap/navs/navs.component.ts
Normal file
37
src/app/content/ngbbootstrap/navs/navs.component.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-navs',
|
||||
templateUrl: './navs.component.html',
|
||||
styleUrls: ['./navs.component.css']
|
||||
})
|
||||
export class NavsComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Navs',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Navs',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
:host ::ng-deep .round-pagination .page-item:first-child .page-link {
|
||||
border-top-left-radius: 1.25rem !important;
|
||||
border-bottom-left-radius: 1.25rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .round-pagination .page-item:last-child .page-link {
|
||||
border-top-right-radius: 1.25rem !important;
|
||||
border-bottom-right-radius: 1.25rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
@@ -0,0 +1,365 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Basic Pagination start -->
|
||||
<section id="basic-pagination">
|
||||
<div class="row">
|
||||
<div class="col-md-12" *blockUI="'defaultPagination'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadDefaultPagination($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Default Pagination
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>Provide pagination links for your site or app with the multi-page pagination component.</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Basic Pagination</h5>
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center">
|
||||
<ngb-pagination [collectionSize]="50" [directionLinks]="false"></ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="text-center mb-3">Default pagination without next previous.</p>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Pagination with Next/Prev Arrows</h5>
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center">
|
||||
<div class="first">
|
||||
<ngb-pagination [collectionSize]="50" aria-label="Default pagination">
|
||||
</ngb-pagination>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="text-center mb-3">Default pagination with next previous icons.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Separated Pagination with Next/Prev Arrows</h5>
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center pagination-separate ">
|
||||
<ngb-pagination [collectionSize]="50" aria-label="Default pagination"></ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="text-center mb-3">For Separated pagination, use class
|
||||
<code>.pagination-separate</code>
|
||||
with Next Previous Icons.</p>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Flat Pagination</h5>
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center pagination-separate pagination-flat">
|
||||
<ngb-pagination [collectionSize]="50" [directionLinks]="false"></ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="text-center mb-3">Flat pagination need class <code>.pagination-flat</code> to
|
||||
<code>.pagination</code> class.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class ="row">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Flat Pagination with Next/Prev Arrows</h5>
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center pagination-separate pagination-flat">
|
||||
<ngb-pagination [collectionSize]="50" aria-label="Default pagination"></ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="text-center mb-3">Flat pagination need class <code>.pagination-flat</code> to
|
||||
<code>.pagination</code> class.</p>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">With boundary link</h5>
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center pagination-separate pagination-flat">
|
||||
<ngb-pagination [collectionSize]="70" [(page)]="page" [boundaryLinks]="true"></ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="text-center mb-3">Flat pagination need class <code>.pagination-flat</code> to
|
||||
<code>.pagination</code> class.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Basic Pagination end -->
|
||||
|
||||
<!-- Pagination Round Style start -->
|
||||
<section id="round-pagination">
|
||||
<div class="row">
|
||||
<div class="col-md-12" *blockUI="'paginationRoundStyle'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadPaginationRoundStyle($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Pagination Round Style
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Round Pagination</h5>
|
||||
<div class="text-center mb-3">
|
||||
<ul class="pagination justify-content-center round-pagination">
|
||||
<ngb-pagination [collectionSize]="50" [directionLinks]="false"></ngb-pagination>
|
||||
</ul>
|
||||
<p>Round Style pagination use <code>.round-pagination</code> to <code>.pagination</code>
|
||||
class.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Round Style Pagination with Next/Prev Arrows</h5>
|
||||
<div class="text-center mb-3">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center round-pagination">
|
||||
<ngb-pagination [collectionSize]="50" aria-label="Default pagination">
|
||||
</ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Round Style pagination use <code>.round-pagination</code> to <code>.pagination</code>
|
||||
class
|
||||
with Previous Next Icons.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Separated Round Styled Pagination</h5>
|
||||
<div class="text-center mb-3">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul
|
||||
class="pagination justify-content-center pagination-separate round-pagination">
|
||||
<ngb-pagination [collectionSize]="50" [directionLinks]="false"></ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Separated Round Style pagination use <code>.round-pagination</code> &
|
||||
<code>.pagination-separate</code> to <code>.pagination</code> class.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Separated Round Styled Pagination with Next/Prev Arrows</h5>
|
||||
<div class="text-center mb-3">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul
|
||||
class="pagination justify-content-center pagination-separate round-pagination">
|
||||
<ngb-pagination [collectionSize]="50" aria-label="Default pagination">
|
||||
</ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Separated Round Style pagination use <code>.round-pagination</code> &
|
||||
<code>.pagination-separate</code> to <code>.pagination</code> class with Previous Next
|
||||
Icons.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Separated Flat Round Styled Pagination</h5>
|
||||
<div class="text-center mb-3">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul
|
||||
class="pagination justify-content-center pagination-separate pagination-round pagination-flat">
|
||||
<ngb-pagination [collectionSize]="50" [directionLinks]="false"></ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Separated Flat Round Styled pagination need class <code>.pagination-flat</code> with
|
||||
round and
|
||||
separated styled classes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Separated Flat Round Styled Pagination with Next/Prev Arrows</h5>
|
||||
<div class="text-center mb-3">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul
|
||||
class="pagination justify-content-center pagination-separate pagination-round pagination-flat">
|
||||
<ngb-pagination [collectionSize]="50" aria-label="Default pagination">
|
||||
</ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Separated Flat Round Styled pagination need class <code>.pagination-flat</code> with
|
||||
round and
|
||||
separated styled classes & previous next icons.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Curved Pagination Border Style start -->
|
||||
<section id="curved-border-pagination">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Curved Pagination Border Style</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Separated Curve Styled Pagination</h5>
|
||||
<div class="text-center mb-3">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center pagination-separate pagination-curved">
|
||||
<ngb-pagination [collectionSize]="50" [directionLinks]="false"></ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Separated Curved pagination need class <code>.pagination-curved</code> with separated class.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Separated Curved Styled Pagination with Next/Prev Arrows</h5>
|
||||
<div class="text-center mb-3">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center pagination-separate pagination-curved">
|
||||
<ngb-pagination [collectionSize]="50" aria-label="Default pagination"></ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Separated Curved pagination need class <code>.pagination-curved</code> with separated class
|
||||
& Previous Next Icons.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Saperated Curved Flat Styled Pagination</h5>
|
||||
<div class="text-center mb-3">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul
|
||||
class="pagination justify-content-center pagination-separate pagination-curved pagination-flat">
|
||||
<ngb-pagination [collectionSize]="50" [directionLinks]="false"></ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Saperated Curved Flat pagination need class <code>.pagination-flat</code> with
|
||||
<code>.pagination-separate.pagination-curved</code> classes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h5 class="text-center">Saperated Curved Flat Styled Pagination with Next/Prev Arrows</h5>
|
||||
<div class="text-center mb-3">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul
|
||||
class="pagination justify-content-center pagination-separate pagination-curved pagination-flat">
|
||||
<ngb-pagination [collectionSize]="50" aria-label="Default pagination"></ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>Saperated Curved Flat pagination need class <code>.pagination-flat</code> with
|
||||
<code>.pagination-separate.pagination-curved</code> classes with Previous Next Icons.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Border Style end -->
|
||||
|
||||
<!-- Pagination Positions start -->
|
||||
<section id="pagination-positions">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Pagination Positions</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>Use wrapper classes for pagination. To align left, use class <code>.justify-content-start</code>.
|
||||
To align center, use class <code>.justify-content-center</code>. To align right, use class
|
||||
<code>.justify-content-end</code>.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-12">
|
||||
<h5 class="text-left">Left Align</h5>
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-start">
|
||||
<ngb-pagination class="d-flex justify-content-start" [collectionSize]="50"></ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12">
|
||||
<h5 class="text-center">Center Align</h5>
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center">
|
||||
<ngb-pagination class="d-flex justify-content-center" [collectionSize]="50"></ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12">
|
||||
<h5 class="text-right">Right Align</h5>
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-end">
|
||||
<ngb-pagination class="d-flex justify-content-end" [collectionSize]="50"></ngb-pagination>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Pagination Positions end -->
|
||||
|
||||
<!-- Pagination Sizes start -->
|
||||
<section id="pagination-sizes">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Pagination Sizes</h4>
|
||||
<p>Use class <code>.pagination-lg</code> for large size pagination & use <code>.pagination-sm</code> for
|
||||
small size pagination. For Default size no classes required.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Pagination Sizes With Border</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="row pagecenter">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="page1-center">
|
||||
<nav aria-label="Page navigation">
|
||||
<ngb-pagination class="d-flex justify-content-center" [collectionSize]="50"
|
||||
[directionLinks]="false" size="lg"></ngb-pagination>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="page2-center">
|
||||
<nav aria-label="Page navigation ">
|
||||
<ngb-pagination class="d-flex justify-content-center" [collectionSize]="50"
|
||||
[directionLinks]="false"></ngb-pagination>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="page3-center">
|
||||
<nav aria-label="Page navigation">
|
||||
<ngb-pagination class="d-flex justify-content-center" [collectionSize]="50"
|
||||
[directionLinks]="false" size="sm"></ngb-pagination>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Pagination Sizes end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { PaginationComponent } from './pagination.component';
|
||||
|
||||
describe('PaginationComponent', () => {
|
||||
let component: PaginationComponent;
|
||||
let fixture: ComponentFixture<PaginationComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ PaginationComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PaginationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-pagination',
|
||||
templateUrl: './pagination.component.html',
|
||||
styleUrls: ['./pagination.component.css']
|
||||
})
|
||||
export class PaginationComponent implements OnInit {
|
||||
|
||||
@BlockUI('defaultPagination') blockUIDefaultPagination: NgBlockUI;
|
||||
@BlockUI('paginationRoundStyle') blockUIPaginationRoundStyle: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Pagination',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Pagination',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadDefaultPagination() {
|
||||
this.blockUIDefaultPagination.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIDefaultPagination.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadPaginationRoundStyle() {
|
||||
this.blockUIPaginationRoundStyle.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIPaginationRoundStyle.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.badge[class*=badge-].dropdown-toggle::after {
|
||||
position: unset !important;
|
||||
top: unset !important;
|
||||
right: unset !important;
|
||||
font-size: 1rem;
|
||||
}
|
||||
1060
src/app/content/ngbbootstrap/pill-badges/pill-badges.component.html
Normal file
1060
src/app/content/ngbbootstrap/pill-badges/pill-badges.component.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { PillBadgesComponent } from './pill-badges.component';
|
||||
|
||||
describe('PillBadgesComponent', () => {
|
||||
let component: PillBadgesComponent;
|
||||
let fixture: ComponentFixture<PillBadgesComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ PillBadgesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PillBadgesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pill-badges',
|
||||
templateUrl: './pill-badges.component.html',
|
||||
styleUrls: ['./pill-badges.component.css']
|
||||
})
|
||||
export class PillBadgesComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
placement = 'top-left';
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Pill Badges',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Pill Badges',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
142
src/app/content/ngbbootstrap/pills/pills.component.css
Normal file
142
src/app/content/ngbbootstrap/pills/pills.component.css
Normal file
@@ -0,0 +1,142 @@
|
||||
:host ::ng-deep .vertical .nav-pills{
|
||||
float: left;
|
||||
border-bottom: 0;
|
||||
border-radius: 0;
|
||||
display: table;
|
||||
}
|
||||
/* .nav-link {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
}*/
|
||||
:host ::ng-deep .dropdownicon .nav-item i {
|
||||
margin-left: 3.5rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .icon .nav-item i {
|
||||
margin-right: 3.5rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ml-1.badge-success {
|
||||
margin-left: 4rem !important;
|
||||
}
|
||||
:host ::ng-deep .badge-warning {
|
||||
margin-left: 0rem !important;
|
||||
|
||||
}
|
||||
:host ::ng-deep .badge-warning.badge-glow {
|
||||
margin-right: 1.8rem !important;
|
||||
|
||||
}
|
||||
:host ::ng-deep .nav .nav-item .nav-link {
|
||||
display : -webkit-inline-box;
|
||||
display : -webkit-inline-flex;
|
||||
display : -moz-inline-box;
|
||||
display : -ms-inline-flexbox;
|
||||
}
|
||||
:host ::ng-deep .nav .nav-item i {
|
||||
-webkit-align-self : center;
|
||||
-ms-flex-item-align : center;
|
||||
align-self : center;
|
||||
}
|
||||
:host ::ng-deep .nav .dropdown-divider {
|
||||
margin : 0.5rem 0;
|
||||
}
|
||||
:host ::ng-deep .nav .modern-nav-toggle {
|
||||
padding : 25px 0;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills .nav-item .nav-link i.float-right:before {
|
||||
position : relative;
|
||||
top : 7px;
|
||||
left : 7px;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills .nav-item .nav-link .badge.float-right {
|
||||
position : relative;
|
||||
top : 1px;
|
||||
left : 3px;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills .nav-item .nav-link.dropdown-toggle::after {
|
||||
top : -1px;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills.nav-justified {
|
||||
width : 100%;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills.nav-justified .nav-item {
|
||||
float : none;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills.nav-justified .nav-link {
|
||||
text-align : center;
|
||||
margin-bottom : 5px;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills.nav-justified > .dropdown .dropdown-menu {
|
||||
top : auto;
|
||||
left : auto;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
:host ::ng-deep .nav.nav-pills.nav-justified .nav-item {
|
||||
display : table-cell;
|
||||
/* width : 1%; */
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills.nav-justified .nav-link {
|
||||
margin-bottom : 0;
|
||||
}
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills.nav-justified .nav-link {
|
||||
margin-right : 0;
|
||||
border-radius : 0.25rem;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
:host ::ng-deep .nav.nav-pills.nav-justified .nav-link.active, .nav.nav-pills.nav-justified .nav-link.active:hover, .nav.nav-pills.nav-justified .nav-link.active:focus {
|
||||
border-bottom-color : transparent;
|
||||
}
|
||||
}
|
||||
/* :host ::ng-deep .nav.nav-pills.nav-justified .nav-link {
|
||||
display : -webkit-box;
|
||||
} */
|
||||
:host ::ng-deep .nav.nav-pills.nav-justified .nav-link.active {
|
||||
border : none;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills.nav-justified .nav-link.active:hover, .nav.nav-pills.nav-justified .nav-link.active:focus {
|
||||
border : none;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills.nav-pill-bordered .nav-item {
|
||||
border : 1px solid #D3D3D3;
|
||||
border-radius : 0.25rem;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills.nav-pill-with-active-bordered .nav-item a.nav-link {
|
||||
border : 1px solid #D3D3D3;
|
||||
border-radius : 0.25rem;
|
||||
background-color : #FFFFFF;
|
||||
color : #55595C;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills.nav-pill-with-active-bordered .nav-item a.nav-link.active {
|
||||
border : 1px solid #666EE8;
|
||||
color : #666EE8;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills.nav-active-bordered-pill .nav-item a.nav-link {
|
||||
color : #55595C;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills.nav-active-bordered-pill .nav-item a.nav-link.active {
|
||||
border : 1px solid #666EE8;
|
||||
border-radius : 0.25rem;
|
||||
color : #666EE8;
|
||||
background-color : #FFFFFF;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills.nav-pill-toolbar.nav-stacked .nav-item ~ .nav-item a.nav-link {
|
||||
border-left : 1px solid #D3D3D3;
|
||||
border-top : 0;
|
||||
}
|
||||
:host ::ng-deep .nav.nav-pills.nav-pill-toolbar.nav-stacked .nav-item:first-child a.nav-link {
|
||||
|
||||
border-radius : 0.25rem 0.25rem 0 0;
|
||||
|
||||
}
|
||||
:host ::ng-deep .card {
|
||||
margin-bottom: 1.875rem;
|
||||
border: none;
|
||||
-webkit-box-shadow: 0 1px 15px 1px rgba(62, 57, 107, .07);
|
||||
box-shadow: 0 1px 15px 1px rgba(62, 57, 107, .07);
|
||||
}
|
||||
:host ::ng-deep .nav {
|
||||
border-radius: .25rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
725
src/app/content/ngbbootstrap/pills/pills.component.html
Normal file
725
src/app/content/ngbbootstrap/pills/pills.component.html
Normal file
@@ -0,0 +1,725 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Basic Pills start -->
|
||||
<section id="basic-pills">
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Basic Pills</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Takes the basic nav pills from above and adds the <code>.nav-pills</code> class to generate a
|
||||
pilled interface. </p>
|
||||
<ul ngbNav #nav="ngbNav" class="nav-pills">
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 1</a>
|
||||
<ng-template ngbNavContent>
|
||||
Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake
|
||||
carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake
|
||||
croissant.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 2</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake
|
||||
fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels.
|
||||
Jelly-o pie cupcake.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 3</a>
|
||||
<ng-template ngbNavContent>
|
||||
Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee
|
||||
cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert
|
||||
jujubes powder sweet sesame snaps.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem [disabled]="true">
|
||||
<a ngbNavLink>Disabled</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id
|
||||
diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis,
|
||||
luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus
|
||||
pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat
|
||||
volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique
|
||||
ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac
|
||||
lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.
|
||||
|
||||
</ng-template>
|
||||
</li>
|
||||
</ul>
|
||||
<div [ngbNavOutlet]="nav"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Bordered Pills</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Use <code>.nav-pill-bordered</code> class to <code>.nav-pills</code> for bordered type pills. </p>
|
||||
|
||||
<ul ngbNav #navBordered="ngbNav" class="nav nav-pills nav-pill-bordered">
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 1</a>
|
||||
<ng-template ngbNavContent>
|
||||
Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake
|
||||
carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake
|
||||
croissant.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 2</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake
|
||||
fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels.
|
||||
Jelly-o pie cupcake.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 3</a>
|
||||
<ng-template ngbNavContent>
|
||||
Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee
|
||||
cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert
|
||||
jujubes powder sweet sesame snaps.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem [disabled]="true">
|
||||
<a ngbNavLink>Disabled</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id
|
||||
diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis,
|
||||
luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus
|
||||
pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat
|
||||
volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique
|
||||
ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac
|
||||
lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.
|
||||
|
||||
</ng-template>
|
||||
</li>
|
||||
</ul>
|
||||
<div [ngbNavOutlet]="navBordered"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Bordered Pills with Active Border</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Use <code>.nav-pill-with-active-bordered</code> class to <code>.nav-pills</code> for bordered type
|
||||
pills. </p>
|
||||
<ul ngbNav #navActiveBordered="ngbNav" class="nav nav-pills nav-pill-with-active-bordered">
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 1</a>
|
||||
<ng-template ngbNavContent>
|
||||
Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake
|
||||
carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake
|
||||
croissant.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 2</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake
|
||||
fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels.
|
||||
Jelly-o pie cupcake.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 3</a>
|
||||
<ng-template ngbNavContent>
|
||||
Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee
|
||||
cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert
|
||||
jujubes powder sweet sesame snaps.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem [disabled]="true">
|
||||
<a ngbNavLink>Disabled</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id
|
||||
diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis,
|
||||
luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus
|
||||
pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat
|
||||
volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique
|
||||
ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac
|
||||
lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.
|
||||
|
||||
</ng-template>
|
||||
</li>
|
||||
</ul>
|
||||
<div [ngbNavOutlet]="navActiveBordered"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Active Border Pills</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Use <code>.nav-active-bordered-pill</code> class to <code>.nav-pills</code> for bordered type
|
||||
pills. </p>
|
||||
<ul ngbNav #navActiveBorderedPill="ngbNav" class="nav nav-pills nav-active-bordered-pill">
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 1</a>
|
||||
<ng-template ngbNavContent>
|
||||
Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake
|
||||
carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake
|
||||
croissant.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 2</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake
|
||||
fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels.
|
||||
Jelly-o pie cupcake.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 3</a>
|
||||
<ng-template ngbNavContent>
|
||||
Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee
|
||||
cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert
|
||||
jujubes powder sweet sesame snaps.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem [disabled]="true">
|
||||
<a ngbNavLink>Disabled</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id
|
||||
diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis,
|
||||
luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus
|
||||
pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat
|
||||
volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique
|
||||
ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac
|
||||
lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.
|
||||
|
||||
</ng-template>
|
||||
</li>
|
||||
<div [ngbNavOutlet]="navActiveBorderedPill"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Toolbar Pills</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Use <code>.nav-pill-toolbar</code> class to <code>.nav-pills</code> for bordered type pills. </p>
|
||||
<ul ngbNav #navPillToolbar="ngbNav" class="nav nav-pills nav-pill-toolbar">
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 1</a>
|
||||
<ng-template ngbNavContent>
|
||||
Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake
|
||||
carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake
|
||||
croissant.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 2</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake
|
||||
fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels.
|
||||
Jelly-o pie cupcake.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 3</a>
|
||||
<ng-template ngbNavContent>
|
||||
Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee
|
||||
cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert
|
||||
jujubes powder sweet sesame snaps.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem [disabled]="true">
|
||||
<a ngbNavLink>Disabled</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id
|
||||
diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis,
|
||||
luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus
|
||||
pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat
|
||||
volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique
|
||||
ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac
|
||||
lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.
|
||||
|
||||
</ng-template>
|
||||
</li>
|
||||
<div [ngbNavOutlet]="navPillToolbar"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Basic Justified Pills</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Use <code>.nav-justified</code> class to set Pills justified.</p>
|
||||
<ul ngbNav #navPills="ngbNav" class="nav nav-pills nav-justified">
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 1</a>
|
||||
<ng-template ngbNavContent>
|
||||
Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake
|
||||
carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake
|
||||
croissant.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 2</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake
|
||||
fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels.
|
||||
Jelly-o pie cupcake.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 3</a>
|
||||
<ng-template ngbNavContent>
|
||||
Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee
|
||||
cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert
|
||||
jujubes powder sweet sesame snaps.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem [disabled]="true">
|
||||
<a ngbNavLink>Disabled</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id
|
||||
diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis,
|
||||
luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus
|
||||
pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat
|
||||
volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique
|
||||
ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac
|
||||
lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.
|
||||
|
||||
</ng-template>
|
||||
</li>
|
||||
<div [ngbNavOutlet]="navPills"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Basic Pills end -->
|
||||
<!-- Stacked Pills start -->
|
||||
<section id="stacked-pills">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Stacked Pills</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Basic Stacked Pills</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Use <code>.flex-column</code> class with <code>.nav.nav-pills</code> to stack them vertically. Each
|
||||
<code>.nav-link</code> becomes block-level, allowing for larger hit areas via mouse or tap. </p>
|
||||
<ul ngbNav #navPillFlex="ngbNav" class="nav nav-pills flex-column">
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 1</a>
|
||||
<ng-template ngbNavContent>
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 2</a>
|
||||
<ng-template ngbNavContent>
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 3</a>
|
||||
<ng-template ngbNavContent>
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem [disabled]="true">
|
||||
<a ngbNavLink>Disabled</a>
|
||||
<ng-template ngbNavContent>
|
||||
</ng-template>
|
||||
</li>
|
||||
<div [ngbNavOutlet]="navPillFlex"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Stacked Pills Toolbar</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Use <code>.nav-pill-toolbar</code> class to <code>.flex-column</code> for bordered type pills.</p>
|
||||
|
||||
<ul ngbNav #navPillFlexToolbar="ngbNav" class="nav nav-pills flex-column nav-pill-toolbar">
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 1</a>
|
||||
<ng-template ngbNavContent>
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 2</a>
|
||||
<ng-template ngbNavContent>
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 3</a>
|
||||
<ng-template ngbNavContent>
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem [disabled]="true">
|
||||
<a ngbNavLink>Disabled</a>
|
||||
<ng-template ngbNavContent>
|
||||
</ng-template>
|
||||
</li>
|
||||
<div [ngbNavOutlet]="navPillFlexToolbar"></div>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- Stacked Pills end -->
|
||||
|
||||
<!-- Pills Elements start -->
|
||||
<section id="pills-elements">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Pills Elements</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Pills with Left Icon</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Use font icons before pill name to get pills with icon.</p>
|
||||
<ul ngbNav #navPillFontIcon="ngbNav" class="nav nav-pills">
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink><span><i class="la la-asterisk ng-star-inserted"></i></span>Pill 1</a>
|
||||
<ng-template ngbNavContent>
|
||||
Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake
|
||||
carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake
|
||||
croissant.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink><span><i class="la la-bars ng-star-inserted"></i></span>Pill 2</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake
|
||||
fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels.
|
||||
Jelly-o pie cupcake.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink><span><i class="la la-refresh ng-star-inserted"></i></span>Pill 3</a>
|
||||
<ng-template ngbNavContent>
|
||||
Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee
|
||||
cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert
|
||||
jujubes powder sweet sesame snaps.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem [disabled]="true">
|
||||
<a ngbNavLink><span><i class="la la-ban ng-star-inserted"></i></span>Disabled</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id
|
||||
diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis,
|
||||
luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus
|
||||
pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat
|
||||
volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique
|
||||
ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac
|
||||
lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.
|
||||
|
||||
</ng-template>
|
||||
</li>
|
||||
<div [ngbNavOutlet]="navPillFontIcon"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Pills with Right Icon</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ul ngbNav #navPillRightIcon="ngbNav" class="nav nav-pills">
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 1<span><i class="la la-asterisk ng-star-inserted"></i></span></a>
|
||||
<ng-template ngbNavContent>
|
||||
Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake
|
||||
carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake
|
||||
croissant.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 2 <span><i class="la la-bars ng-star-inserted"></i></span></a>
|
||||
<ng-template ngbNavContent>
|
||||
Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake
|
||||
fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels.
|
||||
Jelly-o pie cupcake.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 3 <span><i class="la la-refresh ng-star-inserted"></i></span></a>
|
||||
<ng-template ngbNavContent>
|
||||
Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee
|
||||
cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert
|
||||
jujubes powder sweet sesame snaps.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem [disabled]="true">
|
||||
<a ngbNavLink>Disabled <span><i class="la la-ban ng-star-inserted"></i></span></a>
|
||||
<ng-template ngbNavContent>
|
||||
Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id
|
||||
diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis,
|
||||
luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus
|
||||
pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat
|
||||
volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique
|
||||
ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac
|
||||
lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.
|
||||
|
||||
</ng-template>
|
||||
</li>
|
||||
<div [ngbNavOutlet]="navPillRightIcon"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Pills with Only Icon</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Use font icons as pill name to get Icon pills.</p>
|
||||
|
||||
<ul ngbNav #navPillFontIconName="ngbNav" class="nav nav-pills">
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink><span><i class="la la-asterisk ng-star-inserted"></i></span></a>
|
||||
<ng-template ngbNavContent>
|
||||
Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake
|
||||
carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake
|
||||
croissant.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink><span><i class="la la-bars ng-star-inserted"></i></span></a>
|
||||
<ng-template ngbNavContent>
|
||||
Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake
|
||||
fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels.
|
||||
Jelly-o pie cupcake.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink><span><i class="la la-refresh ng-star-inserted"></i></span></a>
|
||||
<ng-template ngbNavContent>
|
||||
Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee
|
||||
cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert
|
||||
jujubes powder sweet sesame snaps.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem [disabled]="true">
|
||||
<a ngbNavLink><span><i class="la la-ban ng-star-inserted"></i></span></a>
|
||||
<ng-template ngbNavContent>
|
||||
Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id
|
||||
diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis,
|
||||
luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus
|
||||
pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat
|
||||
volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique
|
||||
ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac
|
||||
lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.
|
||||
|
||||
</ng-template>
|
||||
</li>
|
||||
<div [ngbNavOutlet]="navPillFontIconName"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Pills with Label</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>You can also use <code>.badge.badge-COLOR</code> classes to add label to pill.</p>
|
||||
<ul class="nav nav-pills">
|
||||
<ul ngbNav #navPillwithLabel="ngbNav" class="nav nav-pills">
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink><span class="badge badge-default badge-success">New</span>Pill 1</a>
|
||||
<ng-template ngbNavContent>
|
||||
Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake
|
||||
carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake
|
||||
croissant.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 2<span
|
||||
class="badge badge-default badge-primary ml-1">Latest</span></a>
|
||||
<ng-template ngbNavContent>
|
||||
Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake
|
||||
fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels.
|
||||
Jelly-o pie cupcake.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 3<span class="badge badge-default badge-danger ml-1">Bug</span></a>
|
||||
<ng-template ngbNavContent>
|
||||
Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee
|
||||
cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert
|
||||
jujubes powder sweet sesame snaps.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem [disabled]="true">
|
||||
<a ngbNavLink>Disabled</a>
|
||||
<ng-template ngbNavContent>
|
||||
Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id
|
||||
diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis,
|
||||
luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus
|
||||
pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat
|
||||
volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique
|
||||
ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac
|
||||
lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.
|
||||
|
||||
</ng-template>
|
||||
</li>
|
||||
<div [ngbNavOutlet]="navPillwithLabel"></div>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Pills with Label</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>You can also use <code>.badge.badge-pill.badge-glow.badge-COLOR</code> classes to add label
|
||||
pill(badge) to pill.</p>
|
||||
<ul class="nav nav-pills">
|
||||
<ul ngbNav #navPillsLabel="ngbNav" class="nav nav-pills">
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink><span
|
||||
class="badge badge-pill badge-glow badge-default badge-success">2</span>Pill 1</a>
|
||||
<ng-template ngbNavContent>
|
||||
Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake
|
||||
carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake
|
||||
croissant.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 2<span
|
||||
class="badge badge-pill badge-glow badge-default badge-primary ml-1">3</span></a>
|
||||
<ng-template ngbNavContent>
|
||||
Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake
|
||||
fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels.
|
||||
Jelly-o pie cupcake.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>Pill 3<span
|
||||
class="badge badge-pill badge-glow badge-default badge-danger ml-1">7</span></a>
|
||||
<ng-template ngbNavContent>
|
||||
Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee
|
||||
cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert
|
||||
jujubes powder sweet sesame snaps.
|
||||
</ng-template>
|
||||
</li>
|
||||
<li ngbNavItem [disabled]="true">
|
||||
<a ngbNavLink>Disabled </a>
|
||||
<ng-template ngbNavContent>
|
||||
Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id
|
||||
diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis,
|
||||
luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus
|
||||
pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat
|
||||
volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique
|
||||
ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac
|
||||
lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.
|
||||
|
||||
</ng-template>
|
||||
</li>
|
||||
<div [ngbNavOutlet]="navPillsLabel"></div>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- Pills Elements end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
25
src/app/content/ngbbootstrap/pills/pills.component.spec.ts
Normal file
25
src/app/content/ngbbootstrap/pills/pills.component.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { PillsComponent } from './pills.component';
|
||||
|
||||
describe('PillsComponent', () => {
|
||||
let component: PillsComponent;
|
||||
let fixture: ComponentFixture<PillsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ PillsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PillsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
36
src/app/content/ngbbootstrap/pills/pills.component.ts
Normal file
36
src/app/content/ngbbootstrap/pills/pills.component.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pills',
|
||||
templateUrl: './pills.component.html',
|
||||
styleUrls: ['./pills.component.css']
|
||||
})
|
||||
export class PillsComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
currentOrientation = 'vertical';
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Pills',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Pills',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
:host ::ng-deep .basicRightPopover {
|
||||
width: 744px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
375
src/app/content/ngbbootstrap/popovers/popovers.component.html
Normal file
375
src/app/content/ngbbootstrap/popovers/popovers.component.html
Normal file
@@ -0,0 +1,375 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Static Popovers start -->
|
||||
<section id="static-popovers">
|
||||
<div class="row ">
|
||||
<div class="col-12" *blockUI="'staticDemo'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadStaticDemo($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Static demo
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>Four options are available: top, right, bottom, and left aligned.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-6 col-6 text-center">
|
||||
<h5 class="text-center">Basic Top Popover</h5>
|
||||
<div class="popover bs-popover-top show"
|
||||
style="display: block; position: relative; margin: 1rem auto; padding: 0; z-index: 100;">
|
||||
<div class="arrow" style="left: 50%;"></div>
|
||||
<div class="popover-header" style="max-width: none;">Popover on Top</div>
|
||||
<div class="popover-body">
|
||||
<p>Ice cream tootsie roll tiramisu tootsie roll toffee dragée sugar plum cake. Liquorice jelly
|
||||
jujubes. Powder danish tart apple pie dessert cheesecake tiramisu soufflé bonbon. Carrot cake
|
||||
wafer toffee.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="top"</code> to add top popover.</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-6 text-center">
|
||||
<h5 class="text-center">Basic Right Popover</h5>
|
||||
<div class="popover bs-popover-right show"
|
||||
style="display: block; position: relative; margin: 1rem auto; padding: 0; z-index: 100;">
|
||||
<div class="arrow" style="top: 50%;"></div>
|
||||
<div class="popover-header" style="max-width: none;">Popover on Right</div>
|
||||
<div class="popover-body">
|
||||
<p>Ice cream tootsie roll tiramisu tootsie roll toffee dragée sugar plum cake. Liquorice jelly
|
||||
jujubes. Powder danish tart apple pie dessert cheesecake tiramisu soufflé bonbon. Carrot cake
|
||||
wafer toffee.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="right"</code> to add right popover.</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-6 text-center">
|
||||
<h5 class="text-center">Basic Bottom Popover</h5>
|
||||
<div class="popover bs-popover-bottom show"
|
||||
style="display: block; position: relative; margin: 1rem auto; padding: 0; z-index: 100;">
|
||||
<div class="arrow" style="left: 50%;"></div>
|
||||
<div class="popover-header" style="max-width: none;">Popover on Bottom</div>
|
||||
<div class="popover-body">
|
||||
<p>Ice cream tootsie roll tiramisu tootsie roll toffee dragée sugar plum cake. Liquorice jelly
|
||||
jujubes. Powder danish tart apple pie dessert cheesecake tiramisu soufflé bonbon. Carrot cake
|
||||
wafer toffee.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="bottom"</code> to add bottom popover.</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-6 text-center">
|
||||
<h5 class="text-center">Basic Left Popover</h5>
|
||||
<div class="popover bs-popover-left show"
|
||||
style="display: block; position: relative; margin: 1rem auto; padding: 0; z-index: 100;">
|
||||
<div class="arrow" style="top: 50%;"></div>
|
||||
<div class="popover-header" style="max-width: none;">Popover on Left</div>
|
||||
<div class="popover-body">
|
||||
<p>Ice cream tootsie roll tiramisu tootsie roll toffee dragée sugar plum cake. Liquorice jelly
|
||||
jujubes. Powder danish tart apple pie dessert cheesecake tiramisu soufflé bonbon. Carrot cake
|
||||
wafer toffee.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="left"</code> to add left popover.</p>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Static Popovers end -->
|
||||
|
||||
<!-- Popover Positions start -->
|
||||
<section id="popover-positions">
|
||||
<div class="row ">
|
||||
<div class="col-12" *blockUI="'popoverPositions'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadPopoverPositions($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Popover Positions
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>Four options are available: top, right, bottom, and left aligned.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Basic Top Popover</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-secondary bs-popover-top" [autoClose]="'inside'"
|
||||
placement="top"
|
||||
ngbPopover="Macaroon chocolate candy. I love carrot cake gingerbread cake lemon drops. Muffin sugar plum marzipan pie."
|
||||
popoverTitle="Popover on top">
|
||||
Popover on top
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="top"</code> to add top popover.</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Basic Right Popover</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-secondary bs-popover-right" [autoClose]="'inside'"
|
||||
placement="right" popoverClass="basicRightPopover"
|
||||
ngbPopover="Macaroon chocolate candy. I love carrot cake gingerbread cake lemon drops. Muffin sugar plum marzipan pie."
|
||||
popoverTitle="Popover on right">
|
||||
Popover on right
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="right"</code> to add right popover.</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Basic Bottom Popover</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-secondary bs-popover-bottom" [autoClose]="'inside'"
|
||||
placement="bottom"
|
||||
ngbPopover="Macaroon chocolate candy. I love carrot cake gingerbread cake lemon drops. Muffin sugar plum marzipan pie."
|
||||
popoverTitle="Popover on bottom">
|
||||
Popover on bottom
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="bottom"</code> to add bottom popover.</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Basic Left Popover</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-secondary bs-popover-left" [autoClose]="'inside'"
|
||||
placement="left"
|
||||
ngbPopover="Macaroon chocolate candy. I love carrot cake gingerbread cake lemon drops. Muffin sugar plum marzipan pie."
|
||||
popoverTitle="Popover on left">
|
||||
Popover on left
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="left"</code> to add left popover.</p>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Popover Positions end -->
|
||||
|
||||
<!-- Popover Events start -->
|
||||
<section id="popover-events">
|
||||
<div class="row ">
|
||||
<div class="col-12" *blockUI="'popoverEvents'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadPopoverEvents($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Popover Events
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Shown Event</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-success" triggers="manual" placement="top"
|
||||
ngbPopover="Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake."
|
||||
popoverTitle="Popover Shown Event" #s="ngbPopover" (click)="s.open()" (shown)="popoverShownEvent()">
|
||||
Shown Event Popover
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">This event is fired when the popover has been made visible to the user.</p>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Hidden Event</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-success" triggers="hidden" placement="top"
|
||||
ngbPopover="Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake."
|
||||
popoverTitle="Popover Hidden Event" #h="ngbPopover" (click)="h.open()" (hidden)="popoverHiddenEvent()">
|
||||
Hidden Event Popover
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">This event is fired when the popover has finished being hidden from the
|
||||
user.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Popover Events end -->
|
||||
|
||||
<!-- Popover Methods start -->
|
||||
<section id="popover-methods">
|
||||
<div class="row ">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Popover Methods</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>This is considered a “manual” triggering of the popover.Popovers whose both title and content are
|
||||
zero-length are never displayed.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Show</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-danger" [autoClose]="false" triggers="click:show"
|
||||
placement="top"
|
||||
ngbPopover="Fruitcake candy cheesecake jelly beans cake gummies. Cotton candy I love sweet roll jujubes pastry cake halvah cake."
|
||||
popoverTitle="Show Method Popover">
|
||||
Show Method <i class="la la-play-circle ml-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Reveals an element’s popover. Returns to the caller before the
|
||||
popover has actually been shown.</p>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Hide</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-danger" [autoClose]="'false'" triggers="mouseenter"
|
||||
placement="left"
|
||||
ngbPopover="Fruitcake candy cheesecake jelly beans cake gummies. Cotton candy I love sweet roll jujubes pastry cake halvah cake."
|
||||
popoverTitle="Hide Method Popover" #hide= ngbPopover triggers="manual" (mouseenter)="hide.open()" (click)="hide.close()">
|
||||
Hide Method <i class="la la-play-circle ml-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Hides an element’s popover. Returns to the caller before the popover
|
||||
has actually been hidden.</p>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Toggle</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-danger" triggers="click" [autoClose]="'inside'"
|
||||
placement="top"
|
||||
ngbPopover="Fruitcake candy cheesecake jelly beans cake gummies. Cotton candy I love sweet roll jujubes pastry cake halvah cake."
|
||||
popoverTitle="Toggle Method Popover">
|
||||
Toggle Method <i class="la la-play-circle ml-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Toggles an element’s popover. Returns to the caller before the
|
||||
popover has actually been shown or hidden.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Popover Methods end -->
|
||||
|
||||
|
||||
|
||||
<!-- Popover Triggers start -->
|
||||
<section>
|
||||
<div class="row ">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Popover Triggers</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Popover is triggered using - click | hover | focus | manual options. You may pass multiple
|
||||
triggers; separate them with a space. "manual" cannot be combined with any other trigger.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Hover</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-info" triggers="hover:click:hover" placement="top"
|
||||
ngbPopover="Tart macaroon marzipan I love soufflé apple pie wafer. Chocolate bar jelly caramels jujubes chocolate cake gummies."
|
||||
popoverTitle="Hover Triggered">
|
||||
On Hover Trigger
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Use <code>triggers="hover"</code> for hover trigger.</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Click</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-info" triggers="click" [autoClose]="'inside'"
|
||||
placement="top"
|
||||
ngbPopover="Tart macaroon marzipan I love soufflé apple pie wafer. Chocolate bar jelly caramels jujubes chocolate cake gummies."
|
||||
popoverTitle="Click Triggered">
|
||||
On Click Trigger
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Use <code>triggers="click"</code> for click trigger. This is a
|
||||
default trigger.</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Focus</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-info" triggers="click:focus" [autoClose]="'outside'"
|
||||
placement="top"
|
||||
ngbPopover="Tart macaroon marzipan I love soufflé apple pie wafer. Chocolate bar jelly caramels jujubes chocolate cake gummies."
|
||||
popoverTitle="Focus Triggered">
|
||||
On Focus Trigger
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Use <code>triggers="focus"</code> for focus trigger.</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Manual</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-info" triggers="manual" [autoClose]="'false'"
|
||||
placement="top" #manualPopover="ngbPopover" (click)="manualPopover.open()"
|
||||
(mouseleave)="manualPopover.close()"
|
||||
ngbPopover="Tart macaroon marzipan I love soufflé apple pie wafer. Chocolate bar jelly caramels jujubes chocolate cake gummies."
|
||||
popoverTitle="Manual Triggered">
|
||||
On Manual Trigger
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Use <code>triggers="manual"</code> for manual trigger. You can
|
||||
do show/hide using js</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Popover Triggers end -->
|
||||
|
||||
<!-- Popover Options start -->
|
||||
<section id="popover-options">
|
||||
<div class="row ">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Popover Options</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Supports HTML</h5>
|
||||
<div class="text-center">
|
||||
<ng-template #popTitle><b>This </b>is <i>HTML </i><u>Popover</u> </ng-template>
|
||||
<ng-template #popContent>Tart macaroon marzipan I love soufflé <h6>apple pie </h6>wafer.
|
||||
<b>Chocolate </b>bar jelly caramels jujubes chocolate cake gummies.</ng-template>
|
||||
<button type="button" class="btn btn-warning" placement="top" [ngbPopover]="popContent"
|
||||
[popoverTitle]="popTitle">
|
||||
HTML Popover
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Use<code>ng-template</code> for HTML supported trigger.</p>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 text-center">
|
||||
<h5 class="text-center">Popover Template</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-warning" [autoClose]="'inside'" triggers="click"
|
||||
placement="top"
|
||||
ngbPopover="<div class='popover' role='popover'><div class='arrow'></div><div class='popover-header'></div><div class='popover-body'></div></div>"
|
||||
popoverTitle="Default Template Structure">
|
||||
Popover Template
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Base HTML to use when creating the popover. The popover's title will
|
||||
be injected into the <code>.popoverTitle</code>. <code>.arrow</code> will become the
|
||||
popover's arrow.The outermost wrapper element should have the <code>.popover</code> class.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Popover Options end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { PopoversComponent } from './popovers.component';
|
||||
|
||||
describe('PopoversComponent', () => {
|
||||
let component: PopoversComponent;
|
||||
let fixture: ComponentFixture<PopoversComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ PopoversComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopoversComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
91
src/app/content/ngbbootstrap/popovers/popovers.component.ts
Normal file
91
src/app/content/ngbbootstrap/popovers/popovers.component.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-popovers',
|
||||
templateUrl: './popovers.component.html',
|
||||
styleUrls: ['./popovers.component.css']
|
||||
})
|
||||
export class PopoversComponent implements OnInit {
|
||||
|
||||
@BlockUI('staticDemo') blockUIStaticDemo: NgBlockUI;
|
||||
@BlockUI('popoverPositions') blockUIPopoverPositions: NgBlockUI;
|
||||
@BlockUI('popoverEvents') blockUIPopoverEvents: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Popovers',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Popovers',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
popoverShowEvent() {
|
||||
alert('Show event fired.');
|
||||
}
|
||||
|
||||
popoverShownEvent() {
|
||||
alert('Shown event fired.');
|
||||
}
|
||||
|
||||
popoverHideEvent() {
|
||||
alert('Hide event fired.');
|
||||
}
|
||||
|
||||
popoverHiddenEvent() {
|
||||
alert('Hidden event fired.');
|
||||
}
|
||||
|
||||
doAlert() {
|
||||
console.log('<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>');
|
||||
}
|
||||
|
||||
reloadStaticDemo() {
|
||||
this.blockUIStaticDemo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIStaticDemo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadPopoverPositions() {
|
||||
this.blockUIPopoverPositions.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIPopoverPositions.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadPopoverEvents() {
|
||||
this.blockUIPopoverEvents.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIPopoverEvents.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
274
src/app/content/ngbbootstrap/progress/progress.component.html
Normal file
274
src/app/content/ngbbootstrap/progress/progress.component.html
Normal file
@@ -0,0 +1,274 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Basic Progress start -->
|
||||
<section id="basic-progress">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'basicProgress'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadBasicProgress($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Basic Progress
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="text-center" id="example-caption-1">Reticulating splines… 0%</div>
|
||||
<div>
|
||||
<ngb-progressbar type="primary" [value]="0"></ngb-progressbar>
|
||||
</div>
|
||||
|
||||
<div class="text-center" id="example-caption-2">Reticulating splines… 25%</div>
|
||||
<div>
|
||||
<ngb-progressbar type="primary" [value]="25"></ngb-progressbar>
|
||||
</div>
|
||||
|
||||
<div class="text-center" id="example-caption-3">Reticulating splines… 50%</div>
|
||||
<div>
|
||||
<ngb-progressbar type="primary" [value]="50"></ngb-progressbar>
|
||||
</div>
|
||||
|
||||
<div class="text-center" id="example-caption-4">Reticulating splines… 75%</div>
|
||||
<div>
|
||||
<ngb-progressbar type="primary" [value]="75"></ngb-progressbar>
|
||||
</div>
|
||||
|
||||
<div class="text-center" id="example-caption-5">Reticulating splines… 100%</div>
|
||||
<div>
|
||||
<ngb-progressbar type="primary" [value]="100"></ngb-progressbar>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Basic Progress end -->
|
||||
|
||||
<!-- Colored Progress start -->
|
||||
<section id="colored-progress">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'coloredProgress'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadColoredProgress($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Colored Progress
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar type="primary" [value]="20"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar type="success" [value]="40"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar type="danger" [value]="60"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar type="info" [value]="80"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar type="warning" [value]="100"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Colored Progress end -->
|
||||
|
||||
<!-- Labeled Progress start -->
|
||||
<section id="labeled-progress">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Labeled Progress</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar showValue="true" type="primary" [value]="20"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar showValue="true" type="success" [value]="40"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar showValue="true" type="danger" [value]="60"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar showValue="true" type="info" [value]="80"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar showValue="true" type="warning" [value]="100"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Labeled Progress end -->
|
||||
|
||||
<!-- Striped Progress start -->
|
||||
<section id="striped-progress">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Striped Progress</h4>
|
||||
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body text-center">
|
||||
<p>Uses a gradient to create a striped effect.</p>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar [striped]="true" type="primary" [value]="20"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar [striped]="true" type="success" [value]="40"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar [striped]="true" type="danger" [value]="60"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar [striped]="true" type="info" [value]="80"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar [striped]="true" type="warning" [value]="100"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Striped Progress end -->
|
||||
|
||||
<!-- Animated Progress start -->
|
||||
<section id="animated-progress">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Animated Progress</h4>
|
||||
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Progressbar with animated effect.</p>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar [animated]="true" [striped]="true" type="primary" [value]="20">
|
||||
</ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar [animated]="true" [striped]="true" type="success" [value]="40">
|
||||
</ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar [animated]="true" [striped]="true" type="danger" [value]="60">
|
||||
</ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar [animated]="true" [striped]="true" type="info" [value]="80"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar [animated]="true" [striped]="true" type="warning" [value]="100">
|
||||
</ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Animated Progress end -->
|
||||
|
||||
<!-- Progress Sizes start -->
|
||||
<section id="progress-sizes">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Progress Sizes</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body text-center">
|
||||
<p>Different height sizes using inline styles. For Default progress, No size class needed.</p>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar height="18px" [striped]="true" type="primary" [value]="20"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar height="14px" [striped]="true" type="success" [value]="40"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar height="10px" [striped]="true" type="danger" [value]="60"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar height="7px" [striped]="true" type="info" [value]="80"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ngb-progressbar height="3px" [striped]="true" type="warning" [value]="100"></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Progress Sizes end -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { ProgressComponent } from './progress.component';
|
||||
|
||||
describe('ProgressComponent', () => {
|
||||
let component: ProgressComponent;
|
||||
let fixture: ComponentFixture<ProgressComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ProgressComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ProgressComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
61
src/app/content/ngbbootstrap/progress/progress.component.ts
Normal file
61
src/app/content/ngbbootstrap/progress/progress.component.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-progress',
|
||||
templateUrl: './progress.component.html',
|
||||
styleUrls: ['./progress.component.css']
|
||||
})
|
||||
export class ProgressComponent implements OnInit {
|
||||
|
||||
@BlockUI('basicProgress') blockUIBasicProgress: NgBlockUI;
|
||||
@BlockUI('coloredProgress') blockUIColoredProgress: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Progress',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Progress',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadBasicProgress() {
|
||||
this.blockUIBasicProgress.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIBasicProgress.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadColoredProgress() {
|
||||
this.blockUIColoredProgress.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIColoredProgress.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
:host ::ng-deep .always-visible .ps__rail-x {
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .always-visible .ps__rail-y {
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
vertical-scroll {
|
||||
overflow: auto !important;
|
||||
}
|
||||
@@ -0,0 +1,464 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<div class="alert alert-warning mb-2">
|
||||
<h4 class="alert-heading mb-2">Scrolling children inside perfect-scrollbar</h4>
|
||||
<p>You can natively scroll children inside perfect-scrollbar with the mouse-wheel. Scrolling automatically
|
||||
works if the child is a textarea. All other elements need to have the ps-child class.</p>
|
||||
</div>
|
||||
|
||||
<!-- Scroll types section start -->
|
||||
<section id="scroll-types">
|
||||
|
||||
<div class="row" matchHeight="card">
|
||||
<!-- Vertical Scroll -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Vertical Scroll</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="vertical-scroll scroll-example height-300" fxFlex="auto" [perfectScrollbar]="config">
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via workplace
|
||||
diversity and empowerment.</p>
|
||||
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the
|
||||
day, going forward, a new normal that has evolved from generation X is on the runway heading
|
||||
towards a streamlined cloud solution. User generated content in real-time will have multiple
|
||||
touch points for offshoring.</p>
|
||||
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology immersion
|
||||
along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework. Taking
|
||||
seamless key performance indicators offline to maximise the long tail. Keeping your eye on the
|
||||
ball while performing a deep dive on the start-up mentality to derive convergence on
|
||||
cross-platform integration.</p>
|
||||
|
||||
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically
|
||||
procrastinate B2C users after installed base benefits. Dramatically visualize customer directed
|
||||
convergence without revolutionary ROI.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Horizontal Scroll -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Horizontal Scroll</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="horizontal-scroll scroll-example height-300" fxFlex="auto" [perfectScrollbar]="config">
|
||||
<div class="horz-scroll-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via
|
||||
workplace diversity and empowerment.</p>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end
|
||||
of the day, going forward, a new normal that has evolved from generation X is on the runway
|
||||
heading towards a streamlined cloud solution. User generated content in real-time will have
|
||||
multiple touch points for offshoring.</p>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology
|
||||
immersion along the information highway will close the loop on focusing solely on the
|
||||
bottom line.</p>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework.
|
||||
Taking seamless key performance indicators offline to maximise the long tail. Keeping your
|
||||
eye on the ball while performing a deep dive on the start-up mentality to derive
|
||||
convergence on cross-platform integration.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Both Side Scroll -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Both Side Scroll</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="both-side-scroll scroll-example height-300" fxFlex="auto" [perfectScrollbar]="config">
|
||||
<img src="../../../assets/images/carousel/09.jpg" alt="girl" width="800" height="600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Scroll types section end -->
|
||||
|
||||
<!-- Scroll wheel section start -->
|
||||
<section id="scroll-wheel">
|
||||
|
||||
<div class="row" matchHeight="card">
|
||||
<!-- Wheel Speed : 1 -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Wheel Speed : 1</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This example demonstrate the default scroll speed for the mouse wheel scroll. Default wheel
|
||||
speed is <code>1</code>. Chage <code>perfectScrollbar</code> option to achieve desired wheel speed.</p>
|
||||
</div>
|
||||
<div class="default-wheel-speed scroll-example height-300" fxFlex="auto" [perfectScrollbar]="speed1">
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via workplace
|
||||
diversity and empowerment.</p>
|
||||
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the
|
||||
day, going forward, a new normal that has evolved from generation X is on the runway heading
|
||||
towards a streamlined cloud solution. User generated content in real-time will have multiple
|
||||
touch points for offshoring.</p>
|
||||
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology immersion
|
||||
along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework. Taking
|
||||
seamless key performance indicators offline to maximise the long tail. Keeping your eye on the
|
||||
ball while performing a deep dive on the start-up mentality to derive convergence on
|
||||
cross-platform integration.</p>
|
||||
|
||||
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically
|
||||
procrastinate B2C users after installed base benefits. Dramatically visualize customer directed
|
||||
convergence without revolutionary ROI.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wheel Speed : 10 -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Wheel Speed : 10</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This example demonstrate the higher scroll speed for the mouse wheel scroll. Default wheel speed
|
||||
is <code>1</code>. In this example <code>perfectScrollbar</code> option is set to <code>10</code>.</p>
|
||||
</div>
|
||||
<div class="higher-wheel-speed scroll-example height-300" fxFlex="auto" [perfectScrollbar]="speed10">
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via workplace
|
||||
diversity and empowerment.</p>
|
||||
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the
|
||||
day, going forward, a new normal that has evolved from generation X is on the runway heading
|
||||
towards a streamlined cloud solution. User generated content in real-time will have multiple
|
||||
touch points for offshoring.</p>
|
||||
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology immersion
|
||||
along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework. Taking
|
||||
seamless key performance indicators offline to maximise the long tail. Keeping your eye on the
|
||||
ball while performing a deep dive on the start-up mentality to derive convergence on
|
||||
cross-platform integration.</p>
|
||||
|
||||
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically
|
||||
procrastinate B2C users after installed base benefits. Dramatically visualize customer directed
|
||||
convergence without revolutionary ROI.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wheel Speed : 0.1 -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Wheel Speed : 0.1</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This example demonstrate the lower scroll speed for the mouse wheel scroll. Default wheel speed
|
||||
is <code>1</code>. In this example <code>perfectScrollbar</code> option is set to <code>0.1</code>.</p>
|
||||
</div>
|
||||
<div class="lower-wheel-speed scroll-example height-300" fxFlex="auto" [perfectScrollbar]="speed">
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via workplace
|
||||
diversity and empowerment.</p>
|
||||
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the
|
||||
day, going forward, a new normal that has evolved from generation X is on the runway heading
|
||||
towards a streamlined cloud solution. User generated content in real-time will have multiple
|
||||
touch points for offshoring.</p>
|
||||
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology immersion
|
||||
along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework. Taking
|
||||
seamless key performance indicators offline to maximise the long tail. Keeping your eye on the
|
||||
ball while performing a deep dive on the start-up mentality to derive convergence on
|
||||
cross-platform integration.</p>
|
||||
|
||||
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically
|
||||
procrastinate B2C users after installed base benefits. Dramatically visualize customer directed
|
||||
convergence without revolutionary ROI.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Scroll wheel section end -->
|
||||
|
||||
<!-- Scroll options section start -->
|
||||
<section id="scroll-options">
|
||||
|
||||
<div class="row" matchHeight="card">
|
||||
<!-- Always Visible Scroll -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Always Visible Scroll</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>Add class <code>.always-visible</code> to the wrapper element to make the scrollbar always
|
||||
visible. Srollbars are shown on hover and hidden by default.</p>
|
||||
</div>
|
||||
<div class="visible-scroll always-visible scroll-example height-300" fxFlex="auto"
|
||||
[perfectScrollbar]="visibleScroll">
|
||||
<div class="horz-scroll-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via
|
||||
workplace diversity and empowerment.</p>
|
||||
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end
|
||||
of the day, going forward, a new normal that has evolved from generation X is on the runway
|
||||
heading towards a streamlined cloud solution. User generated content in real-time will have
|
||||
multiple touch points for offshoring.</p>
|
||||
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology
|
||||
immersion along the information highway will close the loop on focusing solely on the
|
||||
bottom line.</p>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end
|
||||
of the day, going forward, a new normal that has evolved from generation X is on the runway
|
||||
heading towards a streamlined cloud solution. User generated content in real-time will have
|
||||
multiple touch points for offshoring.</p>
|
||||
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via
|
||||
workplace diversity and empowerment.</p>
|
||||
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework.
|
||||
Taking seamless key performance indicators offline to maximise the long tail. Keeping your
|
||||
eye on the ball while performing a deep dive on the start-up mentality to derive
|
||||
convergence on cross-platform integration.</p>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology
|
||||
immersion along the information highway will close the loop on focusing solely on the
|
||||
bottom line.</p>
|
||||
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework.
|
||||
Taking seamless key performance indicators offline to maximise the long tail. Keeping your
|
||||
eye on the ball while performing a deep dive on the start-up mentality to derive
|
||||
convergence on cross-platform integration.</p>
|
||||
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end
|
||||
of the day, going forward, a new normal that has evolved from generation X is on the runway
|
||||
heading towards a streamlined cloud solution. User generated content in real-time will have
|
||||
multiple touch points for offshoring.</p>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework.
|
||||
Taking seamless key performance indicators offline to maximise the long tail. Keeping your
|
||||
eye on the ball while performing a deep dive on the start-up mentality to derive
|
||||
convergence on cross-platform integration.</p>
|
||||
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology
|
||||
immersion along the information highway will close the loop on focusing solely on the
|
||||
bottom line.</p>
|
||||
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via
|
||||
workplace diversity and empowerment.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Minimum Scrollbar Length -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Minimum Scrollbar Length</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>Add option <code>minScrollbarLength</code> to set the minimum scrollbar length. In this example
|
||||
we have set minimum scrollbar length to 200px.</p>
|
||||
</div>
|
||||
<div class="min-scroll-length scroll-example height-300" fxFlex="auto"
|
||||
[perfectScrollbar]="minScrollbarLength">
|
||||
<img src="../../../assets/images/carousel/07.jpg" alt="girl" width="800" height="600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scrollbar With Margins -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Scrollbar With Margins</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>Add class <code>.large-margin</code> to the wrapper to have large margins on both sides.</p>
|
||||
</div>
|
||||
<div class="scrollbar-margins scroll-example height-300" fxFlex="auto" [perfectScrollbar]="margins">
|
||||
<img src="../../../assets/images/carousel/10.jpg" alt="girl" width="800" height="600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Scroll options section end -->
|
||||
|
||||
<!-- Scroll events section start -->
|
||||
<section id="scroll-events">
|
||||
|
||||
<div class="row" matchHeight="card">
|
||||
<!-- Default Handlers -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Default Handlers</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This example supports all the handlers. Here is the list of all supported handlers :
|
||||
<code>'click-rail'</code>,
|
||||
<code>'drag-scrollbar'</code>, <code>'keyboard'</code>, <code>'wheel'</code>,
|
||||
<code>'touch'</code>. Use <code>handlers</code> option.</p>
|
||||
</div>
|
||||
<div class="default-handlers scroll-example height-300" fxFlex="auto" [perfectScrollbar]="handlers">
|
||||
<img src="../../../assets/images/carousel/06.jpg" alt="girl" width="800" height="600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No Keyboard -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">No Keyboard</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This example supports all the handlers except keyboard. Here is the list of all supported
|
||||
handlers : <code>'click-rail'</code>, <code>'drag-scrollbar'</code>, <code>'wheel'</code>,
|
||||
<code>'touch'</code>. Use <code>noKeyboard</code> option.</p>
|
||||
</div>
|
||||
<div class="no-keyboard scroll-example height-300" fxFlex="auto" [perfectScrollbar]="noKeyboard">
|
||||
<img src="../../../assets/images/carousel/03.jpg" alt="girl" width="800" height="600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Click and Drag -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Click and Drag</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This example supports only two handlers. Here is the list of supported handlers :
|
||||
<code>'click-rail'</code>,
|
||||
<code>'drag-scrollbar'</code>. Use <code>clickDrag</code> option. </p>
|
||||
</div>
|
||||
<div class="click-drag-handler scroll-example height-300" fxFlex="auto"
|
||||
[perfectScrollbar]="clickDrag">
|
||||
<img src="../../../assets/images/carousel/05.jpg" alt="girl" width="800" height="600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Scroll events section end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { ScrollableComponent } from './scrollable.component';
|
||||
|
||||
describe('ScrollableComponent', () => {
|
||||
let component: ScrollableComponent;
|
||||
let fixture: ComponentFixture<ScrollableComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ScrollableComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ScrollableComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import {
|
||||
PerfectScrollbarConfigInterface,
|
||||
PerfectScrollbarComponent, PerfectScrollbarDirective
|
||||
} from 'ngx-perfect-scrollbar';
|
||||
|
||||
@Component({
|
||||
selector: 'app-scrollable',
|
||||
templateUrl: './scrollable.component.html',
|
||||
styleUrls: ['./scrollable.component.css']
|
||||
})
|
||||
export class ScrollableComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
public config: PerfectScrollbarConfigInterface = { wheelPropagation: false};
|
||||
|
||||
public speed1: PerfectScrollbarConfigInterface = { wheelSpeed: 1 , wheelPropagation: false };
|
||||
|
||||
public speed10: PerfectScrollbarConfigInterface = { wheelSpeed: 10 , wheelPropagation: false };
|
||||
|
||||
public speed: PerfectScrollbarConfigInterface = { wheelSpeed: 0.1 , wheelPropagation: false };
|
||||
|
||||
public visibleScroll: PerfectScrollbarConfigInterface = {wheelPropagation: false};
|
||||
|
||||
public minScrollbarLength: PerfectScrollbarConfigInterface = { minScrollbarLength: 200 , wheelPropagation: false };
|
||||
|
||||
public margins: PerfectScrollbarConfigInterface = { scrollXMarginOffset: 40, scrollYMarginOffset: 90 , wheelPropagation: false };
|
||||
|
||||
public handlers: PerfectScrollbarConfigInterface = { wheelPropagation: false,
|
||||
handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'] };
|
||||
|
||||
public noKeyboard: PerfectScrollbarConfigInterface = {wheelPropagation: false,
|
||||
handlers: ['click-rail', 'drag-thumb', 'wheel', 'touch'] };
|
||||
|
||||
public clickDrag: PerfectScrollbarConfigInterface = {wheelPropagation: false,
|
||||
handlers: ['click-rail', 'drag-thumb'] };
|
||||
|
||||
|
||||
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
|
||||
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Scrollable',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Scrollable',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
1499
src/app/content/ngbbootstrap/spinners/spinners.component.css
Normal file
1499
src/app/content/ngbbootstrap/spinners/spinners.component.css
Normal file
File diff suppressed because it is too large
Load Diff
868
src/app/content/ngbbootstrap/spinners/spinners.component.html
Normal file
868
src/app/content/ngbbootstrap/spinners/spinners.component.html
Normal file
@@ -0,0 +1,868 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Spinners with Icons start -->
|
||||
<section id="spinner-with-icons">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-2 mb-1">
|
||||
<h4 class="text-uppercase">Spinners with Icons</h4>
|
||||
<p>Use <code>.spinner</code> class to icon for spin effect.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Loading Spinner Option 1</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.la-refresh</code> spinner Icon class. </p>
|
||||
<button type="button" class="btn btn-lg btn-success mb-1">
|
||||
<i class="la la-refresh spinner">
|
||||
</i>
|
||||
Light Layout
|
||||
</button>
|
||||
<button type="button" class="btn btn-lg btn-danger mb-1">
|
||||
<i class="la la-refresh spinner">
|
||||
</i>
|
||||
Dark Layout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Loading Spinner Option 2</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.la-asterisk</code> spinner Icon class. </p>
|
||||
<button type="button" class="btn btn-lg btn-success mb-1">
|
||||
<i class="la la-asterisk spinner">
|
||||
</i>
|
||||
Light Layout
|
||||
</button>
|
||||
<button type="button" class="btn btn-lg btn-danger mb-1">
|
||||
<i class="la la-asterisk spinner">
|
||||
</i>
|
||||
Dark Layout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Loading Spinner Option 3</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.la-recycle</code> spinner Icon class. </p>
|
||||
<button type="button" class="btn btn-lg btn-success mb-1">
|
||||
<i class="la la-recycle spinner"></i>
|
||||
Light Layout
|
||||
</button>
|
||||
<button type="button" class="btn btn-lg btn-danger mb-1">
|
||||
<i class="la la-recycle spinner"></i>
|
||||
Dark Layout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Loading Spinner Option 4</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.la-futbol-o</code> spinner Icon class. </p>
|
||||
<button type="button" class="btn btn-lg btn-success mb-1">
|
||||
<i class="la la-futbol-o spinner"></i>
|
||||
Light Layout
|
||||
</button>
|
||||
<button type="button" class="btn btn-lg btn-danger mb-1">
|
||||
<i class="la la-futbol-o spinner"></i>
|
||||
Dark Layout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Loading Spinner Option 5</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.la-gear</code> spinner Icon class. </p>
|
||||
<button type="button" class="btn btn-lg btn-success mb-1">
|
||||
<i class="la la-gear spinner"></i>
|
||||
Light Layout
|
||||
</button>
|
||||
<button type="button" class="btn btn-lg btn-danger mb-1">
|
||||
<i class="la la-gear spinner"></i>
|
||||
Dark Layout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Loading Spinner Option 6</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.la-circle-o-notch</code> spinner Icon class. </p>
|
||||
<button type="button" class="btn btn-lg btn-success mb-1">
|
||||
<i class="la la-circle-o-notch spinner"></i>
|
||||
Light Layout
|
||||
</button>
|
||||
<button type="button" class="btn btn-lg btn-danger mb-1">
|
||||
<i class="la la-circle-o-notch spinner"></i>
|
||||
Dark Layout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Loading Spinner Option 7</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.la-rotate-left</code> spinner Icon class. </p>
|
||||
<button type="button" class="btn btn-lg btn-success mb-1">
|
||||
<i class="la la-rotate-left spinner"></i>
|
||||
Light Layout
|
||||
</button>
|
||||
<button type="button" class="btn btn-lg btn-danger mb-1">
|
||||
<i class="la la-rotate-left spinner"></i>
|
||||
Dark Layout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Loading Spinner Option 8</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.la-star-o</code> spinner Icon class. </p>
|
||||
<button type="button" class="btn btn-lg btn-success mb-1">
|
||||
<i class="la la-star-o spinner"></i>
|
||||
Light Layout
|
||||
</button>
|
||||
<button type="button" class="btn btn-lg btn-danger mb-1">
|
||||
<i class="la la-star-o spinner"></i>
|
||||
Dark Layout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Loading Spinner Option 9</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.la-spinner</code> spinner Icon class. </p>
|
||||
<button type="button" class="btn btn-lg btn-success mb-1">
|
||||
<i class="la la-spinner spinner"></i>
|
||||
Light Layout
|
||||
</button>
|
||||
<button type="button" class="btn btn-lg btn-danger mb-1">
|
||||
<i class="la la-spinner spinner"></i>
|
||||
Dark Layout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Loaders.css start -->
|
||||
<section id="loaders-css">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-1">
|
||||
<h4 class="text-uppercase">Loaders.css</h4>
|
||||
<p>Delightful and performance-focused pure css loading animations.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Pulse</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-pulse</code> class for Ball Pulse Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-pulse loader-primary">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Grid Ball Pulse</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-pulse</code> class for Grid Ball Pulse Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-grid-pulse loader-primary">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Clip Rotate</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-clip-rotate</code> class for Ball Clip Rotate Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-clip-rotate loader-primary">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Square Spin</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.square-spin</code> class for Square Spin Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="square-spin loader-success">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Loading Spinner Option 15</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-clip-rotate-multiple</code> class for Multiple Ball Clip Rotate Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-clip-rotate-multiple loader-success">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Pulse Rise</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-pulse-rise</code> class for Ball Pulse Rise Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-pulse-rise loader-danger">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Rotate</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-rotate</code> class for Ball Rotate Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-rotate loader-danger">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Cube Transition</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.cube-transition</code> class for Cube Transition Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="cube-transition loader-danger">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Zig Zag</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-zig-zag</code> class for Ball Zig Zag Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-zig-zag loader-info">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Zig Zag Deflact</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-zig-zag-deflect</code> class for Ball Zig Zag Deflact Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-zig-zag-deflect loader-info">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Trianle Path</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-triangle-path</code> class for Ball Trianle Path Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-triangle-path loader-info">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Scale</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-scale</code> class for Ball Scale Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-scale loader-warning">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Line Scale</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.line-scale</code> class for Ball Pulse Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="line-scale loader-warning">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Line Scale Party</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.line-scale-party</code> class for Line Scale Party Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="line-scale-party loader-warning">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Scale Multiple</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-scale-multiple</code> class for Ball Scale Multiple Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-scale-multiple loader-purple">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Pulse Sync</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-pulse-sync</code> class for Ball Pulse Sync Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-pulse-sync loader-purple">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Beat</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-beat</code> class for Ball Beat Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-beat loader-purple">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Line Scale Pulse Out</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.line-scale-pulse-out</code> class for Line Scale Pulse Out Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="line-scale-pulse-out loader-deep-orange">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Line Scale Pulse Out Rapid</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.line-scale-pulse-out-rapid</code> class for Line Scale Pulse Out Rapid Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="line-scale-pulse-out-rapid loader-deep-orange">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Scale Ripple</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-scale-ripple</code> class for Ball Scale Ripple Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-scale-ripple loader-deep-orange">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Spin Fade Loader</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-spin-fade-loader</code> class for Ball Spin Fade Loader Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-spin-fade-loader loader-blue">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Line Spin Fade Loader</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.line-spin-fade-loader</code> class for Line Spin Fade Loader Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="line-spin-fade-loader loader-blue">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Tiangle Skew Spin</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.triangle-skew-spin</code> class for Tiangle Skew Spin Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="triangle-skew-spin loader-pink">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Semi Circle Spin</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.semi-circle-spin</code> class for Semi Circle Spin Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="semi-circle-spin loader-pink">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Grid Beat</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-grid-beat</code> class for Ball Grid Beat Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-grid-beat loader-pink">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Ball Scale Random</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.ball-scale-random</code> class for Ball Scale Random Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="ball-scale-random loader-brown">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Double Bounce</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.double-bounce</code> class for Double Bounce Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="double-bounce loader-brown">
|
||||
<div class="child double-bounce1"></div>
|
||||
<div class="child double-bounce2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Chasing Dots</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.chasing-dots</code> class for Chasing Dots Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="chasing-dots loader-brown">
|
||||
<div class="child dot1"></div>
|
||||
<div class="child dot2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Fading Circle</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.fading-circle</code> class for Fading Circle Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="fading-circle loader-blue-grey">
|
||||
<div class="circle1 circle"></div>
|
||||
<div class="circle2 circle"></div>
|
||||
<div class="circle3 circle"></div>
|
||||
<div class="circle4 circle"></div>
|
||||
<div class="circle5 circle"></div>
|
||||
<div class="circle6 circle"></div>
|
||||
<div class="circle7 circle"></div>
|
||||
<div class="circle8 circle"></div>
|
||||
<div class="circle9 circle"></div>
|
||||
<div class="circle10 circle"></div>
|
||||
<div class="circle11 circle"></div>
|
||||
<div class="circle12 circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="text-center card-title">Folding Cube</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<p>Using <code>.folding-cube</code> class for Folding Cube Loader.</p>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader-container">
|
||||
<div class="folding-cube loader-blue-grey">
|
||||
<div class="cube1 cube"></div>
|
||||
<div class="cube2 cube"></div>
|
||||
<div class="cube4 cube"></div>
|
||||
<div class="cube3 cube"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Loaders.css end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { SpinnersComponent } from './spinners.component';
|
||||
|
||||
describe('SpinnersComponent', () => {
|
||||
let component: SpinnersComponent;
|
||||
let fixture: ComponentFixture<SpinnersComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SpinnersComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SpinnersComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
36
src/app/content/ngbbootstrap/spinners/spinners.component.ts
Normal file
36
src/app/content/ngbbootstrap/spinners/spinners.component.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-spinners',
|
||||
templateUrl: './spinners.component.html',
|
||||
styleUrls: ['./spinners.component.css']
|
||||
})
|
||||
export class SpinnersComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Spinners',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Spinners',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
23
src/app/content/ngbbootstrap/tooltips/tooltips.component.css
Normal file
23
src/app/content/ngbbootstrap/tooltips/tooltips.component.css
Normal file
@@ -0,0 +1,23 @@
|
||||
:host ::ng-deep .background-color .tooltip-inner {
|
||||
background-color: #E83E8C;
|
||||
}
|
||||
:host ::ng-deep .background-color .arrow::before {
|
||||
border-top-color: #E83E8C;
|
||||
}
|
||||
|
||||
:host ::ng-deep .text-color .tooltip-inner {
|
||||
color: #1E9FF2;
|
||||
}
|
||||
|
||||
:host ::ng-deep .background-text .tooltip-inner{
|
||||
color: black;
|
||||
background-color: #FF4961
|
||||
}
|
||||
|
||||
:host ::ng-deep .rightTooltipPosition{
|
||||
width : 120px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
418
src/app/content/ngbbootstrap/tooltips/tooltips.component.html
Normal file
418
src/app/content/ngbbootstrap/tooltips/tooltips.component.html
Normal file
@@ -0,0 +1,418 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Static demo -->
|
||||
<section id="static-demo">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'staticDemo'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadStaticDemo($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Static demo
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>Four options are available: top, right, bottom, and left aligned.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-6 col-6 mb-1 text-center">
|
||||
<h5 class="text-center">Basic Top Tooltip</h5>
|
||||
<div class="tooltip top show" role="tooltip"
|
||||
style="display: block; position: relative; margin: 0; padding: 0; z-index: 100;">
|
||||
<div class="tooltip-arrow"
|
||||
style="bottom: -5px; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000;">
|
||||
</div>
|
||||
<div class="tooltip-inner" style="max-width: none;">
|
||||
<i
|
||||
style="bottom: -5px; left: 50%;margin-left: -5px;border-width: 5px 5px 0;border-top-color: #000;position: absolute;border-style: solid;"></i>
|
||||
Tooltip on Top</div>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="top"</code> to add top tooltip.</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-6 mb-1 text-center">
|
||||
<h5 class="text-center">Basic Right Tooltip</h5>
|
||||
<div class="tooltip right show" role="tooltip"
|
||||
style="display: block; position: relative; margin: 0; padding: 0; z-index: 100;">
|
||||
<div class="tooltip-arrow"
|
||||
style="left: -5px;top: 50%;border-width: 5px 5px 5px 0;border-right-color: #000;">
|
||||
</div>
|
||||
<div class="tooltip-inner" style="max-width: none;">
|
||||
<i
|
||||
style="left: -5px; top: 50%;margin-top: -5px;border-width: 5px 5px 5px 0;border-right-color: #000;position: absolute;border-style: solid;"></i>
|
||||
Tooltip on Right</div>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="right"</code> to add right tooltip.</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-6 mb-1 text-center">
|
||||
<h5 class="text-center">Basic Bottom Tooltip</h5>
|
||||
<div class="tooltip bottom show" role="tooltip"
|
||||
style="display: block; position: relative; margin: 0; padding: 0; z-index: 100;">
|
||||
<div class="tooltip-arrow"
|
||||
style="top: -5px;left: 50%;margin-left: -5px;border-width: 0 5px 5px;border-bottom-color: #000;">
|
||||
</div>
|
||||
<div class="tooltip-inner" style="max-width: none;">
|
||||
<i
|
||||
style="top: -5px; left: 50%;margin-left: -5px;border-width:0 5px 5px;border-bottom-color: #000;position: absolute;border-style: solid;"></i>
|
||||
Tooltip on Bottom</div>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="bottom"</code> to add bottom tooltip.</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-6 mb-1 text-center">
|
||||
<h5 class="text-center">Basic Left Tooltip</h5>
|
||||
<div class="tooltip left show" role="tooltip"
|
||||
style="display: block; position: relative; margin: 0; padding: 0; z-index: 100;">
|
||||
<div class="tooltip-arrow"
|
||||
style="right: -5px;top: 50%;border-width: 5px 0 5px 5px;border-left-color: #000;">
|
||||
</div>
|
||||
<div class="tooltip-inner" style="max-width: none;">
|
||||
<i
|
||||
style="right: -5px; top: 50%;margin-top: -5px;border-width: 5px 0 5px 5px;border-left-color: #000;position: absolute;border-style: solid;"></i>
|
||||
Tooltip on Left</div>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="left"</code> to add left tooltip.</p>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section> <!-- Section Ends -->
|
||||
|
||||
<!-- Tooltip Positions -->
|
||||
<section id="tooltip-positions">
|
||||
<div class="row ">
|
||||
<div class="col-12" *blockUI="'tooltipPositions'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadTooltipPositions($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Tooltip Positions
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>Four options are available: top, right, bottom, and left aligned.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Basic Top Tooltip</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-secondary" triggers="click" placement="top" ngbTooltip="Tooltip on top">
|
||||
Tooltip on top
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="top"</code> to add top tooltip.</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Basic Right Tooltip</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-secondary" triggers="click" tooltipClass="rightTooltipPosition"
|
||||
placement="right" ngbTooltip="Tooltip on right">
|
||||
Tooltip on right
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="right"</code> to add right tooltip.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Basic Bottom Tooltip</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-secondary" triggers="click" placement="bottom" ngbTooltip="Tooltip on bottom">
|
||||
Tooltip on bottom
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="bottom"</code> to add bottom tooltip.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Basic Left Tooltip</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-secondary" triggers="click" placement="left" ngbTooltip="Tooltip on left">
|
||||
Tooltip on left
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Add <code>placement="left"</code> to add left tooltip.</p>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section Ends -->
|
||||
|
||||
<!-- Tooltip Events -->
|
||||
<section id="tooltip-events">
|
||||
<div class="row ">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Tooltip Events</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Shown Event</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-success" ngbTooltip="Tooltip Shown Event"
|
||||
triggers="manual" placement="top" #s="ngbTooltip" (click)="s.open()" (shown)="tooltipShownEvent()">
|
||||
Shown Event Tooltip
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">This event is fired when the tooltip has been made
|
||||
visible to the
|
||||
user.</p>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Hidden Event</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-success" ngbTooltip="Tooltip Hidden Event"
|
||||
triggers="manual" placement="top" #hidden="ngbTooltip" (click)="hidden.open()" (hidden)="tooltipHiddenEvent()">
|
||||
Hidden Event Tooltip
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">This event is fired when the tooltip has finished being
|
||||
hidden from
|
||||
the user.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section Ends -->
|
||||
|
||||
<!-- Tooltip Methods -->
|
||||
<section id="tooltip-methods">
|
||||
<div class="row ">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Tooltip Methods</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>This is considered a “manual” triggering of the tooltip. Tooltips with zero-length
|
||||
titles are
|
||||
never
|
||||
displayed.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Show</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-danger" ngbTooltip="Show Method Tooltip"
|
||||
[autoClose]="false" triggers="manual" #show="ngbTooltip" (click)="show.open()">
|
||||
Show Method <i class="la la-play-circle ml-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Reveals an element’s tooltip. Returns to the caller
|
||||
before the
|
||||
tooltip
|
||||
has actually been shown.</p>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Hide</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-danger" [autoClose]="false"
|
||||
ngbTooltip="Hide Method Tooltip" triggers="manual" #hide= ngbTooltip (mouseenter)="hide.open()" (click)="hide.close()">
|
||||
Hide Method <i class="la la-play-circle ml-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Hides an element’s tooltip. Returns to the caller before
|
||||
the tooltip
|
||||
has actually been hidden.</p>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Toggle</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-danger" triggers="click" [autoClose]="'inside'"
|
||||
ngbTooltip="Toggle Method Tooltip">
|
||||
Toggle Method <i class="la la-play-circle ml-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Toggles an element’s tooltip. Returns to the caller
|
||||
before the
|
||||
tooltip
|
||||
has actually been shown or hidden.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section Ends -->
|
||||
|
||||
<!-- Tooltip Triggers -->
|
||||
<section id="tooltip-triggers">
|
||||
<div class="row ">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Tooltip Triggers</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Tooltip is triggered using - click | hover | focus | manual options. You may pass
|
||||
multiple
|
||||
triggers; separate them with a space. "manual" cannot be combined with any other
|
||||
trigger.</p>
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Click</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-info" triggers="click" [autoClose]="'inside'"
|
||||
ngbTooltip="Click Triggered">
|
||||
On Click Trigger
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Use <code>triggers="click"</code> for click trigger.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Focus</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-info" triggers="click:focus" [autoClose]="'outside'"
|
||||
ngbTooltip="Focus Triggered">
|
||||
On Focus Trigger
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Use <code>triggers="focus"</code> for focus trigger.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Hover</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-info" triggers="hover:click:hover" [autoClose]="'outside'"
|
||||
ngbTooltip="Hover Triggered">
|
||||
On Hover Trigger
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Use <code>triggers="hover"</code> for hover trigger.
|
||||
This is a
|
||||
default trigger.</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Manual</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-info" triggers="manual" [autoClose]="'true'"
|
||||
ngbTooltip="Manual Triggered" #manualTrigger="ngbTooltip" (click)="manualTrigger.open()"
|
||||
(mouseleave)="manualTrigger.close()">
|
||||
On Manual Trigger
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Use <code>triggers="manual"</code> for manual
|
||||
trigger.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section Ends -->
|
||||
|
||||
<!-- Tooltip Options -->
|
||||
<section id="tooltip-options">
|
||||
<div class="row ">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Tooltip Options</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Supports HTML</h5>
|
||||
<div class="text-center">
|
||||
<ng-template #tipContent><b>This </b>is <i>HTML </i><u>tooltip</u> </ng-template>
|
||||
<button type="button" class="btn btn-warning" triggers="click" [ngbTooltip]="tipContent">
|
||||
HTML Tooltip
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Use<code>ng-template</code> for HTML supported trigger.</p>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Tooltip Template</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-warning template" (click)="doAlert()" [autoClose]="'inside'"
|
||||
ngbTooltip="Check console for default template structure" triggers="click">
|
||||
Tooltip Template
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Base HTML to use when creating the tooltip. The
|
||||
tooltip's title will
|
||||
be injected into the <code>.tooltip-inner</code>. <code>.tooltip-arrow</code> will
|
||||
become the
|
||||
tooltip's arrow.The outermost wrapper element should have the
|
||||
<code>.tooltip</code> class.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section Ends -->
|
||||
|
||||
<!-- Tooltip Colot Options -->
|
||||
<section id="tooltip-color-options">
|
||||
<div class="row ">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Tooltip Color Options</h4>
|
||||
</div>
|
||||
<div class="card-collapse">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Custom Tooltip Backround Color</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-primary" triggers="click" ngbTooltip="Custom Background Color"
|
||||
tooltipClass="background-color">
|
||||
Custom Bg
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Use <code>tooltipClass</code> for Custom
|
||||
tooltip. You
|
||||
can change tooltip color using custom class.</p>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Custom Tooltip Text Color</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-primary" triggers="click" ngbTooltip="Custom Background Color"
|
||||
tooltipClass="text-color">
|
||||
Custom Text
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Use <code>tooltipClass</code> for Custom
|
||||
tooltip. You
|
||||
can change tooltip text color using custom class.</p>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 mb-1 text-center">
|
||||
<h5 class="text-center">Custom Tooltip Background & Text Color</h5>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-primary" triggers="click" ngbTooltip="Custom Background Color"
|
||||
tooltipClass="background-text">
|
||||
Custom bg & Text
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-center mt-1">Use <code>tooltipClass</code> for Custom
|
||||
bordered
|
||||
colored tooltip. You can change tooltip background and text color using custom class.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section Ends -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { TooltipsComponent } from './tooltips.component';
|
||||
|
||||
describe('TooltipsComponent', () => {
|
||||
let component: TooltipsComponent;
|
||||
let fixture: ComponentFixture<TooltipsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ TooltipsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TooltipsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
83
src/app/content/ngbbootstrap/tooltips/tooltips.component.ts
Normal file
83
src/app/content/ngbbootstrap/tooltips/tooltips.component.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tooltips',
|
||||
templateUrl: './tooltips.component.html',
|
||||
styleUrls: ['./tooltips.component.css']
|
||||
})
|
||||
export class TooltipsComponent implements OnInit {
|
||||
|
||||
@BlockUI('staticDemo') blockUIStaticDemo: NgBlockUI;
|
||||
@BlockUI('tooltipPositions') blockUITooltipPositions: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Tooltip',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Tooltip',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
tooltipShowEvent() {
|
||||
alert('Show event fired.');
|
||||
}
|
||||
|
||||
tooltipShownEvent() {
|
||||
alert('Shown event fired.');
|
||||
}
|
||||
|
||||
tooltipHideEvent() {
|
||||
alert('Hide event fired.');
|
||||
}
|
||||
|
||||
tooltipHiddenEvent() {
|
||||
alert('Hidden event fired.');
|
||||
}
|
||||
|
||||
doAlert() {
|
||||
console.log('<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>');
|
||||
}
|
||||
|
||||
reloadStaticDemo() {
|
||||
this.blockUIStaticDemo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIStaticDemo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadTooltipPositions() {
|
||||
this.blockUITooltipPositions.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUITooltipPositions.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user