initial commit: migrated from FossilSCM to git
This commit is contained in:
Brian Sakal
@@ -0,0 +1,349 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Accordions - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Accordions are used to toggle sections of content. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/accordions.html">
|
||||
<meta property="og:title" content="Accordions - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Accordions are used to toggle sections of content. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/accordions.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="accordions">
|
||||
<h3 class="s-title">Accordions<a class="anchor" href="#accordions" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Accordions are used to toggle sections of content.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-md-12">
|
||||
<div class="accordion">
|
||||
<input id="accordion-1" type="radio" name="accordion-radio" hidden="" checked="">
|
||||
<label class="accordion-header c-hand" for="accordion-1"><i class="icon icon-arrow-right mr-1"></i>Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="#accordions">Element 1</a></li>
|
||||
<li class="menu-item"><a href="#accordions">Element 2</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-2" type="radio" name="accordion-radio" hidden="">
|
||||
<label class="accordion-header c-hand" for="accordion-2"><i class="icon icon-arrow-right mr-1"></i>Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="#accordions">Layout 1</a></li>
|
||||
<li class="menu-item"><a href="#accordions">Layout 2</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-3" type="radio" name="accordion-radio" hidden="">
|
||||
<label class="accordion-header c-hand" for="accordion-3"><i class="icon icon-arrow-right mr-1"></i>Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="#accordions">Component 1</a></li>
|
||||
<li class="menu-item"><a href="#accordions">Component 2</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-md-12">
|
||||
<div class="accordion">
|
||||
<input id="accordion-4" type="checkbox" name="accordion-checkbox" hidden="" checked="">
|
||||
<label class="accordion-header c-hand" for="accordion-4">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="#accordions">Element 1</a></li>
|
||||
<li class="menu-item"><a href="#accordions">Element 2</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-5" type="checkbox" name="accordion-checkbox" hidden="">
|
||||
<label class="accordion-header c-hand" for="accordion-5">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="#accordions">Layout 1</a></li>
|
||||
<li class="menu-item"><a href="#accordions">Layout 2</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-6" type="checkbox" name="accordion-checkbox" hidden="">
|
||||
<label class="accordion-header c-hand" for="accordion-6">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="#accordions">Component 1</a></li>
|
||||
<li class="menu-item"><a href="#accordions">Component 2</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- standard Accordions example --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"accordion-1"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"accordion-checkbox"</span> <span class="hljs-attr">hidden</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"accordion-1"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right mr-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
|
||||
Title
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>></span>
|
||||
<span class="hljs-comment"><!-- Accordions content --></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- mutually exclusive Accordions example (with same input names) --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"accordion-1"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"accordion-radio"</span> <span class="hljs-attr">hidden</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"accordion-1"</span>></span>
|
||||
Title
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>></span>
|
||||
<span class="hljs-comment"><!-- Accordions content --></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<p>Alternatively, you can use <code>details</code> and <code>summary</code> instead of <code>input</code> radio or checkbox trick.
|
||||
Add the <code>open</code> attribute to <code>details</code> to expand it.
|
||||
Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank">under consideration</a>.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- details and summary Accordions example --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">details</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span> <span class="hljs-attr">open</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">summary</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right mr-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
|
||||
Title
|
||||
<span class="hljs-tag"></<span class="hljs-name">summary</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>></span>
|
||||
<span class="hljs-comment"><!-- Accordions content --></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">details</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,317 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Avatars - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/avatars.html">
|
||||
<meta property="og:title" content="Avatars - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/avatars.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="avatars">
|
||||
<h3 class="s-title">Avatars<a class="anchor" href="#avatars" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Avatars are user profile pictures. </p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<figure class="avatar avatar-xl mr-2"><img src="../img/avatar-1.png" alt="Avatar XL"></figure>
|
||||
<figure class="avatar avatar-lg mr-2"><img src="../img/avatar-2.png" alt="Avatar LG"></figure>
|
||||
<figure class="avatar mr-2"><img src="../img/avatar-3.png" alt="Avatar"></figure>
|
||||
<figure class="avatar avatar-sm mr-2"><img src="../img/avatar-4.png" alt="Avatar SM"></figure>
|
||||
<figure class="avatar avatar-xs mr-2"><img src="../img/avatar-5.png" alt="Avatar XS"></figure>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<figure class="avatar avatar-xl mr-2" data-initial="YZ"></figure>
|
||||
<figure class="avatar avatar-lg mr-2" data-initial="YZ"></figure>
|
||||
<figure class="avatar mr-2" data-initial="YZ"></figure>
|
||||
<figure class="avatar avatar-sm mr-2" data-initial="YZ"></figure>
|
||||
<figure class="avatar avatar-xs mr-2" data-initial="YZ"></figure>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add the <code>avatar</code> class to <img> element.
|
||||
There are 4 additional sizes available, including <code>avatar-xl</code>(64px), <code>avatar-lg</code>(48px), <code>avatar-sm</code>(24px), and <code>avatar-xs</code>(16px).
|
||||
By default, the avatar size is 32px.
|
||||
</p>
|
||||
<p>
|
||||
For users who don't have profile pictures, you may use their initials for avatars.
|
||||
Add the <code>avatar</code> class and avatar size class to <div> element.
|
||||
The <code>data-initial</code> attribute is the name appear inside the avatar.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- Basic avatar examples --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-color: #5755d9;"</span>></span><span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- Show initals when avatar image is unavailable or not fully loaded --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-color: #5755d9;"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="avatars-icons">Avatar icons<a class="anchor" href="#avatars-icons" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<figure class="avatar avatar-xl mr-2"><img src="../img/avatar-1.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-2.png" alt="Avatar"></figure>
|
||||
<figure class="avatar avatar-lg mr-2"><img src="../img/avatar-2.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-3.png" alt="Avatar"></figure>
|
||||
<figure class="avatar mr-2"><img src="../img/avatar-3.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-4.png" alt="Avatar"></figure>
|
||||
<figure class="avatar avatar-sm mr-2"><img src="../img/avatar-4.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-5.png" alt="Avatar"></figure>
|
||||
<figure class="avatar avatar-xs"><img src="../img/avatar-5.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-1.png" alt="Avatar"></figure>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-5.png"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar-icon"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="avatars-presence">Avatar presence<a class="anchor" href="#avatars-presence" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<figure class="avatar avatar-xl mr-2" data-initial="YZ"><i class="avatar-presence online"></i></figure>
|
||||
<figure class="avatar avatar-lg mr-2" data-initial="YZ"><i class="avatar-presence busy"></i></figure>
|
||||
<figure class="avatar mr-2" data-initial="YZ"><i class="avatar-presence away"></i></figure>
|
||||
<figure class="avatar avatar-sm mr-2" data-initial="YZ"><i class="avatar-presence offline"></i></figure>
|
||||
<figure class="avatar avatar-xs mr-2" data-initial="YZ"><i class="avatar-presence online"></i></figure>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Avatars support presence indicators.
|
||||
You can add an <i> element with the <code>avatar-presence</code> class, and add <code>online</code>, <code>busy</code> or <code>away</code> class for different status colors.
|
||||
The default is gray which means offline.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar-presence online"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,288 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Badges - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Badges are often used as unread number indicators. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/badges.html">
|
||||
<meta property="og:title" content="Badges - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Badges are often used as unread number indicators. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/badges.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="badges">
|
||||
<h3 class="s-title">Badges<a class="anchor" href="#badges" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Badges are often used as unread number indicators.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-3 col-xs-6"><span class="badge" data-badge="">Notifications</span></div>
|
||||
<div class="column col-3 col-xs-6"><span class="badge" data-badge="8">Notifications</span></div>
|
||||
<div class="column col-3 col-xs-6"><span class="badge" data-badge="88">Notifications</span></div>
|
||||
<div class="column col-3 col-xs-6"><span class="badge" data-badge="888">Notifications</span></div>
|
||||
</div>
|
||||
<p>Add the <code>badge</code> class to non self closing elements.
|
||||
And add the <code>data-badge</code> attribute to define the content of a badge.
|
||||
The badge will appear in the top-right direction of the element.
|
||||
</p>
|
||||
<p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-sm-12">
|
||||
<button class="btn badge" data-badge="">Button</button>
|
||||
<button class="btn badge" data-badge="8">Button</button>
|
||||
</div>
|
||||
<div class="column col-sm-12">
|
||||
<button class="btn btn-primary badge" data-badge="">Button</button>
|
||||
<button class="btn btn-primary badge" data-badge="8">Button</button>
|
||||
</div>
|
||||
<div class="column col-sm-12">
|
||||
<figure class="avatar avatar-xl badge" data-badge="8" data-initial="YZ"><img src="../img/avatar-1.png" alt="YZ"></figure>
|
||||
<figure class="avatar avatar-lg badge" data-badge="8" data-initial="YZ"><img src="../img/avatar-2.png" alt="YZ"></figure>
|
||||
<figure class="avatar badge" data-badge="8" data-initial="YZ"><img src="../img/avatar-3.png" alt="YZ"></figure>
|
||||
</div>
|
||||
</div>
|
||||
<p>Badges support <code>button</code> and <code>avatars</code> elements as well.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span>></span>
|
||||
Notifications
|
||||
<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span>></span>
|
||||
Notifications
|
||||
<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span>></span>
|
||||
Button
|
||||
<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-3.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"YZ"</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,328 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Bars - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/bars.html">
|
||||
<meta property="og:title" content="Bars - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/bars.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="bars">
|
||||
<h3 class="s-title">Bars<a class="anchor" href="#bars" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Bars represent the progress of a task or the value within the known range.
|
||||
Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements.
|
||||
</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-8 col-xs-12">
|
||||
<div class="bar bar-sm">
|
||||
<div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-8 col-xs-12">
|
||||
<div class="bar">
|
||||
<div class="bar-item tooltip" data-tooltip="50%" role="progressbar" style="width:50%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-8 col-xs-12">
|
||||
<div class="bar">
|
||||
<div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;">25%</div>
|
||||
<div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;">15%</div>
|
||||
<div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;">10%</div>
|
||||
<div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;">15%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add a container element with the <code>bar</code> class.
|
||||
And add child elements with the <code>bar-item</code> class.
|
||||
The width percentage value is needed for every <code>bar-item</code>.
|
||||
</p>
|
||||
<p>There is the <code>bar-sm</code> class for thinner Bars.
|
||||
Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- normal bars --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-sm"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:25%;"</span> <span class="hljs-attr">aria-valuenow</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">aria-valuemin</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuemax</span>=<span class="hljs-string">"100"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- multi-bars --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"25%"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:25%;"</span>></span>25%<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:15%;background:#818bd5;"</span>></span>15%<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="bars-slider">Slider bars<a class="anchor" href="#bars-slider" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-8 col-xs-12">
|
||||
<div class="bar bar-slider">
|
||||
<div class="bar-item" role="progressbar" style="width:50%;">
|
||||
<button class="bar-slider-btn btn tooltip" data-tooltip="50%" role="slider"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-8 col-xs-12">
|
||||
<div class="bar bar-slider">
|
||||
<div class="bar-item" role="progressbar" style="width:15%;">
|
||||
<button class="bar-slider-btn btn tooltip" data-tooltip="25%" role="slider"></button>
|
||||
</div>
|
||||
<div class="bar-item" role="progressbar" style="width:65%;">
|
||||
<button class="bar-slider-btn btn tooltip" data-tooltip="65%" role="slider"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>You can add the <code>bar-slider</code> class to the Bars container.
|
||||
And add child elements with the <code>bar-item</code> class and <code>bar-slider-btn</code> inside bar-item.
|
||||
You need to set the <code>bar-item</code> width manually to have the slider point.
|
||||
</p>
|
||||
<p>If there are two <code>bar-item</code> divs in one bar-slider, you will have a range slider.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- normal slider --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-slider"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:25%;"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-slider-btn btn"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- range slider --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-slider"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:15%;"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-slider-btn btn"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:65%;"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-slider-btn btn"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,282 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Breadcrumbs - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Breadcrumbs are used as navigational hierarchies to indicate current location. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/breadcrumbs.html">
|
||||
<meta property="og:title" content="Breadcrumbs - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Breadcrumbs are used as navigational hierarchies to indicate current location. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/breadcrumbs.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="breadcrumbs">
|
||||
<h3 class="s-title">Breadcrumbs<a class="anchor" href="#breadcrumbs" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<ul class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Home">Home</a></li>
|
||||
<li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Settings">Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column col-12">
|
||||
<ul class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Home">Home</a></li>
|
||||
<li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Settings">Settings</a></li>
|
||||
<li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Change avatar">Change avatar</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column col-12">
|
||||
<ul class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Home">Home</a></li>
|
||||
<li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Settings">Settings</a></li>
|
||||
<li class="breadcrumb-item">Search result: <a class="tooltip" href="#breadcrumbs" data-tooltip="Search result: Spectre">Spectre</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add a container element with the <code>breadcrumb</code> class.
|
||||
And add child elements with the <code>breadcrumb-item</code> class.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Change avatar<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,334 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Cards - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Cards are flexible content containers. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/cards.html">
|
||||
<meta property="og:title" content="Cards - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Cards are flexible content containers. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/cards.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="cards">
|
||||
<h3 class="s-title">Cards<a class="anchor" href="#cards" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Cards are flexible content containers.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image"><img class="img-responsive" src="../img/osx-el-capitan.jpg" alt="OS X El Capitan"></div>
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">Microsoft</div>
|
||||
<div class="card-subtitle text-gray">Software and hardware</div>
|
||||
</div>
|
||||
<div class="card-body">Empower every person and every organization on the planet to achieve more.</div>
|
||||
<div class="card-footer"><a class="btn btn-primary" href="#cards">Do</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">Apple</div>
|
||||
<div class="card-subtitle text-gray">Hardware and software</div>
|
||||
</div>
|
||||
<div class="card-image"><img class="img-responsive" src="../img/osx-yosemite.jpg" alt="OS X Yosemite"></div>
|
||||
<div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
|
||||
<div class="card-footer">
|
||||
<div class="btn-group btn-group-block">
|
||||
<button class="btn btn-primary">Buy</button>
|
||||
<button class="btn">Buy</button>
|
||||
<button class="btn">Buy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image"><img class="img-responsive" src="../img/macos-sierra-2.jpg" alt="macOS Sierra"></div>
|
||||
<div class="card-header">
|
||||
<button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button>
|
||||
<div class="card-title h5">Google I/O</div>
|
||||
<div class="card-subtitle text-gray">Software and hardware</div>
|
||||
</div>
|
||||
<div class="card-body">An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image"><img class="img-responsive" src="../img/osx-el-capitan-2.jpg" alt="OS X El Capitan"></div>
|
||||
<div class="card-footer"><a class="btn btn-primary" href="#cards">Buy</a><a class="btn btn-link" href="#cards">Share</a></div>
|
||||
<div class="card-body"><strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">Apple</div>
|
||||
<div class="card-subtitle text-gray">Hardware and software</div>
|
||||
</div>
|
||||
<div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
|
||||
<div class="card-image"><img class="img-responsive" src="../img/macos-sierra.jpg" alt="macOS Sierra"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">Google</div>
|
||||
<div class="card-subtitle text-gray">Software and hardware</div>
|
||||
</div>
|
||||
<div class="card-body">Organize the world’s information and make it universally accessible and useful.</div>
|
||||
<div class="card-image"><img class="img-responsive" src="../img/osx-yosemite-2.jpg" alt="OS X Yosemite"></div>
|
||||
<div class="card-footer"><a class="btn btn-primary" href="#cards">Search</a><a class="btn btn-link" href="#cards">Share</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add a container element with the <code>card</code> class.
|
||||
And add child elements with the <code>card-image</code>, <code>card-header</code>, <code>card-body</code> and/or <code>card-footer</code> classes.
|
||||
The <code>card-image</code> can be placed in any position.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-image"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive"</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-header"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-title h5"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-subtitle text-gray"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-body"</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-footer"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,271 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chips - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Chips are complex entities in small blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/chips.html">
|
||||
<meta property="og:title" content="Chips - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Chips are complex entities in small blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/chips.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="chips">
|
||||
<h3 class="s-title">Chips<a class="anchor" href="#chips" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Chips are complex entities in small blocks.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12"><span class="chip">Crime</span><span class="chip">Drama</span><span class="chip">Biography<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span><span class="chip">Mystery<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span></div>
|
||||
<div class="column col-12">
|
||||
<div class="chip">
|
||||
<figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>Tony Stark
|
||||
</div>
|
||||
<div class="chip"><img class="avatar avatar-sm" src="../img/avatar-1.png" alt="Thor Odinson">Thor Odinson</div>
|
||||
<div class="chip"><img class="avatar avatar-sm" src="../img/avatar-4.png" alt="Steve Rogers">Steve Rogers</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add a container element with the <code>chip</code> class.
|
||||
And add child text element, buttons or avatars with the <code>avatar</code> class.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>></span>Crime<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>></span>
|
||||
Biography
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-sm"</span>></span>
|
||||
Yan Zhu
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Empty states - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/empty.html">
|
||||
<meta property="og:title" content="Empty states - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/empty.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="empty">
|
||||
<h3 class="s-title">Empty states<a class="anchor" href="#empty" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<div class="empty">
|
||||
<div class="empty-icon"><i class="icon icon-3x icon-mail"></i></div>
|
||||
<p class="empty-title h5">You have no new messages</p>
|
||||
<p class="empty-subtitle">Click the button to start a conversation</p>
|
||||
<div class="empty-action">
|
||||
<button class="btn btn-primary">Send a message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-12">
|
||||
<div class="empty">
|
||||
<div class="empty-icon"><i class="icon icon-3x icon-mail"></i></div>
|
||||
<p class="empty-title h5">You've successfully signed up</p>
|
||||
<p class="empty-subtitle">Click the button to invite your friends</p>
|
||||
<div class="empty-action">
|
||||
<button class="btn btn-primary">Invite your friends</button>
|
||||
</div>
|
||||
<div class="empty-action">
|
||||
<button class="btn btn-link">Skip</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-12">
|
||||
<div class="empty">
|
||||
<div class="empty-icon"><i class="icon icon-3x icon-people"></i></div>
|
||||
<p class="empty-title h5">You are not following anyone</p>
|
||||
<p class="empty-subtitle">Start to meet new friends</p>
|
||||
<div class="empty-action input-group input-inline">
|
||||
<input class="form-input" type="text" placeholder="">
|
||||
<button class="btn btn-primary input-group-btn">Search</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements.
|
||||
Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements.
|
||||
HTML structure is exampled below.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-icon"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-people"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-title h5"</span>></span>You have no new messages<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-subtitle"</span>></span>Click the button to start a conversation.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-action"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>Send a message<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,414 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Menu - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Menus are vertical list of links or buttons for actions and navigation. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/menu.html">
|
||||
<meta property="og:title" content="Menu - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Menus are vertical list of links or buttons for actions and navigation. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/menu.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="menu">
|
||||
<h3 class="s-title">Menu<a class="anchor" href="#menu" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Menus are vertical list of links or buttons for actions and navigation.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-4 col-xs-12">
|
||||
<ul class="menu">
|
||||
<li class="menu-item">
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-icon"><img class="avatar" src="../img/avatar-4.png" alt="Avatar"></div>
|
||||
<div class="tile-content">Steve Rogers</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li class="menu-item"><a class="active" href="#menus">My profile</a>
|
||||
<div class="menu-badge">
|
||||
<label class="form-checkbox">
|
||||
<input type="checkbox"><i class="form-icon"></i>Public
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-item"><a href="#menus">Settings</a>
|
||||
<div class="menu-badge">
|
||||
<label class="label label-primary">2</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-item"><a href="#menus">Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<ul class="menu">
|
||||
<li class="divider" data-content="LINKS"></li>
|
||||
<li class="menu-item"><a href="#menus">Slack</a></li>
|
||||
<li class="menu-item"><a href="#menus">Hipchat</a></li>
|
||||
<li class="menu-item"><a href="#menus">Skype</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<ul class="menu">
|
||||
<li class="menu-item">
|
||||
<label class="form-checkbox">
|
||||
<input type="checkbox" checked=""><i class="form-icon"></i> form-checkbox
|
||||
</label>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<label class="form-radio">
|
||||
<input type="radio" checked=""><i class="form-icon"></i> form-radio
|
||||
</label>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<label class="form-switch">
|
||||
<input type="checkbox" checked=""><i class="form-icon"></i> form-switch
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add a container element with the <code>menu</code> class.
|
||||
And add child elements with the <code>menu-item</code> class.
|
||||
You can separate menu items with a <code>divider</code>.
|
||||
Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
|
||||
</p>
|
||||
<p>Menus also have <a href="../elements/forms.html" target="_blank">Form controls</a> (checkbox, radio and checkbox) support.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
|
||||
<span class="hljs-comment"><!-- menu header text --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span> <span class="hljs-attr">data-content</span>=<span class="hljs-string">"LINKS"</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-comment"><!-- menu item standard --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-link"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Slack
|
||||
<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-comment"><!-- menu item with form control --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> form-checkbox
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-comment"><!-- menu divider --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-comment"><!-- menu item with badge --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-link"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Settings
|
||||
<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-badge"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-primary"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>My profile<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-badge"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Public
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="menu-dropdown">Dropdown menu<a class="anchor" href="#menu-dropdown" aria-hidden="true">#</a></h4>
|
||||
<p>The dropdown is a combination of buttons and menus.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-xs-12">
|
||||
<div class="dropdown">
|
||||
<div class="btn-group"><a class="btn btn-primary">dropdown button</a><a class="btn btn-primary dropdown-toggle" tabindex="0"><i class="icon icon-caret"></i></a>
|
||||
<ul class="menu">
|
||||
<li class="menu-item"><a href="#dropdowns">Slack</a></li>
|
||||
<li class="menu-item"><a href="#dropdowns">Hipchat</a></li>
|
||||
<li class="menu-item"><a href="#dropdowns">Skype</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-xs-12">
|
||||
<div class="dropdown"><a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
|
||||
<ul class="menu">
|
||||
<li class="menu-item"><a href="#dropdowns">Slack</a></li>
|
||||
<li class="menu-item"><a href="#dropdowns">Hipchat</a></li>
|
||||
<li class="menu-item"><a href="#dropdowns">Skype</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p>
|
||||
<p>Add a container element with the <code>dropdown</code> class.
|
||||
And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it.
|
||||
You also need to add <code>tabindex</code> to make the buttons focusable.
|
||||
</p>
|
||||
<p>If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-xs-12 text-right">
|
||||
<div class="dropdown dropdown-right"><a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
|
||||
<ul class="menu text-left">
|
||||
<li class="menu-item"><a href="#dropdowns">Slack</a></li>
|
||||
<li class="menu-item"><a href="#dropdowns">Hipchat</a></li>
|
||||
<li class="menu-item"><a href="#dropdowns">Skype</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- basic dropdown button --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link dropdown-toggle"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>></span>
|
||||
dropdown menu <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-caret"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-comment"><!-- menu component --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- dropdown button group --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>
|
||||
dropdown button
|
||||
<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn dropdown-toggle"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-caret"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- menu component --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,374 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Modals - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Modals are flexible dialog prompts. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/modals.html">
|
||||
<meta property="og:title" content="Modals - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Modals are flexible dialog prompts. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/modals.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="modals">
|
||||
<h3 class="s-title">Modals<a class="anchor" href="#modals" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Modals are flexible dialog prompts.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column"><a class="btn btn-primary" href="#example-modal-1">Open Modal</a>
|
||||
<div class="modal" id="example-modal-1"><a class="modal-overlay" href="#modals" aria-label="Close"></a>
|
||||
<div class="modal-container" role="document">
|
||||
<div class="modal-header"><a class="btn btn-clear float-right" href="#modals" aria-label="Close"></a>
|
||||
<div class="modal-title h5">Modal title</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="content">
|
||||
<p>This is the content inside the modal.</p>
|
||||
<h4>Lorem ipsum</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
|
||||
<p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
|
||||
<h4>Cupcake ipsum</h4>
|
||||
<p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p>
|
||||
<p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p>
|
||||
<h4>Candy ipsum</h4>
|
||||
<p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p>
|
||||
<p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary">Share</button><a class="btn btn-link" href="#modals">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add a container element with the <code>modal</code> class.
|
||||
And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it.
|
||||
You can add child elements with the <code>modal-header</code>, <code>modal-body</code> and <code>modal-footer</code> - any or all of them.
|
||||
</p>
|
||||
<p>
|
||||
Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals.
|
||||
To make a modal appear, add the <code>active</code> class to the <code>modal</code> container.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal active"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-id"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-overlay"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-container"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-header"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear float-right"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-title h5"</span>></span>Modal title<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-body"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>></span>
|
||||
<span class="hljs-comment"><!-- content here --></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-footer"</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="modals-sizes">Modal sizes<a class="anchor" href="#modals-sizes" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12"><a class="btn btn-primary" href="#example-modal-2">Open small size Modal</a>
|
||||
<div class="modal modal-sm" id="example-modal-2"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a>
|
||||
<div class="modal-container" role="document">
|
||||
<div class="modal-header"><a class="btn btn-clear float-right" href="#modals-sizes" aria-label="Close"></a>
|
||||
<div class="modal-title h5">Modal title</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="content">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="input-example-7">Name</label>
|
||||
<input class="form-input" id="input-example-7" type="text" placeholder="Name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Gender</label>
|
||||
<label class="form-radio">
|
||||
<input type="radio" name="gender"><i class="form-icon"></i> Male
|
||||
</label>
|
||||
<label class="form-radio">
|
||||
<input type="radio" name="gender" checked=""><i class="form-icon"></i> Female
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary">Submit</button><a class="btn btn-link" href="#modals-sizes" aria-label="Close">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Use the <code>modal-sm</code> class for a smaller modal dialog.
|
||||
The container max width is <code>320px</code>.
|
||||
</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column"><a class="btn btn-primary" href="#example-modal-3">Open large size Modal</a>
|
||||
<div class="modal modal-lg" id="example-modal-3"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a>
|
||||
<div class="modal-container" role="document">
|
||||
<div class="modal-header"><a class="btn btn-clear float-right" href="#modals-sizes" aria-label="Close"></a>
|
||||
<div class="modal-title h5">Modal title</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="content">
|
||||
<p>This is the content inside the modal.</p>
|
||||
<h4>Lorem ipsum</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
|
||||
<p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
|
||||
<h4>Cupcake ipsum</h4>
|
||||
<p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p>
|
||||
<p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p>
|
||||
<h4>Candy ipsum</h4>
|
||||
<p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p>
|
||||
<p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary">Share</button><a class="btn btn-link" href="#modals-sizes">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Use the <code>modal-lg</code> class for a full size modal.
|
||||
The container max width is <code>960px</code>.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal modal-sm"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-overlay"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-container"</span>></span>
|
||||
<span class="hljs-comment"><!-- modal structure here --></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,294 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Nav - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/nav.html">
|
||||
<meta property="og:title" content="Nav - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/nav.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="nav">
|
||||
<h3 class="s-title">Nav<a class="anchor" href="#nav" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a href="#nav">Elements</a></li>
|
||||
<li class="nav-item active"><a href="#nav">Layout</a>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a href="#nav">Flexbox grid</a></li>
|
||||
<li class="nav-item"><a href="#nav">Responsive</a></li>
|
||||
<li class="nav-item"><a href="#nav">Navbar</a></li>
|
||||
<li class="nav-item"><a href="#nav">Empty states</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a href="#nav">Components</a></li>
|
||||
<li class="nav-item"><a href="#nav">Utilities</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add a container element with the <code>nav</code> class.
|
||||
And add child elements with the <code>nav-item</code> class.
|
||||
The <code>nav-item</code> with the <code>active</code> class will be highlighted.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Elements<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Layout<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Flexbox grid<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Responsive<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Navbar<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Empty states<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Components<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Utilities<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,327 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Pagination - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/pagination.html">
|
||||
<meta property="og:title" content="Pagination - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/pagination.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="pagination">
|
||||
<h3 class="s-title">Pagination<a class="anchor" href="#pagination" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-xs-12">
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a href="#pagination">Prev</a></li>
|
||||
<li class="page-item"><a href="#pagination">1</a></li>
|
||||
<li class="page-item"><span>...</span></li>
|
||||
<li class="page-item"><a href="#pagination">4</a></li>
|
||||
<li class="page-item active"><a href="#pagination">5</a></li>
|
||||
<li class="page-item"><a href="#pagination">6</a></li>
|
||||
<li class="page-item"><span>...</span></li>
|
||||
<li class="page-item"><a href="#pagination">9</a></li>
|
||||
<li class="page-item"><a href="#pagination">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column col-xs-12">
|
||||
<ul class="pagination">
|
||||
<li class="page-item disabled"><a href="#pagination" tabindex="-1">Prev</a></li>
|
||||
<li class="page-item active"><a href="#pagination">1</a></li>
|
||||
<li class="page-item"><a href="#pagination">2</a></li>
|
||||
<li class="page-item"><a href="#pagination">3</a></li>
|
||||
<li class="page-item"><span>...</span></li>
|
||||
<li class="page-item"><a href="#pagination">9</a></li>
|
||||
<li class="page-item"><a href="#pagination">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add a container element with the <code>pagination</code> class.
|
||||
And add child elements with the <code>page-item</code> class.
|
||||
The <code>page-item</code> with the <code>active</code> class will be highlighted.
|
||||
You can add the <code>disabled</code> class to the <code>page-item</code> to have unclickable page links.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item disabled"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>></span>Previous<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>12<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Next<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<ul class="pagination">
|
||||
<li class="page-item page-prev"><a href="#pagination">
|
||||
<div class="page-item-subtitle">Previous</div>
|
||||
<div class="page-item-title h5">Getting started</div></a></li>
|
||||
<li class="page-item page-next"><a href="#pagination">
|
||||
<div class="page-item-subtitle">Next</div>
|
||||
<div class="page-item-title h5">Layout</div></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>You could use previous and next pagination to navigate. </p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item page-prev"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-subtitle"</span>></span>Previous<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-title h5"</span>></span>Getting started<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item page-next"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-subtitle"</span>></span>Next<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-title h5"</span>></span>Layout<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,374 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Panels - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Panels are flexible view container with auto-expand content section. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/panels.html">
|
||||
<meta property="og:title" content="Panels - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Panels are flexible view container with auto-expand content section. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/panels.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="panels">
|
||||
<h3 class="s-title">Panels<a class="anchor" href="#panels" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Panels are flexible view container with auto-expand content section.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="panel">
|
||||
<div class="panel-header text-center">
|
||||
<figure class="avatar avatar-lg"><img src="../img/avatar-2.png" alt="Avatar"></figure>
|
||||
<div class="panel-title h5 mt-10">Bruce Banner</div>
|
||||
<div class="panel-subtitle">THE HULK</div>
|
||||
</div>
|
||||
<nav class="panel-nav">
|
||||
<ul class="tab tab-block">
|
||||
<li class="tab-item active"><a href="#panels">Profile</a></li>
|
||||
<li class="tab-item"><a href="#panels">Files</a></li>
|
||||
<li class="tab-item"><a href="#panels">Tasks</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="panel-body">
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">E-mail</div>
|
||||
<div class="tile-subtitle">bruce.banner@hulk.com</div>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
<button class="btn btn-link btn-action btn-lg tooltip tooltip-left" data-tooltip="Edit E-mail"><i class="icon icon-edit"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">Skype</div>
|
||||
<div class="tile-subtitle">bruce.banner</div>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
<button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">Location</div>
|
||||
<div class="tile-subtitle">Dayton, Ohio</div>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
<button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<button class="btn btn-primary btn-block">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title h6">Comments</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="tile">
|
||||
<div class="tile-icon">
|
||||
<figure class="avatar"><img src="../img/avatar-1.png" alt="Avatar"></figure>
|
||||
</div>
|
||||
<div class="tile-content">
|
||||
<p class="tile-title text-bold">Thor Odinson</p>
|
||||
<p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<div class="tile-icon">
|
||||
<figure class="avatar"><img src="../img/avatar-2.png" alt="Avatar"></figure>
|
||||
</div>
|
||||
<div class="tile-content">
|
||||
<p class="tile-title text-bold">Bruce Banner</p>
|
||||
<p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<div class="tile-icon">
|
||||
<figure class="avatar" data-initial="TS"></figure>
|
||||
</div>
|
||||
<div class="tile-content">
|
||||
<p class="tile-title text-bold">Tony Stark</p>
|
||||
<p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<div class="tile-icon">
|
||||
<figure class="avatar"><img src="../img/avatar-4.png" alt="Avatar"></figure>
|
||||
</div>
|
||||
<div class="tile-content">
|
||||
<p class="tile-title text-bold">Steve Rogers</p>
|
||||
<p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<div class="tile-icon">
|
||||
<figure class="avatar"><img src="../img/avatar-3.png" alt="Avatar"></figure>
|
||||
</div>
|
||||
<div class="tile-content">
|
||||
<p class="tile-title text-bold">Natasha Romanoff</p>
|
||||
<p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<div class="input-group">
|
||||
<input class="form-input" type="text" placeholder="Hello">
|
||||
<button class="btn btn-primary input-group-btn">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add a container element with the <code>panel</code> class.
|
||||
And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> classes.
|
||||
The <code>panel-body</code> can be auto expanded and vertically scrollable.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-header"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-title"</span>></span>Comments<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-nav"</span>></span>
|
||||
<span class="hljs-comment"><!-- navigation components: tabs, breadcrumbs or pagination --></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-body"</span>></span>
|
||||
<span class="hljs-comment"><!-- contents --></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-footer"</span>></span>
|
||||
<span class="hljs-comment"><!-- buttons or inputs --></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,335 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Popovers - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Popovers are small overlay content containers. Popovers component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/popovers.html">
|
||||
<meta property="og:title" content="Popovers - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Popovers are small overlay content containers. Popovers component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/popovers.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="popovers">
|
||||
<h3 class="s-title">Popovers<a class="anchor" href="#popovers" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-3 col-sm-6">
|
||||
<div class="popover"><a class="btn btn-primary" href="#popovers">top popover</a>
|
||||
<div class="popover-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">Apple</div>
|
||||
<div class="card-subtitle text-gray">Software and hardware</div>
|
||||
</div>
|
||||
<div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-primary">Buy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-3 col-sm-6">
|
||||
<div class="popover popover-right"><a class="btn btn-primary" href="#popovers">right popover</a>
|
||||
<div class="popover-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">Apple</div>
|
||||
<div class="card-subtitle text-gray">Software and hardware</div>
|
||||
</div>
|
||||
<div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-primary">Buy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-3 col-sm-6">
|
||||
<div class="popover popover-bottom"><a class="btn btn-primary" href="#popovers">bottom popover</a>
|
||||
<div class="popover-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">Apple</div>
|
||||
<div class="card-subtitle text-gray">Software and hardware</div>
|
||||
</div>
|
||||
<div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-primary">Buy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-3 col-sm-6">
|
||||
<div class="popover popover-left"><a class="btn btn-primary" href="#popovers">left popover</a>
|
||||
<div class="popover-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">Apple</div>
|
||||
<div class="card-subtitle text-gray">Software and hardware</div>
|
||||
</div>
|
||||
<div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-primary">Buy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Wrap an element by a container with the <code>popover</code> class.
|
||||
And add a container with the <code>popover-container</code> next to the element.
|
||||
You can use <a href="#cards">Cards</a> component inside the <code>popover-container</code>.
|
||||
</p>
|
||||
<p>Also, you can add the <code>popover-right</code>, <code>popover-bottom</code> or <code>popover-left</code> class to define the position.
|
||||
By default, the popovers appear above the element.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"popover popover-right"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>right popover<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"popover-container"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-header"</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-body"</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-footer"</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,282 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Steps - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Steps are progress indicators of a sequence of task steps. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/steps.html">
|
||||
<meta property="og:title" content="Steps - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Steps are progress indicators of a sequence of task steps. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/steps.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="steps">
|
||||
<h3 class="s-title">Steps<a class="anchor" href="#steps" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Steps are progress indicators of a sequence of task steps.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<ul class="step">
|
||||
<li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 1 Tooltip"></a></li>
|
||||
<li class="step-item active"><a class="tooltip" href="#steps" data-tooltip="Step 2 Tooltip"></a></li>
|
||||
<li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 3 Tooltip"></a></li>
|
||||
<li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 4 Tooltip"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column col-12">
|
||||
<ul class="step">
|
||||
<li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 1 Tooltip">Step 1</a></li>
|
||||
<li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 2 Tooltip">Step 2</a></li>
|
||||
<li class="step-item active"><a class="tooltip" href="#steps" data-tooltip="Step 3 Tooltip">Step 3</a></li>
|
||||
<li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 4 Tooltip">Step 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add a container element with the <code>step</code> class.
|
||||
And add child elements with the <code>step-item</code> class.
|
||||
The <code>step-item</code> with the <code>active</code> class will be highlighted and indicate the current state of progress.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 1"</span>></span>Step 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 2"</span>></span>Step 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 3"</span>></span>Step 3<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 4"</span>></span>Step 4<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,341 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Tabs - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Tabs enable quick switch between different views. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/tabs.html">
|
||||
<meta property="og:title" content="Tabs - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Tabs enable quick switch between different views. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/tabs.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="tabs">
|
||||
<h3 class="s-title">Tabs<a class="anchor" href="#tabs" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Tabs enable quick switch between different views.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-sm-12">
|
||||
<ul class="tab">
|
||||
<li class="tab-item active"><a href="#tabs">Music</a></li>
|
||||
<li class="tab-item"><a href="#tabs">Playlists</a></li>
|
||||
<li class="tab-item"><a href="#tabs">Radio</a></li>
|
||||
<li class="tab-item"><a href="#tabs">Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column col-6 col-sm-12">
|
||||
<ul class="tab tab-block">
|
||||
<li class="tab-item active"><a href="#tabs">Music</a></li>
|
||||
<li class="tab-item"><a href="#tabs">Playlists</a></li>
|
||||
<li class="tab-item"><a href="#tabs">Radio</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add a container element with the <code>tab</code> class.
|
||||
And add child elements with the <code>tab-item</code> class.
|
||||
You can add the <code>tab-block</code> class for a full-width tab.
|
||||
The <code>tab-item</code> or its child <a> with the <code>active</code> class will be highlighted.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab tab-block"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Music<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span>Playlists<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Radio<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Connect<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-sm-12">
|
||||
<ul class="tab">
|
||||
<li class="tab-item active"><a class="badge" href="#tabs" data-badge="999">Music</a></li>
|
||||
<li class="tab-item"><a href="#tabs">Playlists</a></li>
|
||||
<li class="tab-item"><a href="#tabs">Radio</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column col-sm-12">
|
||||
<ul class="tab tab-block">
|
||||
<li class="tab-item active"><a class="badge" href="#tabs" data-badge="9">Music</a></li>
|
||||
<li class="tab-item"><a class="badge" href="#tabs" data-badge="99">Playlists</a></li>
|
||||
<li class="tab-item"><a href="#tabs">Radio</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab tab-block"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"9"</span>></span>
|
||||
Music
|
||||
<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<ul class="tab">
|
||||
<li class="tab-item active"><a href="#tabs">Music<span class="btn btn-clear"></span></a></li>
|
||||
<li class="tab-item"><a href="#tabs">Playlists</a></li>
|
||||
<li class="tab-item"><a href="#tabs">Radio</a></li>
|
||||
<li class="tab-item"><a href="#tabs">Store</a></li>
|
||||
<li class="tab-item tab-action">
|
||||
<div class="input-group input-inline">
|
||||
<input class="form-input input-sm" type="text">
|
||||
<button class="btn btn-primary btn-sm input-group-btn">Search</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
You could add a search box or buttons inside a tab.
|
||||
Add the <code>tab-action</code> class to the <code>tab-item</code>.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>
|
||||
Music
|
||||
<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item tab-action"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group input-inline"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input input-sm"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary btn-sm input-group-btn"</span>></span>Search<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,334 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Tiles - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Tiles are repeatable or embeddable information blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/tiles.html">
|
||||
<meta property="og:title" content="Tiles - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Tiles are repeatable or embeddable information blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/tiles.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="tiles">
|
||||
<h3 class="s-title">Tiles<a class="anchor" href="#tiles" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Tiles are repeatable or embeddable information blocks.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-9 col-sm-12">
|
||||
<div class="tile">
|
||||
<div class="tile-icon">
|
||||
<figure class="avatar avatar-lg"><img src="../img/avatar-3.png" alt="Avatar"></figure>
|
||||
</div>
|
||||
<div class="tile-content">
|
||||
<p class="tile-title">The Avengers</p>
|
||||
<p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
<button class="btn btn-primary">Join</button>
|
||||
<button class="btn">Contact</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-9 col-sm-12">
|
||||
<div class="tile">
|
||||
<div class="tile-icon">
|
||||
<figure class="avatar avatar-lg"><img src="../img/avatar-2.png" alt="Avatar"></figure>
|
||||
</div>
|
||||
<div class="tile-content">
|
||||
<p class="tile-title">The S.H.I.E.L.D.</p>
|
||||
<p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
|
||||
<p>
|
||||
<button class="btn btn-primary btn-sm">Join</button>
|
||||
<button class="btn btn-sm">Contact</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add a container with the <code>tile</code> class.
|
||||
And add child elements with the <code>tile-icon</code>, <code>tile-content</code> or/and <code>tile-action</code> classes.
|
||||
The <code>tile-icon</code> and <code>tile-action</code> are optional.
|
||||
</p>
|
||||
<p>There are <code>tile-title</code> and <code>tile-subtitle</code> classes for title and subtitle text styles.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-tile-icon"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-file centered"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-title"</span>></span>The Avengers<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-subtitle"</span>></span>Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-action"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>Join<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="tiles-compact">Compact tiles<a class="anchor" href="#tiles-compact" aria-hidden="true">#</a></h4>
|
||||
<p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p>
|
||||
<p>Add the <code>tile-centered</code> class to the container <code>tile</code>.
|
||||
The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.
|
||||
</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-md-9 col-xs-12">
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-icon">
|
||||
<div class="example-tile-icon"><i class="icon icon-mail centered"></i></div>
|
||||
</div>
|
||||
<div class="tile-content">
|
||||
<div class="tile-title">spectre-docs.pdf</div><small class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</small>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
<button class="btn btn-link btn-action"><i class="icon icon-more-vert"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile tile-centered"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-tile-icon"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-file centered"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-title"</span>></span>spectre-docs.pdf<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-subtitle text-gray"</span>></span>14MB · Public · 1 Jan, 2017<span class="hljs-tag"></<span class="hljs-name">small</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-action"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-more-vert"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,294 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Toasts - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Toasts are used to show alert or information to users. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/toasts.html">
|
||||
<meta property="og:title" content="Toasts - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Toasts are used to show alert or information to users. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/toasts.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="toasts">
|
||||
<h3 class="s-title">Toasts<a class="anchor" href="#toasts" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Toasts are used to show alert or information to users.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-9 col-sm-12">
|
||||
<div class="toast">
|
||||
<button class="btn btn-clear float-right"></button>
|
||||
<h6>Toast Title</h6>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-9 col-sm-12">
|
||||
<div class="toast toast-primary">
|
||||
<button class="btn btn-clear float-right"></button>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add a container element with the <code>toast</code> class.
|
||||
You can add any text within the container, and even icons.
|
||||
You may also add a close button with the <code>btn-clear</code> class if you need.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"toast"</span>></span>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-sm-12">
|
||||
<div class="toast toast-success">
|
||||
<button class="btn btn-clear float-right"></button>
|
||||
<p>Toast success</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-sm-12">
|
||||
<div class="toast toast-warning">
|
||||
<button class="btn btn-clear float-right"></button>
|
||||
<p>Toast warning</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-sm-12">
|
||||
<div class="toast toast-error">
|
||||
<button class="btn btn-clear float-right"></button>
|
||||
<p>Toast error</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>And you can add the <code>toast-primary</code>, <code>toast-success</code>, <code>toast-warning</code> or <code>toast-error</code> class for additional toast colors.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"toast toast-primary"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear float-right"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,278 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Tooltips - Components - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/components/tooltips.html">
|
||||
<meta property="og:title" content="Tooltips - Components - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/components/tooltips.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="tooltips">
|
||||
<h3 class="s-title">Tooltips<a class="anchor" href="#tooltips" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS.</p>
|
||||
<div class="docs-demo columns text-center">
|
||||
<div class="column col-xs-12">
|
||||
<button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button>
|
||||
</div>
|
||||
<div class="column col-xs-12">
|
||||
<button class="btn btn-primary tooltip tooltip-right" data-tooltip="Right Tooltip Text">right tooltip</button>
|
||||
</div>
|
||||
<div class="column col-xs-12">
|
||||
<button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">bottom tooltip</button>
|
||||
</div>
|
||||
<div class="column col-xs-12">
|
||||
<button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text
|
||||
Multiline">left tooltip</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add the <code>tooltip</code> class and the <code>data-tooltip</code> attribute, which contains the tooltip content, to non self closing elements.</p>
|
||||
<p>And add the <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> class to define the position of a tooltip.
|
||||
By default, the tooltip appears above the element.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Lorem ipsum dolor sit amet"</span>></span>top tooltip<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn tooltip tooltip-right"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Lorem ipsum dolor sit amet"</span>></span>right tooltip<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="tooltips-multiline">Multiline tooltips<a class="anchor" href="#tooltips-multiline" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<button class="btn btn-primary tooltip" data-tooltip="First Line Tooltip Text
|
||||
Second Line Tooltip Text
|
||||
Third Line Tooltip Text">multiline tooltip</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add the <code>\n</code> string between any text for multiline tooltips.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"First Line Tooltip Text \n Second Line Tooltip Text"</span>></span>multiline tooltip<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user