github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

enhanced ribbons 

- fixed style
- created demo page
- created docs
pull/2197/head
REJack 5 years ago
parent
1aa67a08ea
commit
6b683b1d94
No known key found for this signature in database
GPG Key ID: 9F3976CC630CC888
4 changed files with 982 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      build/scss/_variables.scss
  2. 2
      docs/_config.yml
  3. 165
      docs/components/ribbons.md
  4. 806
      pages/UI/ribbons.html

18
build/scss/_variables.scss
Unescape View File

@ -182,15 +182,15 @@ $ribbon-border-size: 3px !default;
$ribbon-line-height: 100% !default;
$ribbon-padding: .375rem 0 !default;
$ribbon-font-size: .8rem !default;
$ribbon-width: 110px !default;
$ribbon-wrapper-size: 90px !default;
$ribbon-top: 9px !default;
$ribbon-right: -12px !default;
$ribbon-lg-wrapper-size: 180px !default;
$ribbon-width: 90px !default;
$ribbon-wrapper-size: 70px !default;
$ribbon-top: 10px !default;
$ribbon-right: -2px !default;
$ribbon-lg-wrapper-size: 120px !default;
$ribbon-lg-width: 160px !default;
$ribbon-lg-top: 26px !default;
$ribbon-lg-right: -59px !default;
$ribbon-xl-wrapper-size: 240px !default;
$ribbon-lg-right: 0px !default;
$ribbon-xl-wrapper-size: 180px !default;
$ribbon-xl-width: 240px !default;
$ribbon-xl-top: 59px !default;
$ribbon-xl-right: -48px !default;
$ribbon-xl-top: 47px !default;
$ribbon-xl-right: 4px !default;

2
docs/_config.yml
Unescape View File

@ -52,6 +52,8 @@ navigation:
url: components/boxes.html
- title: Direct Chat
url: components/direct-chat.html
- title: Ribbons
url: components/ribbons.html
- title: JavaScript
icon: fas fa-code
url: javascript

165
docs/components/ribbons.md
Unescape View File

@ -0,0 +1,165 @@
---
layout: page
title: Ribbons Component
---
The ribbons component is a easy way to display informations above any content. The `.ribbon-warpper` needs to be inside a element with _position:relative;_. In this docs page we place the ribbon always inside `<div class="position-relative p-3 bg-gray" style="height: 180px"></div>` for demo purpose but it can placed inside cards, table rows & many more.
The ribbon comes in three sizes to display more text or use larger font sizes, default (only `.ribbon-wrapper`), large (`.ribbon-wrapper` with `.ribbon-lg`), extra large (`.ribbon-wrapper` with `.ribbon-xl`).
##### Example Markup
{: .text-bold .text-dark .mt-5}
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper">
<div class="ribbon bg-primary">
Ribbon
</div>
</div>
Ribbon Default <br />
<small>.ribbon-wrapper.ribbon-lg .ribbon</small>
</div>
```html
<div class="ribbon-wrapper">
<div class="ribbon bg-primary">
Ribbon
</div>
</div>
```
{: .max-height-300}
##### Ribbon Size Variations
{: .text-bold .text-dark .mt-5}
<div class="row">
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper">
<div class="ribbon bg-primary">
Ribbon
</div>
</div>
Ribbon Default <br />
<small>.ribbon-wrapper.ribbon-lg .ribbon</small>
</div>
</div>
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-lg">
<div class="ribbon bg-info">
Ribbon Large
</div>
</div>
Ribbon Large <br />
<small>.ribbon-wrapper.ribbon-lg .ribbon</small>
</div>
</div>
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-secondary">
Ribbon Extra Large
</div>
</div>
Ribbon Extra Large <br />
<small>.ribbon-wrapper.ribbon-xl .ribbon</small>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" markdown="1">
```html
<div class="ribbon-wrapper">
<div class="ribbon bg-primary">
Ribbon
</div>
</div>
```
</div>
<div class="col-sm-4" markdown="1">
```html
<div class="ribbon-wrapper ribbon-lg">
<div class="ribbon bg-info">
Ribbon Large
</div>
</div>
```
</div>
<div class="col-sm-4" markdown="1">
```html
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-secondary">
Ribbon Extra Large
</div>
</div>
```
</div>
</div>
##### Text Size Variations
{: .text-bold .text-dark .mt-5}
<div class="row">
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-lg">
<div class="ribbon bg-success text-lg">
Ribbon
</div>
</div>
Ribbon Large <br /> with Large Text <br />
<small>.ribbon-wrapper.ribbon-lg .ribbon.text-lg</small>
</div>
</div>
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-warning text-lg">
Ribbon
</div>
</div>
Ribbon Extra Large <br /> with Large Text <br />
<small>.ribbon-wrapper.ribbon-xl .ribbon.text-lg</small>
</div>
</div>
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-danger text-xl">
Ribbon
</div>
</div>
Ribbon Extra Large <br /> with Extra Large Text <br />
<small>.ribbon-wrapper.ribbon-xl .ribbon.text-xl</small>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" markdown="1">
```html
<div class="ribbon-wrapper ribbon-lg">
<div class="ribbon bg-success text-lg">
Ribbon
</div>
</div>
```
</div>
<div class="col-sm-4" markdown="1">
```html
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-warning text-lg">
Ribbon
</div>
</div>
```
</div>
<div class="col-sm-4" markdown="1">
```html
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-danger text-xl">
Ribbon
</div>
</div>
```
</div>
</div>

