862 lines
38 KiB
HTML
862 lines
38 KiB
HTML
<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">
|
|
<!-- UI components start -->
|
|
<div class="row" id="ui">
|
|
<div class="col-12" *blockUI="'components'; message: 'Loading'">
|
|
<m-card [options]="options" (reloadFunction)="reloadComponents($event)">
|
|
<ng-container mCardHeaderTitle>
|
|
UI components
|
|
</ng-container>
|
|
<ng-container mCardBody>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td class="width-200">Button</td>
|
|
<td class="width-350">
|
|
<button type="button" class="btn btn-success mr-1 mb-1">Default
|
|
Buttons</button>
|
|
</td>
|
|
<td>Bootstrap includes six predefined button styles, each serving its own
|
|
semantic
|
|
purpose.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Round Buttons</td>
|
|
<td>
|
|
<button type="button" class="btn btn-danger btn-round mr-1 mb-1">Default
|
|
Buttons</button>
|
|
</td>
|
|
<td>Use <code>.btn-round</code> class to button for Round Buttons.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Button dropdowns</td>
|
|
<td>
|
|
<div class="btn-group mr-1 mb-1">
|
|
<div ngbDropdown class="d-inline-block">
|
|
<button class="btn btn-info btn-min-width dropdown-toggle" id="dropdownBasic1"
|
|
ngbDropdownToggle>Info</button>
|
|
<div ngbDropdownMenu 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>
|
|
<li class="dropdown-divider"></li>
|
|
<button class="dropdown-item">Separated link</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Turn a button into a dropdown toggle with some basic markup changes.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Basic Button group</td>
|
|
<td>
|
|
<div class="btn-group" role="group" aria-label="Basic example">
|
|
<button type="button" class="btn btn-primary">Primary</button>
|
|
<button type="button" class="btn btn-success">Success</button>
|
|
<button type="button" class="btn btn-warning">Warning</button>
|
|
</div>
|
|
</td>
|
|
<td>Group a series of buttons together on a single line with the button
|
|
group. Wrap a
|
|
series of buttons with <code>.btn</code> in <code>.btn-group.</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Buttons with Icon</td>
|
|
<td>
|
|
<button type="button" class="btn btn-info mr-1 mb-1"><i class="feather ft-info"></i>
|
|
Info</button>
|
|
</td>
|
|
<td>Bootstrap includes six predefined button styles, each serving its own
|
|
semantic
|
|
purpose.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Icon Button</td>
|
|
<td>
|
|
<button type="button" class="btn btn-icon btn-success mr-1"><i
|
|
class="feather ft-camera"></i></button>
|
|
</td>
|
|
<td>Simple Icon Button</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Floating Buttons</td>
|
|
<td>
|
|
<button type="button" class="btn btn-float btn-info"><i
|
|
class="feather ft-search"></i><span>search</span></button>
|
|
</td>
|
|
<td>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>
|
|
Use the class <code>.btn</code> along with class
|
|
<code>.btn-floating</code>
|
|
</p>
|
|
.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Loading Buttons</td>
|
|
<td>
|
|
<button class="btn btn-primary mr-1 mb-1 ladda-button" data-style="expand-up"><span
|
|
class="ladda-label">Expand
|
|
UP</span></button>
|
|
</td>
|
|
<td>Expand Animation Buttons</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</ng-container>
|
|
</m-card>
|
|
</div>
|
|
</div>
|
|
<!-- UI components end -->
|
|
<!-- Alerts start -->
|
|
<div class="row" id="alerts">
|
|
<div class="col-12" *blockUI="'alerts'; message: 'Loading'">
|
|
<m-card [options]="options" (reloadFunction)="reloadAlerts($event)">
|
|
<ng-container mCardHeaderTitle>
|
|
Alerts
|
|
</ng-container>
|
|
<ng-container mCardBody>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td class="width-200">Basic Alert</td>
|
|
<td class="width-350">
|
|
<ngb-alert [dismissible]="false" [type]="'primary'" role="alert">
|
|
<strong>Good Morning!</strong> Start your day with some alerts.
|
|
</ngb-alert>
|
|
</td>
|
|
<td>Alerts are available for any length of text, as well as an optional dismiss
|
|
button.
|
|
Add <code>.alert.alert-COLOR</code> classes for alert with all theme colors.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Alerts with Links</td>
|
|
<td>
|
|
<ngb-alert *ngIf="!isPrimaryClosed1" [type]="'primary'" [dismissible]="false" role="alert">
|
|
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a>
|
|
with some alerts.
|
|
</ngb-alert>
|
|
</td>
|
|
<td>Add <code>.alert-link</code> class to add links to alerts.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dismissible Alerts</td>
|
|
<td>
|
|
<!-- <div class="alert alert-primary alert-dismissible mb-2" role="alert"> -->
|
|
<ngb-alert *ngIf="!isPrimaryClosed2" [dismissible]="true" [type]="'primary'"
|
|
(close)="isPrimaryClosed2=true" role="alert">
|
|
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a>
|
|
with some alerts.
|
|
</ngb-alert>
|
|
<!-- </div> -->
|
|
</td>
|
|
<td>
|
|
Add a dismiss button and the <code>.alert-dismissible</code> class, which
|
|
adds
|
|
extra padding to the right of the alert and positions the
|
|
<code>.close</code>
|
|
button. On the dismiss button, add the <code>data-dismiss="alert"</code>
|
|
attribute,
|
|
which triggers the JavaScript functionality. Be sure to use the
|
|
<code><button></code>
|
|
element with it for proper behavior across all devices. To animate alerts
|
|
when
|
|
dismissing them, be sure to add the <code>.fade</code> and <code>.in</code>
|
|
classes.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Alerts with icons</td>
|
|
<td>
|
|
<ngb-alert *ngIf="!isPrimaryClosed3" class="alert-icon-left" [dismissible]="true"
|
|
[type]="'primary'" (close)="isPrimaryClosed3=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>
|
|
</td>
|
|
<td>
|
|
To add left/right icons to the alert, use class
|
|
<code>.alert-icon-left</code> or
|
|
<code>alert-icon-right</code> as required.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</ng-container>
|
|
</m-card>
|
|
</div>
|
|
</div>
|
|
<!-- Alerts end -->
|
|
<!-- Callouts start -->
|
|
<div class="row" id="callouts">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Callouts</h4>
|
|
</div>
|
|
<div class="card-content collapse show">
|
|
<div class="table-responsive ">
|
|
<table class="table table-bordered mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td class="width-200"> Basic Callout</td>
|
|
<td class="width-350">
|
|
<div class="bs-callout-info callout-border-left p-1">
|
|
<strong>Great Job!</strong>
|
|
<p>Biscuit macaroon tootsie roll croissant. Dessert candy canes
|
|
halvah cookie
|
|
liquorice.</p>
|
|
</div>
|
|
</td>
|
|
<td>Use <code>.bs-callout-COLOR</code> for color callout.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Right Bordered Callouts</td>
|
|
<td>
|
|
<div class="bs-callout-danger callout-bordered callout-border-right p-1">
|
|
<strong>Not Bad!</strong>
|
|
<p>Croissant carrot cake sesame snaps dessert wafer dessert wafer
|
|
icing jelly.</p>
|
|
</div>
|
|
</td>
|
|
<td>Use <code>.callout-border-right</code> for right bordered callout.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Callout with transparent Background</td>
|
|
<td>
|
|
<div class="bs-callout-pink callout-transparent callout-border-left p-1">
|
|
<h4 class="pink">Super cool!</h4>
|
|
<p>Cupcake macaroon chupa chups fruitcake. Candy canes cotton candy
|
|
dessert.</p>
|
|
</div>
|
|
</td>
|
|
<td>Use <code>.callout-transparent</code> for callout with white background.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Callout With Icon</td>
|
|
<td>
|
|
<div class="bs-callout-success mt-1">
|
|
<div class="media align-items-stretch">
|
|
<div class="media-left media-middle bg-success p-2 pt-3">
|
|
<i class="feather ft-eye white"></i>
|
|
</div>
|
|
<div class="media-body p-1">
|
|
<strong>Congratulations!</strong>
|
|
<p>Cake chupa chups tootsie roll brownie pastry marzipan
|
|
lollipop
|
|
sweet.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Use class <code>.callout-icon</code> to use icon with callout.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Round Callout</td>
|
|
<td>
|
|
<div class="bs-callout-danger callout-round callout-bordered callout-transparent p-1 px-2">
|
|
<strong>Not Bad!</strong>
|
|
<p>Croissant carrot cake sesame snaps dessert wafer dessert wafer
|
|
icing jelly.</p>
|
|
</div>
|
|
</td>
|
|
<td>Use class <code>.callout-round</code> for round callout.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Callouts end -->
|
|
<!-- Progress start -->
|
|
<div class="row" id="progress">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Progress</h4>
|
|
</div>
|
|
<div class="card-content collapse show">
|
|
<div class="table-responsive ">
|
|
<table class="table table-bordered mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td class="width-200">Default Progress</td>
|
|
<td class="width-350">
|
|
<div class="text-center" id="example-caption-2">Reticulating splines… 25%</div>
|
|
<ngb-progressbar height="18px" width="100px" type="primary" [value]="25">
|
|
</ngb-progressbar>
|
|
</td>
|
|
<td>To caption a progress bar, simply add a <code><div></code> with
|
|
your caption
|
|
text, align the text using a utility class, and associate the caption
|
|
with the
|
|
progress element using the aria-describedby attribute.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Striped Progress</td>
|
|
<td>
|
|
<ngb-progressbar height="18px" width="100px" [striped]="true" type="danger" [value]="60">
|
|
</ngb-progressbar>
|
|
</td>
|
|
<td>Uses a gradient to create a striped effect.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Progress Sizes</td>
|
|
<td>
|
|
<ngb-progressbar height="18px" width="100px" type="primary" [value]="25">
|
|
</ngb-progressbar>
|
|
</td>
|
|
<td>Different sized progress. For Default progress, No size class needed.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Progress end -->
|
|
<!-- Checkboxes start -->
|
|
<div class="row" id="checkbox">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Checkboxes</h4>
|
|
</div>
|
|
<div class="card-content collapse show">
|
|
<div class="table-responsive ">
|
|
<table class="table table-bordered mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td class="width-200">Basic Checkbox</td>
|
|
<td class="width-350">
|
|
<div class="card-body">
|
|
<fieldset class="checkbox">
|
|
<label>
|
|
<input type="checkbox" value="" checked> I am checked
|
|
Checkbox
|
|
</label>
|
|
</fieldset>
|
|
</div>
|
|
</td>
|
|
<td>Basic Checkbox</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="width-200">Custom Checkbox</td>
|
|
<td class="width-350">
|
|
<div class="card-body">
|
|
<span class="custom-control custom-checkbox">
|
|
<input type="checkbox" class="custom-control-input" name="customCheckbox"
|
|
id="customCheckbox1" checked>
|
|
<label class="custom-control-label" for="customCheckbox1">Checkbox Checked</label>
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td>Custom Checkbox</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Checkboxes end -->
|
|
<!-- Radio Buttons start -->
|
|
<div class="row" id="radio">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Radio Buttons</h4>
|
|
</div>
|
|
<div class="card-content collapse show">
|
|
<div class="table-responsive ">
|
|
<table class="table table-bordered mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td class="width-200">Basic Radio Buttons</td>
|
|
<td class="width-350">
|
|
<div class="card-body">
|
|
<fieldset class="radio">
|
|
<label>
|
|
<input type="radio" name="radio" value="" checked> I am
|
|
checked Radio
|
|
Button
|
|
</label>
|
|
</fieldset>
|
|
</div>
|
|
</td>
|
|
<td>Basic Radio Buttons</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="width-200">Basic Radio Buttons</td>
|
|
<td class="width-350">
|
|
<div class="card-body">
|
|
<span class="custom-control custom-radio">
|
|
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio1"
|
|
checked>
|
|
<label class="custom-control-label" for="customRadio1">Checkbox Checked</label>
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td>Custom Radio Buttons</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Radio Buttons end -->
|
|
<!-- Select start -->
|
|
<div class="row" id="select">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Select</h4>
|
|
</div>
|
|
<div class="card-content collapse show">
|
|
<div class="table-responsive ">
|
|
<table class="table table-bordered mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td class="width-200">Single Select</td>
|
|
<td class="width-350">
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<ng-multiselect-dropdown class="text" name="city" [data]="singleCities"
|
|
[(ngModel)]="basicSelectedItem" [settings]="singleDropdownSettings"
|
|
(onSelect)="onItemSelect($event)">
|
|
</ng-multiselect-dropdown>
|
|
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Use <code>ng-multiselect-dropdown</code> for basic select control.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Disabled Mode</td>
|
|
<td>
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<ng-multiselect-dropdown name="city" [data]="singleCities" [(ngModel)]="disableSelectedItem"
|
|
[settings]="singleDropdownSettings" (onSelect)="onItemSelect($event)" [disabled]="true">
|
|
</ng-multiselect-dropdown>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Select will respond to the <code>disabled</code> attribute on
|
|
<code><select></code>
|
|
elements. You can also initialize Select with
|
|
<code>disabled: true</code> to get
|
|
the same effect.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Select end -->
|
|
<!-- Input start -->
|
|
<div class="row" id="input">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Input</h4>
|
|
</div>
|
|
<div class="card-content collapse show">
|
|
<div class="table-responsive ">
|
|
<table class="table table-bordered mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td class="width-200">Default Input text</td>
|
|
<td class="width-350">
|
|
<div class="card-body">
|
|
<input type="text" class="form-control" id="basicInput">
|
|
</div>
|
|
</td>
|
|
<td>Standard form controls supported in all example form elements. Form
|
|
controls
|
|
automatically receives global styling. The .form-group class is the
|
|
easiest way to
|
|
add some structure to form elements like <code> <input>, <textarea>,
|
|
</code>and<code><select></code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Input Font Color</td>
|
|
<td>
|
|
<div class="card-body">
|
|
<input type="text" class="form-control primary" id="textColor" value="Primary colored Text">
|
|
</div>
|
|
</td>
|
|
<td>Input Primary colored Font</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Input Border Color</td>
|
|
<td>
|
|
<div class="card-body">
|
|
<input type="text" class="form-control border-success" id="textColor1"
|
|
placeholder="Success bordered Input">
|
|
</div>
|
|
</td>
|
|
<td>Input Success Border Color</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Input Background Color</td>
|
|
<td>
|
|
<div class="card-body">
|
|
<input type="text" class="form-control bg-warning" id="textColor2"
|
|
value="Background color Input">
|
|
</div>
|
|
</td>
|
|
<td>Background Warning Color Input</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Default Input with Left Icon</td>
|
|
<td>
|
|
<div class="card-body">
|
|
<fieldset class="form-group position-relative has-icon-left">
|
|
<input type="text" class="form-control" id="iconLeft"
|
|
placeholder="Icon Left, Default Input">
|
|
<div class="form-control-position">
|
|
<i class="feather ft-phone-call primary"></i>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</td>
|
|
<td>Left Icon Default Input</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Default Input group</td>
|
|
<td>
|
|
<div class="card-body">
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text" id="basic-addon1">@</span>
|
|
</div>
|
|
<input type="text" class="form-control" placeholder="Addon to Left"
|
|
aria-describedby="basic-addon1">
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Add span with <code>.input-group-prepend</code> class before
|
|
<code><input></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Input group with Switchery</td>
|
|
<td>
|
|
<div class="card-body">
|
|
<div class="input-group">
|
|
<span class="input-group-prepend" id="radio-addon1">
|
|
<span class="input-group-text">
|
|
<ui-switch class="switchery" size="small" switchColor="white" color="rgb(55, 188, 155)"
|
|
checked></ui-switch>
|
|
</span>
|
|
</span>
|
|
<input type="text" class="form-control" placeholder="Input with Left switchery"
|
|
aria-describedby="radio-addon1" />
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Add span with <code>.input-group-prepend</code> class before
|
|
<code><input></code>
|
|
text and Add switchery inside.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Input end -->
|
|
<!-- Badges start -->
|
|
<div class="row" id="badges">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Badges</h4>
|
|
</div>
|
|
<div class="card-content collapse show">
|
|
<div class="table-responsive ">
|
|
<table class="table table-bordered mb-0 pills">
|
|
<tbody>
|
|
<tr>
|
|
<td class="width-200">Basic Pills</td>
|
|
<td class="text-center width-350">
|
|
<ul class="justify-content-start nav nav-pills">
|
|
<li class="nav-item">
|
|
<span class="badge badge-pill badge-primary nav-badge">59</span>
|
|
</li>
|
|
</ul>
|
|
|
|
</td>
|
|
<td>Use the <code>.badge </code>class, followed by <code>.badge-pill</code>
|
|
with <code>.badge-secondary</code>
|
|
class within element to create default pill.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pills With Glow effect</td>
|
|
<td class="text-center pillsbackground">
|
|
<ul class="justify-content-start nav nav-pills">
|
|
<li class="nav-item">
|
|
<span class="badge badge-pill badge-warning nav-badge">68</span>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
<td>Use the <code>.badge</code> class, followed by .badge-pill with
|
|
<code>.badge-glow</code>
|
|
class within element to create <code>glow</code> styled pill.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pills with Icons</td>
|
|
<td class="text-center">
|
|
<ul class="justify-content-start nav nav-pills">
|
|
<li class="nav-item">
|
|
<span class="badge badge-pill badge-primary nav-badge"><i
|
|
class="font-medium-2 icon-line-height feather ft-droplet"></i></span>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
<td>I dont have text to put hear</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Bordered Badges (Pills)</td>
|
|
<td class="text-center pillsborder">
|
|
<ul class="justify-content-start nav nav-pills">
|
|
<li class="nav-item">
|
|
<span class="badge badge-pill badge-primary nav-badge nav-badge-pillsborder">25</span>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
<td>Use the <code>.badge</code> class, followed by<code>.badge-border</code>
|
|
with <code>.badge-success</code>
|
|
class within element to create success pill.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Badges end -->
|
|
<!-- Tooltip Triggers start -->
|
|
<div class="row" id="tooltip">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Tooltip Triggers</h4>
|
|
</div>
|
|
<div class="card-content collapse show">
|
|
<div class="table-responsive ">
|
|
<table class="table table-bordered mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td class="width-200">Hover</td>
|
|
<td class="width-350">
|
|
<div class="text-center">
|
|
<button type="button" class="btn btn-info" triggers="hover:click:hover" [autoClose]="'inside'"
|
|
ngbTooltip="Hover Triggered">
|
|
On Hover Trigger
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td>Use <code>triggers="hover"</code> for hover trigger. This is a
|
|
default trigger.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Click</td>
|
|
<td>
|
|
<div class="text-center">
|
|
<button type="button" class="btn btn-success" triggers="click" [autoClose]="'inside'"
|
|
ngbTooltip="Click Triggered">
|
|
On Click Trigger
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td>Use <code>triggers="click"</code> for click trigger.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Focus</td>
|
|
<td>
|
|
<div class="text-center">
|
|
<button type="button" class="btn btn-warning" triggers="click" [autoClose]="'false'"
|
|
ngbTooltip="Focus Triggered">
|
|
On Focus Trigger
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td>Use <code>triggers="focus"</code> for focus trigger.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Manual</td>
|
|
<td>
|
|
<div class="text-center">
|
|
<button type="button" class="btn btn-danger" ngbTooltip="Manual Tooltip" triggers="manual"
|
|
#t="ngbTooltip" [autoClose]="'outside'" (click)="t.open()">
|
|
On Manual Trigger
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td>Use <code>triggers="manual"</code> for manual trigger. You can do
|
|
show/hide
|
|
using js</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Tooltip Triggers end -->
|
|
<!-- Tags start -->
|
|
<div class="row" id="tags">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Tags</h4>
|
|
</div>
|
|
<div class="card-content collapse show">
|
|
<div class="table-responsive ">
|
|
<table class="table table-bordered mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td class="width-200">Info Label</td>
|
|
<td class="text-center width-350">
|
|
<div class="badge badge-info">Info Label</div>
|
|
</td>
|
|
<td>Use the <code>.badge</code> class, followed by<code>.badge-info</code>
|
|
class within
|
|
element to create info label.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Tags with Icons</td>
|
|
<td class="text-center">
|
|
<div class="badge badge-primary label-square">
|
|
<i class="la la-paperclip font-medium-2"></i>
|
|
<span>Primary Label</span>
|
|
</div>
|
|
</td>
|
|
<td>Use the .badge class, followed by<code>.badge-square</code> class for
|
|
square
|
|
bordered label.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Tags with Only Icons</td>
|
|
<td class="text-center">
|
|
<div class="badge badge-success round">
|
|
<i class="font-medium-2 icon-line-height feather ft-upload"></i>
|
|
</div>
|
|
</td>
|
|
<td>Use the <code>.badge</code> class, followed by<code>.round</code> class
|
|
for round
|
|
warning label.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Bordered Tags</td>
|
|
<td class="text-center">
|
|
<div class="badge border-danger danger badge-border">Danger Label</div>
|
|
</td>
|
|
<td>Use the <code>.badge-bordered</code> with class <code>.badge</code>.
|
|
Also use <code>.border-COLOR</code>
|
|
class to add border and use <code>.COLOR</code> for text color</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Tags end -->
|
|
<!-- Switch start -->
|
|
<div class="row" id="switch">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Switch</h4>
|
|
</div>
|
|
<div class="card-content collapse show">
|
|
<div class="table-responsive ">
|
|
<table class="table table-bordered mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td>Basic Switchery Toggle</td>
|
|
<td class="text-center">
|
|
<div class="card-body">
|
|
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)" checked>
|
|
</ui-switch>
|
|
<label for="switcheryColor4" class="card-title ml-1"></label>
|
|
</div>
|
|
</td>
|
|
<td>To set Switchery toggle, add <code>.switchery</code> class to checkbox.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Small Switchery</td>
|
|
<td class="text-center">
|
|
<div class="card-body">
|
|
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)" size="small"
|
|
checked></ui-switch>
|
|
<label for="switcherySize2" class="font-medium-2 text-bold-600 ml-1"></label>
|
|
</div>
|
|
</td>
|
|
<td>To set Small Switchery toggle, add <code>.switchery-sm</code> class to
|
|
checkbox.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Color Switchery (Danger Switchery)</td>
|
|
<td class="text-center">
|
|
<div class="card-body">
|
|
<ui-switch class="switchery" switchColor="white" color="rgb(218, 68, 83)" checked></ui-switch>
|
|
<label for="switcheryColor3" class="card-title ml-1"></label>
|
|
</div>
|
|
</td>
|
|
<td>To get Danger Switchery, add <code>.switchery-danger</code> class to
|
|
checkbox.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ////////////////////////////////////////////////////////////////////////////--> |