mirror of
https://github.com/tabler/tabler.git
synced 2026-07-26 04:54:40 +04:00
Release 1.0.0-alpha.13
This commit is contained in:
Michal Wolny
+230
-301
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
||||
* @version 1.0.0-alpha.12
|
||||
* @version 1.0.0-alpha.13
|
||||
* @link https://tabler.io
|
||||
* Copyright 2018-2020 The Tabler Authors
|
||||
* Copyright 2018-2020 codecalm.net Paweł Kuna
|
||||
@@ -13,22 +13,11 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
||||
<title>Ribbons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
|
||||
<meta name="msapplication-TileColor" content="#206bc4"/>
|
||||
<meta name="theme-color" content="#206bc4"/>
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
<meta name="mobile-web-app-capable" content="yes"/>
|
||||
<meta name="HandheldFriendly" content="True"/>
|
||||
<meta name="MobileOptimized" content="320"/>
|
||||
<meta name="robots" content="noindex,nofollow,noarchive"/>
|
||||
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
|
||||
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
|
||||
<meta name="description" content="Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out."/>
|
||||
<!-- CSS files -->
|
||||
<link href="../dist/css/tabler.min.css" rel="stylesheet"/>
|
||||
<link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
|
||||
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
|
||||
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
|
||||
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
|
||||
<style>
|
||||
body {
|
||||
@@ -102,139 +91,102 @@
|
||||
User Interface
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
|
||||
<li >
|
||||
<a class="dropdown-item" href="../empty.html" >
|
||||
Empty page
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../blank.html" >
|
||||
Blank page
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../buttons.html" >
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../cards.html" >
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../cards-masonry.html" >
|
||||
Cards Masonry
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../dropdowns.html" >
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../icons.html" >
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../modals.html" >
|
||||
Modals
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../maps.html" >
|
||||
Maps
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../maps-vector.html" >
|
||||
Vector maps
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../navigation.html" >
|
||||
Navigation
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../charts.html" >
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../charts-heatmap.html" >
|
||||
Charts heatmap
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../pagination.html" >
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../skeleton.html" >
|
||||
Skeleton
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../tabs.html" >
|
||||
Tabs
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../tables.html" >
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../calendar.html" >
|
||||
Calendar
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../carousel.html" >
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../lists.html" >
|
||||
Lists
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../typography.html" >
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../markdown.html" >
|
||||
Markdown
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropright">
|
||||
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
Authentication
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="../sign-in.html" class="dropdown-item">Sign in</a>
|
||||
<a href="../sign-up.html" class="dropdown-item">Sign up</a>
|
||||
<a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
|
||||
<a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-menu-columns">
|
||||
<div class="dropdown-menu-column">
|
||||
<a class="dropdown-item" href="../empty.html" >
|
||||
Empty page
|
||||
</a>
|
||||
<a class="dropdown-item" href="../blank.html" >
|
||||
Blank page
|
||||
</a>
|
||||
<a class="dropdown-item" href="../buttons.html" >
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item" href="../cards.html" >
|
||||
Cards
|
||||
</a>
|
||||
<a class="dropdown-item" href="../cards-masonry.html" >
|
||||
Cards Masonry
|
||||
</a>
|
||||
<a class="dropdown-item" href="../dropdowns.html" >
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item" href="../icons.html" >
|
||||
Icons
|
||||
</a>
|
||||
<a class="dropdown-item" href="../modals.html" >
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item" href="../maps.html" >
|
||||
Maps
|
||||
</a>
|
||||
<a class="dropdown-item" href="../maps-vector.html" >
|
||||
Vector maps
|
||||
</a>
|
||||
<a class="dropdown-item" href="../navigation.html" >
|
||||
Navigation
|
||||
</a>
|
||||
<a class="dropdown-item" href="../charts.html" >
|
||||
Charts
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropright">
|
||||
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
Error pages
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="../error-404.html" class="dropdown-item">404 page</a>
|
||||
<a href="../error-500.html" class="dropdown-item">500 page</a>
|
||||
<a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
|
||||
<div class="dropdown-menu-column">
|
||||
<a class="dropdown-item" href="../charts-heatmap.html" >
|
||||
Charts heatmap
|
||||
</a>
|
||||
<a class="dropdown-item" href="../pagination.html" >
|
||||
Pagination
|
||||
</a>
|
||||
<a class="dropdown-item" href="../skeleton.html" >
|
||||
Skeleton
|
||||
</a>
|
||||
<a class="dropdown-item" href="../tabs.html" >
|
||||
Tabs
|
||||
</a>
|
||||
<a class="dropdown-item" href="../tables.html" >
|
||||
Tables
|
||||
</a>
|
||||
<a class="dropdown-item" href="../calendar.html" >
|
||||
Calendar
|
||||
</a>
|
||||
<a class="dropdown-item" href="../carousel.html" >
|
||||
Carousel
|
||||
</a>
|
||||
<a class="dropdown-item" href="../lists.html" >
|
||||
Lists
|
||||
</a>
|
||||
<a class="dropdown-item" href="../typography.html" >
|
||||
Typography
|
||||
</a>
|
||||
<a class="dropdown-item" href="../markdown.html" >
|
||||
Markdown
|
||||
</a>
|
||||
<div class="dropright">
|
||||
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
Authentication
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="../sign-in.html" class="dropdown-item">Sign in</a>
|
||||
<a href="../sign-up.html" class="dropdown-item">Sign up</a>
|
||||
<a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
|
||||
<a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
|
||||
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropright">
|
||||
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
Error pages
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="../error-404.html" class="dropdown-item">404 page</a>
|
||||
<a href="../error-500.html" class="dropdown-item">500 page</a>
|
||||
<a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="../form-elements.html" >
|
||||
@@ -253,63 +205,38 @@
|
||||
Extra
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li >
|
||||
<a class="dropdown-item" href="../invoice.html" >
|
||||
Invoice
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../blog.html" >
|
||||
Blog cards
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../snippets.html" >
|
||||
Snippets
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../search-results.html" >
|
||||
Search results
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../pricing.html" >
|
||||
Pricing cards
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../users.html" >
|
||||
Users
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../gallery.html" >
|
||||
Gallery
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../license.html" >
|
||||
License
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../profile.html" >
|
||||
Profile
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../music.html" >
|
||||
Music
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../welcome.html" >
|
||||
Welcome
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="../activity.html" >
|
||||
Activity
|
||||
</a>
|
||||
<a class="dropdown-item" href="../gallery.html" >
|
||||
Gallery
|
||||
</a>
|
||||
<a class="dropdown-item" href="../invoice.html" >
|
||||
Invoice
|
||||
</a>
|
||||
<a class="dropdown-item" href="../search-results.html" >
|
||||
Search results
|
||||
</a>
|
||||
<a class="dropdown-item" href="../pricing.html" >
|
||||
Pricing cards
|
||||
</a>
|
||||
<a class="dropdown-item" href="../users.html" >
|
||||
Users
|
||||
</a>
|
||||
<a class="dropdown-item" href="../license.html" >
|
||||
License
|
||||
</a>
|
||||
<a class="dropdown-item" href="../music.html" >
|
||||
Music
|
||||
</a>
|
||||
<a class="dropdown-item" href="../widgets.html" >
|
||||
Widgets
|
||||
</a>
|
||||
<a class="dropdown-item" href="../wizard.html" >
|
||||
Wizard
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
@@ -319,68 +246,50 @@
|
||||
Layout
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-horizontal.html" >
|
||||
Horizontal
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-vertical.html" >
|
||||
Vertical
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-vertical-right.html" >
|
||||
Right vertical
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-condensed.html" >
|
||||
Condensed
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-condensed-dark.html" >
|
||||
Condensed dark
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-combo.html" >
|
||||
Combined
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-navbar-dark.html" >
|
||||
Navbar dark
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
|
||||
Navbar overlap
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-dark.html" >
|
||||
Dark mode
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-rtl.html" >
|
||||
RTL mode
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-fluid.html" >
|
||||
Fluid
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../layout-fluid-vertical.html" >
|
||||
Fluid vertical
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-menu-columns">
|
||||
<div class="dropdown-menu-column">
|
||||
<a class="dropdown-item" href="../layout-horizontal.html" >
|
||||
Horizontal
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-vertical.html" >
|
||||
Vertical
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-vertical-right.html" >
|
||||
Right vertical
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-condensed.html" >
|
||||
Condensed
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-condensed-dark.html" >
|
||||
Condensed dark
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-combo.html" >
|
||||
Combined
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu-column">
|
||||
<a class="dropdown-item" href="../layout-navbar-dark.html" >
|
||||
Navbar dark
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
|
||||
Navbar overlap
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-dark.html" >
|
||||
Dark mode
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-rtl.html" >
|
||||
RTL mode
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-fluid.html" >
|
||||
Fluid
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-fluid-vertical.html" >
|
||||
Fluid vertical
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="../docs/index.html" >
|
||||
@@ -641,7 +550,7 @@
|
||||
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
|
||||
</span>
|
||||
Changelog
|
||||
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
|
||||
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.13</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -658,12 +567,15 @@
|
||||
</div>
|
||||
<h2 id="default-markup">Default markup</h2>
|
||||
<p>Use the <code class="language-plaintext highlighter-rouge">ribbon</code> class to add the default ribbon to any section of your interface.</p>
|
||||
<div class="example no_toc_section">
|
||||
<div class="example no_toc_section example-bg">
|
||||
<div class="example-content">
|
||||
<div class="card">
|
||||
<div class="card-body h-8">
|
||||
</div>
|
||||
<div class="ribbon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
||||
<div class="example-column example-column-1">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 5rem">
|
||||
</div>
|
||||
<div class="ribbon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -671,9 +583,10 @@
|
||||
<div class="example-code">
|
||||
<figure class="highlight">
|
||||
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body h-8"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span> <span class="na">style=</span><span class="s">"height: 5rem"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ribbon"</span><span class="nt">></span><span class="c"><!-- SVG icon code --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ribbon"</span><span class="nt">></span>
|
||||
<span class="c"><!-- SVG icon code --></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre>
|
||||
</figure>
|
||||
@@ -687,12 +600,15 @@
|
||||
<li><code class="language-plaintext highlighter-rouge">ribbon-left</code> - moves it to the lefg</li>
|
||||
</ul>
|
||||
<p>Using multiple classes at once will give you more position options. For example, the following class: <code class="language-plaintext highlighter-rouge">.ribbon.ribbon-top.ribbon-left</code> will move the ribbon to the top left corner.</p>
|
||||
<div class="example no_toc_section">
|
||||
<div class="example no_toc_section example-bg">
|
||||
<div class="example-content">
|
||||
<div class="card">
|
||||
<div class="card-body h-8">
|
||||
</div>
|
||||
<div class="ribbon ribbon-top ribbon-left"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
||||
<div class="example-column example-column-1">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 5rem">
|
||||
</div>
|
||||
<div class="ribbon ribbon-top ribbon-left">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -700,21 +616,25 @@
|
||||
<div class="example-code">
|
||||
<figure class="highlight">
|
||||
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body h-8"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span> <span class="na">style=</span><span class="s">"height: 5rem"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ribbon ribbon-top ribbon-left"</span><span class="nt">></span><span class="c"><!-- SVG icon code --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ribbon ribbon-top ribbon-left"</span><span class="nt">></span>
|
||||
<span class="c"><!-- SVG icon code --></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="ribbon-color">Ribbon color</h2>
|
||||
<p>Customize the ribbon’s background color. You can click <a href="./colors.html">here</a> to see the list of available colors.</p>
|
||||
<div class="example no_toc_section">
|
||||
<div class="example no_toc_section example-bg">
|
||||
<div class="example-content">
|
||||
<div class="card">
|
||||
<div class="card-body h-8">
|
||||
</div>
|
||||
<div class="ribbon bg-red"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
||||
<div class="example-column example-column-1">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 5rem">
|
||||
</div>
|
||||
<div class="ribbon bg-red">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -722,21 +642,25 @@
|
||||
<div class="example-code">
|
||||
<figure class="highlight">
|
||||
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body h-8"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span> <span class="na">style=</span><span class="s">"height: 5rem"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ribbon bg-red"</span><span class="nt">></span><span class="c"><!-- SVG icon code --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ribbon bg-red"</span><span class="nt">></span>
|
||||
<span class="c"><!-- SVG icon code --></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="ribbon-text">Ribbon text</h2>
|
||||
<p>Add your own text to a ribbon to display any additional information and make it easy to spot for users.</p>
|
||||
<div class="example no_toc_section">
|
||||
<div class="example no_toc_section example-bg">
|
||||
<div class="example-content">
|
||||
<div class="card">
|
||||
<div class="card-body h-8">
|
||||
</div>
|
||||
<div class="ribbon bg-green"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
||||
<div class="example-column example-column-1">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 5rem">
|
||||
</div>
|
||||
<div class="ribbon bg-green">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -744,21 +668,25 @@
|
||||
<div class="example-code">
|
||||
<figure class="highlight">
|
||||
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body h-8"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span> <span class="na">style=</span><span class="s">"height: 5rem"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ribbon bg-green"</span><span class="nt">></span><span class="c"><!-- SVG icon code --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ribbon bg-green"</span><span class="nt">></span>
|
||||
<span class="c"><!-- SVG icon code --></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="ribbon-style">Ribbon style</h2>
|
||||
<p>Change the style of a ribbon to make it go well with your interface design.</p>
|
||||
<div class="example no_toc_section">
|
||||
<div class="example no_toc_section example-bg">
|
||||
<div class="example-content">
|
||||
<div class="card">
|
||||
<div class="card-body h-8">
|
||||
</div>
|
||||
<div class="ribbon ribbon-bookmark bg-orange"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
||||
<div class="example-column example-column-1">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 5rem">
|
||||
</div>
|
||||
<div class="ribbon ribbon-bookmark bg-orange">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -766,9 +694,10 @@
|
||||
<div class="example-code">
|
||||
<figure class="highlight">
|
||||
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body h-8"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span> <span class="na">style=</span><span class="s">"height: 5rem"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ribbon ribbon-bookmark bg-orange"</span><span class="nt">></span><span class="c"><!-- SVG icon code --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ribbon ribbon-bookmark bg-orange"</span><span class="nt">></span>
|
||||
<span class="c"><!-- SVG icon code --></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre>
|
||||
</figure>
|
||||
@@ -785,7 +714,7 @@
|
||||
<div class="col-lg-auto ml-lg-auto">
|
||||
<ul class="list-inline list-inline-dots mb-0">
|
||||
<li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
|
||||
<li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
|
||||
<li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
|
||||
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -797,7 +726,7 @@
|
||||
All rights reserved.
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
|
||||
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.13</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user