initial commit: migrated from FossilSCM to git
This commit is contained in:
Brian Sakal
@@ -0,0 +1,348 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Autocomplete - Experimentals - 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="Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. 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/experimentals/autocomplete.html">
|
||||
<meta property="og:title" content="Autocomplete - Experimentals - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. 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/experimentals/autocomplete.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=""/>
|
||||
<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="" checked="checked"/>
|
||||
<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="autocomplete">
|
||||
<h3 class="s-title">Autocomplete<a class="anchor" href="#autocomplete" 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>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-9 col-xs-12">
|
||||
<div class="form-group">
|
||||
<div class="form-autocomplete">
|
||||
<div class="form-autocomplete-input form-input"><span class="chip">Bruce Banner</span>
|
||||
<div class="chip"><img class="avatar avatar-sm" src="../img/avatar-1.png" alt="Avatar">Thor Odinson</div>
|
||||
<div class="chip"><img class="avatar avatar-sm" src="../img/avatar-4.png" alt="Avatar">Steve Rogers</div>
|
||||
<div class="chip">
|
||||
<figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>Tony Stark
|
||||
</div><span class="chip active">Natasha Romanoff</span>
|
||||
<input class="form-input" type="text" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-9 col-xs-12">
|
||||
<div class="form-group">
|
||||
<div class="form-autocomplete">
|
||||
<div class="form-autocomplete-input form-input is-focused"><span class="chip">Bruce Banner<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span><span class="chip"><img class="avatar avatar-sm" src="../img/avatar-1.png" alt="Thor Odinson">Thor Odinson<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span>
|
||||
<div class="has-icon-left">
|
||||
<input class="form-input" type="text" placeholder="" value="S"><i class="form-icon loading"></i>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="menu">
|
||||
<li class="menu-item"><a href="#autocomplete">
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-icon"><img class="avatar avatar-sm" src="../img/avatar-4.png" alt="Steve Rogers"></div>
|
||||
<div class="tile-content">
|
||||
<mark>S</mark>teve Roger
|
||||
<mark>s</mark>
|
||||
</div>
|
||||
</div></a></li>
|
||||
<li class="menu-item"><a href="#autocomplete">
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-icon">
|
||||
<figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>
|
||||
</div>
|
||||
<div class="tile-content">Tony
|
||||
<mark>S</mark>tark
|
||||
</div>
|
||||
</div></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add a container element with the <code>form-autocomplete</code> class.
|
||||
There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component.
|
||||
You may add the <code>is-focused</code> class to <code>form-autocomplete-input</code> to make it appear as focus state.
|
||||
</p>
|
||||
<p>
|
||||
Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete.
|
||||
The autocomplete HTML structure is exampled below.
|
||||
</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-9 col-xs-12">
|
||||
<div class="form-group">
|
||||
<div class="form-autocomplete autocomplete-oneline">
|
||||
<div class="form-autocomplete-input form-input"><span class="chip">Bruce Banner</span>
|
||||
<div class="chip"><img class="avatar avatar-sm" src="../img/avatar-1.png" alt="Avatar">Thor Odinson</div>
|
||||
<div class="chip"><img class="avatar avatar-sm" src="../img/avatar-4.png" alt="Avatar">Steve Rogers</div>
|
||||
<div class="chip">
|
||||
<figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>Tony Stark
|
||||
</div><span class="chip active">Natasha Romanoff</span>
|
||||
<input class="form-input" type="text" placeholder="">
|
||||
</div>
|
||||
</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">"form-autocomplete"</span>></span>
|
||||
<span class="hljs-comment"><!-- autocomplete input container --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-autocomplete-input form-input"</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- autocomplete chips --></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 class="hljs-attr">alt</span>=<span class="hljs-string">"Thor Odinson"</span>></span>
|
||||
Thor Odinson
|
||||
<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>
|
||||
|
||||
<span class="hljs-comment"><!-- autocomplete real input box --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"typing here"</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- autocomplete suggestion list --></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-comment"><!-- menu list items --></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">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>
|
||||
<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>
|
||||
<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>
|
||||
<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,606 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Calendars - Experimentals - 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="Calendars are designed for date or date range picker and events display. It is made with flex layout. 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/experimentals/calendars.html">
|
||||
<meta property="og:title" content="Calendars - Experimentals - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Calendars are designed for date or date range picker and events display. It is made with flex layout. 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/experimentals/calendars.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=""/>
|
||||
<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="" checked="checked"/>
|
||||
<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="calendars">
|
||||
<h3 class="s-title">Calendars<a class="anchor" href="#calendars" 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>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-4 col-md-12">
|
||||
<div class="calendar">
|
||||
<div class="calendar-nav navbar">
|
||||
<button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-left"></i></button>
|
||||
<div class="navbar-primary">March 2017</div>
|
||||
<button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-right"></i></button>
|
||||
</div>
|
||||
<div class="calendar-container">
|
||||
<div class="calendar-header">
|
||||
<div class="calendar-date">Sun</div>
|
||||
<div class="calendar-date">Mon</div>
|
||||
<div class="calendar-date">Tue</div>
|
||||
<div class="calendar-date">Wed</div>
|
||||
<div class="calendar-date">Thu</div>
|
||||
<div class="calendar-date">Fri</div>
|
||||
<div class="calendar-date">Sat</div>
|
||||
</div>
|
||||
<div class="calendar-body">
|
||||
<div class="calendar-date prev-month">
|
||||
<button class="date-item">26</button>
|
||||
</div>
|
||||
<div class="calendar-date prev-month">
|
||||
<button class="date-item">27</button>
|
||||
</div>
|
||||
<div class="calendar-date prev-month">
|
||||
<button class="date-item">28</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">1</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">2</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">3</button>
|
||||
</div>
|
||||
<div class="calendar-date tooltip" data-tooltip="Today">
|
||||
<button class="date-item date-today">4</button>
|
||||
</div>
|
||||
<div class="calendar-date tooltip" data-tooltip="Not available">
|
||||
<button class="date-item" disabled="">5</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">6</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">7</button>
|
||||
</div>
|
||||
<div class="calendar-date tooltip" data-tooltip="You have appointments">
|
||||
<button class="date-item badge">8</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">9</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">10</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">11</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">12</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">13</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">14</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">15</button>
|
||||
</div>
|
||||
<div class="calendar-date calendar-range range-start">
|
||||
<button class="date-item">16</button>
|
||||
</div>
|
||||
<div class="calendar-date calendar-range">
|
||||
<button class="date-item">17</button>
|
||||
</div>
|
||||
<div class="calendar-date calendar-range">
|
||||
<button class="date-item">18</button>
|
||||
</div>
|
||||
<div class="calendar-date calendar-range">
|
||||
<button class="date-item">19</button>
|
||||
</div>
|
||||
<div class="calendar-date calendar-range range-end">
|
||||
<button class="date-item">20</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">21</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">22</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">23</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">24</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">25</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">26</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">27</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">28</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">29</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">30</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">31</button>
|
||||
</div>
|
||||
<div class="calendar-date next-month">
|
||||
<button class="date-item">1</button>
|
||||
</div>
|
||||
</div>
|
||||
</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">"calendar"</span>></span>
|
||||
<span class="hljs-comment"><!-- calendar navbar --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-nav navbar"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action btn-link btn-lg"</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-left"</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 class="hljs-attr">class</span>=<span class="hljs-string">"navbar-primary"</span>></span>March 2017<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action btn-link btn-lg"</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"</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 class="hljs-attr">class</span>=<span class="hljs-string">"calendar-container"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-header"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span>Sun<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">"calendar-date"</span>></span>Mon<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">"calendar-date"</span>></span>Tue<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">"calendar-date"</span>></span>Wed<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">"calendar-date"</span>></span>Thu<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">"calendar-date"</span>></span>Fri<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">"calendar-date"</span>></span>Sat<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">"calendar-body"</span>></span>
|
||||
<span class="hljs-comment"><!-- calendar previous month --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date prev-month"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>26<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">"calendar-date prev-month"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>28<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-comment"><!-- calendar current month --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>1<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">"calendar-date"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>2<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">"calendar-date"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>3<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-comment"><!-- calendar date: today --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item date-today"</span>></span>4<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-comment"><!-- calendar date: tooltip --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"You have appointments"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>5<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-comment"><!-- calendar date: not available --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Not available"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span> <span class="hljs-attr">disabled</span>=<span class="hljs-string">""</span>></span>6<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-comment"><!-- calendar range --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date calendar-range range-start"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>7<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">"calendar-date calendar-range"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>8<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">"calendar-date calendar-range range-end"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>9<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">"calendar-date"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>31<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-comment"><!-- calendar next month --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date next-month"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>1<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-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="calendars-sizes">Calendars sizes<a class="anchor" href="#calendars-sizes" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<div class="calendar calendar-lg">
|
||||
<div class="calendar-nav navbar">
|
||||
<button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-left"></i></button>
|
||||
<div class="navbar-primary">March 2017</div>
|
||||
<button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-right"></i></button>
|
||||
</div>
|
||||
<div class="calendar-container">
|
||||
<div class="calendar-header">
|
||||
<div class="calendar-date">Sun</div>
|
||||
<div class="calendar-date">Mon</div>
|
||||
<div class="calendar-date">Tue</div>
|
||||
<div class="calendar-date">Wed</div>
|
||||
<div class="calendar-date">Thu</div>
|
||||
<div class="calendar-date">Fri</div>
|
||||
<div class="calendar-date">Sat</div>
|
||||
</div>
|
||||
<div class="calendar-body">
|
||||
<div class="calendar-date prev-month">
|
||||
<button class="date-item">26</button>
|
||||
</div>
|
||||
<div class="calendar-date prev-month">
|
||||
<button class="date-item">27</button>
|
||||
<div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">Zhonghe Festival</a></div>
|
||||
</div>
|
||||
<div class="calendar-date prev-month">
|
||||
<button class="date-item">28</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">1</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">2</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">3</button>
|
||||
</div>
|
||||
<div class="calendar-date tooltip" data-tooltip="Today">
|
||||
<button class="date-item date-today">4</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item" disabled="">5</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">6</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">7</button>
|
||||
</div>
|
||||
<div class="calendar-date tooltip" data-tooltip="You have appointments">
|
||||
<button class="date-item badge">8</button>
|
||||
<div class="calendar-events"><a class="calendar-event bg-primary text-light" href="#calendars">Product launch event</a><a class="calendar-event bg-error text-light" href="#calendars">International Women's Day</a></div>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">9</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">10</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">11</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">12</button>
|
||||
<div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">Arbor Day</a></div>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">13</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">14</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">15</button>
|
||||
</div>
|
||||
<div class="calendar-date calendar-range range-start">
|
||||
<button class="date-item">16</button>
|
||||
</div>
|
||||
<div class="calendar-date calendar-range">
|
||||
<button class="date-item">17</button>
|
||||
</div>
|
||||
<div class="calendar-date calendar-range">
|
||||
<button class="date-item">18</button>
|
||||
</div>
|
||||
<div class="calendar-date calendar-range">
|
||||
<button class="date-item">19</button>
|
||||
</div>
|
||||
<div class="calendar-date calendar-range range-end">
|
||||
<button class="date-item">20</button>
|
||||
<div class="calendar-events"><a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a></div>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">21</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">22</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">23</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">24</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">25</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">26</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">27</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">28</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">29</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">30</button>
|
||||
</div>
|
||||
<div class="calendar-date">
|
||||
<button class="date-item">31</button>
|
||||
</div>
|
||||
<div class="calendar-date next-month disabled">
|
||||
<button class="date-item">1</button>
|
||||
<div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">April Fools' Day</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</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">"calendar calendar-lg"</span>></span>
|
||||
<span class="hljs-comment"><!-- calendar navbar structure --></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-container"</span>></span>
|
||||
<span class="hljs-comment"><!-- calendar header structure --></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-body"</span>></span>
|
||||
<span class="hljs-comment"><!-- calendar date with events --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item active"</span>></span>20<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">"calendar-events"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-event bg-success text-light"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#calendars"</span>></span>Spring Equinox<span class="hljs-tag"></<span class="hljs-name">a</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>
|
||||
<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,321 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Carousels - Experimentals - 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/experimentals/carousels.html">
|
||||
<meta property="og:title" content="Carousels - Experimentals - 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/experimentals/carousels.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=""/>
|
||||
<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="" checked="checked"/>
|
||||
<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="carousels">
|
||||
<h3 class="s-title">Carousels<a class="anchor" href="#carousels" aria-hidden="true">#</a></h3>
|
||||
<p><small class="label label-secondary">CSS ONLY</small></p>
|
||||
<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>Carousels are slideshows for cycling images. It is built in pure CSS.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<div class="carousel">
|
||||
<input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
|
||||
<input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden="">
|
||||
<input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden="">
|
||||
<input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden="">
|
||||
<div class="carousel-container">
|
||||
<figure class="carousel-item">
|
||||
<label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label>
|
||||
<label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="../img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper">
|
||||
</figure>
|
||||
<figure class="carousel-item">
|
||||
<label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
|
||||
<label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
|
||||
</figure>
|
||||
<figure class="carousel-item">
|
||||
<label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
|
||||
<label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="../img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper">
|
||||
</figure>
|
||||
<figure class="carousel-item">
|
||||
<label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
|
||||
<label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="../img/osx-el-capitan-2.jpg" alt="macOS El Capitan Wallpaper">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="carousel-nav">
|
||||
<label class="nav-item text-hide c-hand" for="slide-1">1</label>
|
||||
<label class="nav-item text-hide c-hand" for="slide-2">2</label>
|
||||
<label class="nav-item text-hide c-hand" for="slide-3">3</label>
|
||||
<label class="nav-item text-hide c-hand" for="slide-4">4</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>The default image number of Carousels is <code>8</code>. You can add more images by changing the variable <code>$carousel-number</code> in <code>_carousels.scss</code> and re-compiling the CSS.</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">"carousel"</span>></span>
|
||||
<span class="hljs-comment"><!-- carousel locator --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-1"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-2"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-3"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-4"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- carousel container --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-container"</span>></span>
|
||||
<span class="hljs-comment"><!-- carousel item --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-4"</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-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-2"</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"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-yosemite.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS Yosemite Wallpaper"</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">"carousel-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-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-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-3"</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"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-yosemite-2.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS Yosemite Wallpaper"</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">"carousel-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-2"</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-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-4"</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"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS El Capitan Wallpaper"</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">"carousel-item"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-3"</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-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-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"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan-2.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS El Capitan Wallpaper"</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-comment"><!-- carousel navigation --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-nav"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-1"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-2"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-3"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-4"</span>></span>4<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">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,272 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Comparison sliders - Experimentals - 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/experimentals/comparison.html">
|
||||
<meta property="og:title" content="Comparison sliders - Experimentals - 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/experimentals/comparison.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=""/>
|
||||
<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="" checked="checked"/>
|
||||
<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="comparison">
|
||||
<h3 class="s-title">Comparison sliders<a class="anchor" href="#comparison" aria-hidden="true">#</a></h3>
|
||||
<p><small class="label label-secondary">CSS ONLY</small></p>
|
||||
<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>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<div class="comparison-slider">
|
||||
<figure class="comparison-before"><img class="rounded" src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper">
|
||||
<div class="comparison-label">Before</div>
|
||||
</figure>
|
||||
<figure class="comparison-after"><img class="filter-grayscale rounded" src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper">
|
||||
<div class="comparison-label">After</div>
|
||||
<textarea class="comparison-resizer" readonly=""></textarea>
|
||||
</figure>
|
||||
</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">"comparison-slider"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-before"</span>></span>
|
||||
<span class="hljs-comment"><!-- image (before) --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-label"</span>></span>Before<span class="hljs-tag"></<span class="hljs-name">div</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">"comparison-after"</span>></span>
|
||||
<span class="hljs-comment"><!-- image (after) --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-label"</span>></span>After<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-resizer"</span> <span class="hljs-attr">readonly</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">figure</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,388 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Filters - Experimentals - 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/experimentals/filters.html">
|
||||
<meta property="og:title" content="Filters - Experimentals - 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/experimentals/filters.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=""/>
|
||||
<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="" checked="checked"/>
|
||||
<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="filters">
|
||||
<h3 class="s-title">Filters<a class="anchor" href="#filters" aria-hidden="true">#</a></h3>
|
||||
<p><small class="label label-secondary">CSS ONLY</small></p>
|
||||
<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>Filters are CSS only content filters.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<div class="filter">
|
||||
<input class="filter-tag" id="tag-0" type="radio" name="filter-radio" hidden="" checked="">
|
||||
<input class="filter-tag" id="tag-1" type="radio" name="filter-radio" hidden="">
|
||||
<input class="filter-tag" id="tag-2" type="radio" name="filter-radio" hidden="">
|
||||
<input class="filter-tag" id="tag-3" type="radio" name="filter-radio" hidden="">
|
||||
<input class="filter-tag" id="tag-4" type="radio" name="filter-radio" hidden="">
|
||||
<div class="filter-nav">
|
||||
<label class="chip" for="tag-0">All</label>
|
||||
<label class="chip" for="tag-1">Action</label>
|
||||
<label class="chip" for="tag-2">Roleplaying</label>
|
||||
<label class="chip" for="tag-3">Shooter</label>
|
||||
<label class="chip" for="tag-4">Sports</label>
|
||||
</div>
|
||||
<div class="filter-body columns">
|
||||
<div class="column col-4 filter-item" data-tag="tag-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title text-bold">Fallout 4</div>
|
||||
<div class="card-subtitle text-gray">Roleplaying</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 filter-item" data-tag="tag-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title text-bold">Halo 5</div>
|
||||
<div class="card-subtitle text-gray">Shooter</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 filter-item" data-tag="tag-1">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title text-bold">Quantum Break</div>
|
||||
<div class="card-subtitle text-gray">Action</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 filter-item" data-tag="tag-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title text-bold">Forza Horizon 3</div>
|
||||
<div class="card-subtitle text-gray">Sports</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 filter-item" data-tag="tag-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title text-bold">Final Fantasy XV</div>
|
||||
<div class="card-subtitle text-gray">Roleplaying</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 filter-item" data-tag="tag-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title text-bold">NBA 2K17</div>
|
||||
<div class="card-subtitle text-gray">Sports</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 filter-item" data-tag="tag-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title text-bold">Battlefield 1</div>
|
||||
<div class="card-subtitle text-gray">Shooter</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 filter-item" data-tag="tag-1">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title text-bold">GTA V</div>
|
||||
<div class="card-subtitle text-gray">Action</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 filter-item" data-tag="tag-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title text-bold">FIFA 17</div>
|
||||
<div class="card-subtitle text-gray">Sports</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 filter-item" data-tag="tag-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title text-bold">Overwatch</div>
|
||||
<div class="card-subtitle text-gray">Shooter</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 filter-item" data-tag="tag-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title text-bold">Titanfall 2</div>
|
||||
<div class="card-subtitle text-gray">Shooter</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 filter-item" data-tag="tag-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title text-bold">Gears of Wars 4</div>
|
||||
<div class="card-subtitle text-gray">Shooter</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Filters use <code>tag-1</code> to <code>tag-8</code> to flag different tags.
|
||||
<code>tag-0</code> is reserved for clearing filter (or showing all).
|
||||
You can overwrite <code>$filter-number</code> in <code>_filters.scss</code> to have more filters.
|
||||
</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">"filter"</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">"tag-0"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-tag"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"filter-radio"</span> <span class="hljs-attr">hidden</span> <span class="hljs-attr">checked</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">"tag-1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-tag"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"filter-radio"</span> <span class="hljs-attr">hidden</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">"tag-2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-tag"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"filter-radio"</span> <span class="hljs-attr">hidden</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-nav"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tag-0"</span>></span>All<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tag-1"</span>></span>Action<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tag-2"</span>></span>Roleplaying<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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-body"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-item card"</span> <span class="hljs-attr">data-tag</span>=<span class="hljs-string">"tag-1"</span>></span>
|
||||
<span class="hljs-comment"><!-- Filter item content --></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">"filter-item card"</span> <span class="hljs-attr">data-tag</span>=<span class="hljs-string">"tag-2"</span>></span>
|
||||
<span class="hljs-comment"><!-- Filter item content --></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-comment"><!-- Filter items --></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,267 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Meters - Experimentals - 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="Meters represent 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/experimentals/meters.html">
|
||||
<meta property="og:title" content="Meters - Experimentals - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Meters represent 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/experimentals/meters.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=""/>
|
||||
<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="" checked="checked"/>
|
||||
<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="meters">
|
||||
<h3 class="s-title">Meters<a class="anchor" href="#meters" 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>Meters represent the value within the known range.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-3 col-xs-12">
|
||||
<meter class="meter" value="20" min="0" max="100"></meter>
|
||||
</div>
|
||||
<div class="column col-3 col-xs-12">
|
||||
<meter class="meter" value="60" min="0" low="30" optimum="60" high="80" max="100"></meter>
|
||||
</div>
|
||||
<div class="column col-3 col-xs-12">
|
||||
<meter class="meter" value="85" min="0" low="30" high="80" max="100"></meter>
|
||||
</div>
|
||||
<div class="column col-3 col-xs-12">
|
||||
<meter class="meter" value="20" min="0" low="30" optimum="90" high="80" max="100"></meter>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- Meter is green when low < value < high --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">meter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"meter"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"20"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span>></span><span class="hljs-tag"></<span class="hljs-name">meter</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">meter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"meter"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"60"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">low</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">high</span>=<span class="hljs-string">"80"</span>></span><span class="hljs-tag"></<span class="hljs-name">meter</span>></span>
|
||||
<span class="hljs-comment"><!-- Meter is yellow when value < low or high < value --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">meter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"meter"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"85"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">low</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">high</span>=<span class="hljs-string">"80"</span>></span><span class="hljs-tag"></<span class="hljs-name">meter</span>></span>
|
||||
<span class="hljs-comment"><!-- Meter is red when value < low < high < optimum or optimum < low < high < value --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">meter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"meter"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"20"</span> <span class="hljs-attr">optimum</span>=<span class="hljs-string">"90"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">low</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">high</span>=<span class="hljs-string">"80"</span>></span><span class="hljs-tag"></<span class="hljs-name">meter</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,284 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Off-canvas - Experimentals - 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="The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure 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/experimentals/off-canvas.html">
|
||||
<meta property="og:title" content="Off-canvas - Experimentals - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure 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/experimentals/off-canvas.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=""/>
|
||||
<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="" checked="checked"/>
|
||||
<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="off-canvas">
|
||||
<h3 class="s-title">Off-canvas<a class="anchor" href="#off-canvas" aria-hidden="true">#</a></h3>
|
||||
<p><small class="label label-secondary">CSS ONLY</small></p>
|
||||
<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>The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.</p>
|
||||
<p>
|
||||
By default, the off-canvas menu is collapsed whenever the window width is.
|
||||
But you can add the <code>off-canvas-sidebar-show</code> class to the <code>off-canvas</code> to make the sidebar expanded when the window width is larger than or equal to <strong>960px</strong>.
|
||||
</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column">
|
||||
<div class="off-canvas off-canvas-sidebar-show"><a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-demo"><i class="icon icon-menu"></i></a>
|
||||
<div class="off-canvas-sidebar flex-centered" id="sidebar-demo"><span>Sidebar</span></div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="content">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>You can open the sidebar by adding the class <code>active</code> to <code>off-canvas-sidebar</code>.
|
||||
And remove the <code>active</code> to close it.
|
||||
</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">"off-canvas"</span>></span>
|
||||
<span class="hljs-comment"><!-- off-screen toggle button --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-toggle btn btn-primary btn-action"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#sidebar-id"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-menu"</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-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sidebar-id"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-sidebar"</span>></span>
|
||||
<span class="hljs-comment"><!-- off-screen sidebar --></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-overlay"</span> <span class="hljs-attr">href</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">"off-canvas-content"</span>></span>
|
||||
<span class="hljs-comment"><!-- off-screen 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>
|
||||
<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,277 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Parallax - Experimentals - 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="The Parallax component acts like Apple TV/tvOS hover parallax effect. It is built in pure 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/experimentals/parallax.html">
|
||||
<meta property="og:title" content="Parallax - Experimentals - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="The Parallax component acts like Apple TV/tvOS hover parallax effect. It is built in pure 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/experimentals/parallax.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=""/>
|
||||
<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="" checked="checked"/>
|
||||
<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="parallax">
|
||||
<h3 class="s-title">Parallax<a class="anchor" href="#parallax" aria-hidden="true">#</a></h3>
|
||||
<p><small class="label label-secondary">CSS ONLY</small></p>
|
||||
<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>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-sm-12 col-8 col-mx-auto">
|
||||
<div class="parallax">
|
||||
<div class="parallax-top-left" tabindex="1"></div>
|
||||
<div class="parallax-top-right" tabindex="2"></div>
|
||||
<div class="parallax-bottom-left" tabindex="3"></div>
|
||||
<div class="parallax-bottom-right" tabindex="4"></div>
|
||||
<div class="parallax-content">
|
||||
<div class="parallax-front">
|
||||
<h2>tvOS parallax demo</h2>
|
||||
</div>
|
||||
<div class="parallax-back"><img class="img-responsive rounded" src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper"></div>
|
||||
</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">"parallax"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-top-left"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</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">"parallax-top-right"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"2"</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">"parallax-bottom-left"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"3"</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">"parallax-bottom-right"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"4"</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">"parallax-content"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-front"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>tvOS parallax demo<span class="hljs-tag"></<span class="hljs-name">h2</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">"parallax-back"</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 rounded"</span> <span class="hljs-attr">...</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,262 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Progress - Experimentals - 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="The Progress indicates the progress completion of a task. 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/experimentals/progress.html">
|
||||
<meta property="og:title" content="Progress - Experimentals - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="The Progress indicates the progress completion of a task. 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/experimentals/progress.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=""/>
|
||||
<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="" checked="checked"/>
|
||||
<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="progress">
|
||||
<h3 class="s-title">Progress<a class="anchor" href="#progress" 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>The Progress indicates the progress completion of a task.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-3 col-xs-12">
|
||||
<progress class="progress" value="75" max="100"></progress>
|
||||
</div>
|
||||
<div class="column col-3 col-xs-12">
|
||||
<progress class="progress" value="50" max="100"></progress>
|
||||
</div>
|
||||
<div class="column col-3 col-xs-12">
|
||||
<progress class="progress" value="25" max="100"></progress>
|
||||
</div>
|
||||
<div class="column col-3 col-xs-12">
|
||||
<progress class="progress" max="100"></progress>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">progress</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span>></span><span class="hljs-tag"></<span class="hljs-name">progress</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">progress</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span>></span><span class="hljs-tag"></<span class="hljs-name">progress</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,261 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Sliders - Experimentals - 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="The Sliders are for selecting values from ranges. 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/experimentals/sliders.html">
|
||||
<meta property="og:title" content="Sliders - Experimentals - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="The Sliders are for selecting values from ranges. 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/experimentals/sliders.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=""/>
|
||||
<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="" checked="checked"/>
|
||||
<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="sliders">
|
||||
<h3 class="s-title">Sliders<a class="anchor" href="#sliders" 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>The Sliders are for selecting values from ranges.</p>
|
||||
<p>You can add the class <code>tooltip</code> to have tooltip labels.
|
||||
If no <code>data-tooltip</code> is set, the <code>value</code> will be used instead.
|
||||
</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<input class="slider" type="range" min="0" max="100" value="50" disabled="">
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- Sliders --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span>></span>
|
||||
<span class="hljs-comment"><!-- Sliders with tooltips --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider tooltip"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">oninput</span>=<span class="hljs-string">"this.setAttribute('value', this.value);"</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,319 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Timelines - Experimentals - 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="The Timelines are ordered sequences of activities. 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/experimentals/timelines.html">
|
||||
<meta property="og:title" content="Timelines - Experimentals - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="The Timelines are ordered sequences of activities. 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/experimentals/timelines.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=""/>
|
||||
<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="" checked="checked"/>
|
||||
<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="timelines">
|
||||
<h3 class="s-title">Timelines<a class="anchor" href="#timelines" 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>The Timelines are ordered sequences of activities.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-9 col-sm-12">
|
||||
<div class="timeline">
|
||||
<div class="timeline-item" id="timeline-example-1">
|
||||
<div class="timeline-left"><a class="timeline-icon tooltip" href="#timeline-example-1" data-tooltip="March 2016"></a></div>
|
||||
<div class="timeline-content">
|
||||
<div class="tile">
|
||||
<div class="tile-content">
|
||||
<p class="tile-subtitle">March 2016</p>
|
||||
<p class="tile-title">Initial commit</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item" id="timeline-example-2">
|
||||
<div class="timeline-left"><a class="timeline-icon icon-lg tooltip" href="#timeline-example-2" data-tooltip="February 2017"><i class="icon icon-check"></i></a></div>
|
||||
<div class="timeline-content">
|
||||
<div class="tile">
|
||||
<div class="tile-content">
|
||||
<p class="tile-subtitle">February 2017</p>
|
||||
<p class="tile-title">New Documents experience</p>
|
||||
<p class="tile-title"><a href="components.html#bars">Bars</a>: represent the progress of a task</p>
|
||||
<p class="tile-title"><a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps</p>
|
||||
<p class="tile-title"><a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks</p>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
<button class="btn">View</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item" id="timeline-example-3">
|
||||
<div class="timeline-left"><a class="timeline-icon icon-lg tooltip" href="#timeline-example-3" data-tooltip="March 2017"><i class="icon icon-check"></i></a></div>
|
||||
<div class="timeline-content">
|
||||
<div class="tile">
|
||||
<div class="tile-content">
|
||||
<p class="tile-subtitle">March 2017</p>
|
||||
<p class="tile-title"><a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons</p>
|
||||
<p class="tile-title"><a href="components.html#popovers">Popovers</a>: small overlay content containers</p>
|
||||
<p class="tile-title"><a href="experimentals.html#calendars">Calendars</a>: date or date range picker and events display</p>
|
||||
<p class="tile-title"><a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images</p>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
<button class="btn">View</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">"timeline"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-item"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"timeline-example-1"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-left"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-icon"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#timeline-example-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</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">"timeline-content"</span>></span>
|
||||
<span class="hljs-comment"><!-- tiles structure --></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">"timeline-item"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"timeline-example-2"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-left"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-icon icon-lg"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#timeline-example-2"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-check"</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-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">"timeline-content"</span>></span>
|
||||
<span class="hljs-comment"><!-- tiles structure --></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,274 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>360-Degree Viewer - Experimentals - 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="360-Degree Viewer is an interactive product photo viewer. It is built in pure 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/experimentals/viewer-360.html">
|
||||
<meta property="og:title" content="360-Degree Viewer - Experimentals - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="360-Degree Viewer is an interactive product photo viewer. It is built in pure 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/experimentals/viewer-360.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=""/>
|
||||
<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="" checked="checked"/>
|
||||
<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="viewer-360">
|
||||
<h3 class="s-title">360-Degree Viewer<a class="anchor" href="#viewer-360" aria-hidden="true">#</a></h3>
|
||||
<p><small class="label label-secondary">CSS ONLY</small></p>
|
||||
<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>360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. </p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<div class="viewer-360">
|
||||
<input class="viewer-slider slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);">
|
||||
<figure class="viewer-image" style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');padding-bottom:37.5%;width:100%;"></figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center">Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-pro-6/8zcnc665slq5" target="_blank">Microsoft Surface Pro 6</a></p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<div class="viewer-360">
|
||||
<input class="viewer-slider slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);">
|
||||
<figure class="viewer-image" style="background-image:url('https://i.loli.net/2018/11/26/5bfc0ab4a5a4f.jpg');padding-bottom:37.5%;width:100%;"></figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center">Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-studio-2/8SBJXM0M58T4" target="_blank">Microsoft Xbox One X</a></p>
|
||||
<p>You will need to use your own product image sprite (all angle of photos in one image) and set the attribute <code>max</code> to the image numbers to use this component.</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">"viewer-360"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-slider slider"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"36"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">oninput</span>=<span class="hljs-string">"this.setAttribute('value', this.value);"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-image"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-image:url('...');"</span>></span><span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<p>The default image numbers in CSS are <code>36</code>. You can copy the mixin and add more numbers in <code>_viewer-360.scss</code> and re-compiling the CSS.</p>
|
||||
<pre class="code" data-lang="SCSS"><code>@<span class="hljs-keyword">include</span> viewer-slider-size(<span class="hljs-number">36</span>);
|
||||
@<span class="hljs-keyword">include</span> viewer-slider-size(<span class="hljs-number">30</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