806
pages/UI/ribbons.html
Unescape View File

@ -0,0 +1,806 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 3 | UI Ribbons</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="../../index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="../../dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="../../dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="../../dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
<i class="fas fa-th-large"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="../../index3.html" class="brand-link">
<img src="../../dist/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="../../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
<a href="#" class="d-block">Alexander Pierce</a>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
<br /> with font-awesome or any other icon font library -->
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../index.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="../../index2.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="../../index3.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../widgets.html" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Widgets
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Layout Options
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/boxed.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Boxed</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/fixed-sidebar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Fixed Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/fixed-topnav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Fixed Navbar</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/fixed-footer.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Fixed Footer</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/collapsed-sidebar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Collapsed Sidebar</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-chart-pie"></i>
<p>
Charts
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../charts/chartjs.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>ChartJS</p>
</a>
</li>
<li class="nav-item">
<a href="../charts/flot.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Flot</p>
</a>
</li>
<li class="nav-item">
<a href="../charts/inline.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Inline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tree"></i>
<p>
UI Elements
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../UI/general.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/icons.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/buttons.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Buttons</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/sliders.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Sliders</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/modals.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/ribbons.html" class="nav-link active">
<i class="far fa-circle nav-icon"></i>
<p>Ribbons</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-edit"></i>
<p>
Forms
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../forms/general.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>General Elements</p>
</a>
</li>
<li class="nav-item">
<a href="../forms/advanced.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Advanced Elements</p>
</a>
</li>
<li class="nav-item">
<a href="../forms/editors.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Editors</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-table"></i>
<p>
Tables
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../tables/simple.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Simple Tables</p>
</a>
</li>
<li class="nav-item">
<a href="../tables/data.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>DataTables</p>
</a>
</li>
<li class="nav-item">
<a href="../tables/jsgrid.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>jsGrid</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="../calendar.html" class="nav-link">
<i class="nav-icon far fa-calendar-alt"></i>
<p>
Calendar
<span class="badge badge-info right">2</span>
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon far fa-envelope"></i>
<p>
Mailbox
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../mailbox/mailbox.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Inbox</p>
</a>
</li>
<li class="nav-item">
<a href="../mailbox/compose.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Compose</p>
</a>
</li>
<li class="nav-item">
<a href="../mailbox/read-mail.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Read</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-book"></i>
<p>
Pages
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/invoice.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Invoice</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/profile.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Profile</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/e_commerce.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>E-commerce</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/projects.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Projects</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/project_add.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Project Add</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/project_edit.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Project Edit</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/project_detail.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Project Detail</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/contacts.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Contacts</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon far fa-plus-square"></i>
<p>
Extras
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/login.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Register</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/lockscreen.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Lockscreen</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/legacy-user-menu.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Legacy User Menu</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/language-menu.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Language Menu</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/404.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Error 404</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/500.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Error 500</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/blank.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Blank Page</p>
</a>
</li>
<li class="nav-item">
<a href="../../starter.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Starter Page</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">MISCELLANEOUS</li>
<li class="nav-item">
<a href="https://adminlte.io/docs/3.0" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Documentation</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1>Ribbons</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Ribbons</li>
</ol>
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Ribbons</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<div class="row">
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper">
<div class="ribbon bg-primary">
Ribbon
</div>
</div>
Ribbon Default <br />
<small>.ribbon-wrapper.ribbon-lg .ribbon</small>
</div>
</div>
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-lg">
<div class="ribbon bg-info">
Ribbon Large
</div>
</div>
Ribbon Large <br />
<small>.ribbon-wrapper.ribbon-lg .ribbon</small>
</div>
</div>
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-secondary">
Ribbon Extra Large
</div>
</div>
Ribbon Extra Large <br />
<small>.ribbon-wrapper.ribbon-xl .ribbon</small>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-lg">
<div class="ribbon bg-success text-lg">
Ribbon
</div>
</div>
Ribbon Large <br /> with Large Text <br />
<small>.ribbon-wrapper.ribbon-lg .ribbon.text-lg</small>
</div>
</div>
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-warning text-lg">
Ribbon
</div>
</div>
Ribbon Extra Large <br /> with Large Text <br />
<small>.ribbon-wrapper.ribbon-xl .ribbon.text-lg</small>
</div>
</div>
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-danger text-xl">
Ribbon
</div>
</div>
Ribbon Extra Large <br /> with Extra Large Text <br />
<small>.ribbon-wrapper.ribbon-xl .ribbon.text-xl</small>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="float-right d-none d-sm-block">
<b>Version</b> 3.0.0-beta.2
</div>
<strong>Copyright &copy; 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong> All rights
reserved.
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<!-- jQuery -->
<script src="../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- Ion Slider -->
<script src="../../plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<!-- Bootstrap slider -->
<script src="../../plugins/bootstrap-slider/bootstrap-slider.min.js"></script>
<script>
$(function () {
/* BOOTSTRAP SLIDER */
$('.slider').bootstrapSlider()
/* ION SLIDER */
$('#range_1').ionRangeSlider({
min : 0,
max : 5000,
from : 1000,
to : 4000,
type : 'double',
step : 1,
prefix : '$',
prettify: false,
hasGrid : true
})
$('#range_2').ionRangeSlider()
$('#range_5').ionRangeSlider({
min : 0,
max : 10,
type : 'single',
step : 0.1,
postfix : ' mm',
prettify: false,
hasGrid : true
})
$('#range_6').ionRangeSlider({
min : -50,
max : 50,
from : 0,
type : 'single',
step : 1,
postfix : '°',
prettify: false,
hasGrid : true
})
$('#range_4').ionRangeSlider({
type : 'single',
step : 100,
postfix : ' light years',
from : 55000,
hideMinMax: true,
hideFromTo: false
})
$('#range_3').ionRangeSlider({
type : 'double',
postfix : ' miles',
step : 10000,
from : 25000000,
to : 35000000,
onChange: function (obj) {
var t = ''
for (var prop in obj) {
t += prop + ': ' + obj[prop] + '\r\n'
}
$('#result').html(t)
},
onLoad : function (obj) {
//
}
})
})
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save