diff options
Diffstat (limited to 'docs/components/panels.html')
| -rw-r--r-- | docs/components/panels.html | 353 |
1 files changed, 353 insertions, 0 deletions
diff --git a/docs/components/panels.html b/docs/components/panels.html new file mode 100644 index 0000000..a95e6fd --- /dev/null +++ b/docs/components/panels.html @@ -0,0 +1,353 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Panels - Components - Spectre.css CSS Framework</title> + <meta charset="utf-8"> + <meta name="robots" content="index, follow"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <meta name="description" content="Spectre.css 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"> + <link rel="shortcut icon" href="../img/favicons/favicon.ico"> + <link rel="icon" href="../img/favicons/favicon.png"> + <link rel="stylesheet" href="../dist/spectre.min.css"> + <link rel="stylesheet" href="../dist/spectre-icons.min.css"> + <link rel="stylesheet" href="../dist/spectre-exp.min.css"> + <link rel="stylesheet" href="../dist/docs.min.css"> + <link rel="canonical" href="https://picturepan2.github.io/spectre/components/panels.html"> + </head> + <body> + <div class="docs-container off-canvas off-canvas-sidebar-show"> + <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a> + <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</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></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</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/navbar.html">Navbar</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/> + <label class="accordion-header c-hand" for="accordion-components">Components</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../components/accordions.html">Accordions</a> + </li> + <li class="menu-item"><a href="../components/avatars.html">Avatars</a> + </li> + <li class="menu-item"><a href="../components/badges.html">Badges</a> + </li> + <li class="menu-item"><a href="../components/bars.html">Bars</a> + </li> + <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a> + </li> + <li class="menu-item"><a href="../components/cards.html">Cards</a> + </li> + <li class="menu-item"><a href="../components/chips.html">Chips</a> + </li> + <li class="menu-item"><a href="../components/empty.html">Empty states</a> + </li> + <li class="menu-item"><a href="../components/menu.html">Menu</a> + </li> + <li class="menu-item"><a href="../components/modals.html">Modals</a> + </li> + <li class="menu-item"><a href="../components/nav.html">Nav</a> + </li> + <li class="menu-item"><a href="../components/pagination.html">Pagination</a> + </li> + <li class="menu-item"><a href="../components/panels.html">Panels</a> + </li> + <li class="menu-item"><a href="../components/popovers.html">Popovers</a> + </li> + <li class="menu-item"><a href="../components/steps.html">Steps</a> + </li> + <li class="menu-item"><a href="../components/tabs.html">Tabs</a> + </li> + <li class="menu-item"><a href="../components/tiles.html">Tiles</a> + </li> + <li class="menu-item"><a href="../components/toasts.html">Toasts</a> + </li> + <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../utilities/colors.html">Colors</a> + </li> + <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a> + </li> + <li class="menu-item"><a href="../utilities/display.html">Display</a> + </li> + <li class="menu-item"><a href="../utilities/divider.html">Divider</a> + </li> + <li class="menu-item"><a href="../utilities/loading.html">Loading</a> + </li> + <li class="menu-item"><a href="../utilities/position.html">Position</a> + </li> + <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a> + </li> + <li class="menu-item"><a href="../utilities/text.html">Text</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> + </li> + <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> + </li> + <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a> + </li> + <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a> + </li> + <li class="menu-item"><a href="../experimentals/filters.html">Filters</a> + </li> + <li class="menu-item"><a href="../experimentals/meters.html">Meters</a> + </li> + <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a> + </li> + <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a> + </li> + <li class="menu-item"><a href="../experimentals/progress.html">Progress</a> + </li> + <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a> + </li> + <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a> + </li> + </ul> + </div> + </div> + </div> + </div> + </div><a class="off-canvas-overlay" href="#close"></a> + <div class="off-canvas-content"> + <div class="docs-content" id="content"> + <div class="container" id="panels"> + <h3 class="s-title">Panels<a class="anchor" href="#panels" aria-hidden="true">#</a></h3> + <div class="docs-ad"> + <div class="hide-md text-center"> + <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + <div class="show-md text-center"> + <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + </div> + <p>Panels are flexible view container with auto-expand content section.</p> + <div class="docs-demo columns"> + <div class="column col-6 col-xs-12"> + <div class="panel"> + <div class="panel-header text-center"> + <figure class="avatar avatar-lg"><img src="../img/avatar-2.png" alt="Avatar"></figure> + <div class="panel-title h5 mt-10">Bruce Banner</div> + <div class="panel-subtitle">THE HULK</div> + </div> + <nav class="panel-nav"> + <ul class="tab tab-block"> + <li class="tab-item active"><a href="#panels">Profile</a></li> + <li class="tab-item"><a href="#panels">Files</a></li> + <li class="tab-item"><a href="#panels">Tasks</a></li> + </ul> + </nav> + <div class="panel-body"> + <div class="tile tile-centered"> + <div class="tile-content"> + <div class="tile-title text-bold">E-mail</div> + <div class="tile-subtitle">bruce.banner@hulk.com</div> + </div> + <div class="tile-action"> + <button class="btn btn-link btn-action btn-lg tooltip tooltip-left" data-tooltip="Edit E-mail"><i class="icon icon-edit"></i></button> + </div> + </div> + <div class="tile tile-centered"> + <div class="tile-content"> + <div class="tile-title text-bold">Skype</div> + <div class="tile-subtitle">bruce.banner</div> + </div> + <div class="tile-action"> + <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> + </div> + </div> + <div class="tile tile-centered"> + <div class="tile-content"> + <div class="tile-title text-bold">Location</div> + <div class="tile-subtitle">Dayton, Ohio</div> + </div> + <div class="tile-action"> + <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> + </div> + </div> + </div> + <div class="panel-footer"> + <button class="btn btn-primary btn-block">Save</button> + </div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="panel"> + <div class="panel-header"> + <div class="panel-title h6">Comments</div> + </div> + <div class="panel-body"> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"><img src="../img/avatar-1.png" alt="Avatar"></figure> + </div> + <div class="tile-content"> + <p class="tile-title text-bold">Thor Odinson</p> + <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + </div> + </div> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"><img src="../img/avatar-2.png" alt="Avatar"></figure> + </div> + <div class="tile-content"> + <p class="tile-title text-bold">Bruce Banner</p> + <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> + </div> + </div> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar" data-initial="TS"></figure> + </div> + <div class="tile-content"> + <p class="tile-title text-bold">Tony Stark</p> + <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + </div> + </div> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"><img src="../img/avatar-4.png" alt="Avatar"></figure> + </div> + <div class="tile-content"> + <p class="tile-title text-bold">Steve Rogers</p> + <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> + </div> + </div> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"><img src="../img/avatar-3.png" alt="Avatar"></figure> + </div> + <div class="tile-content"> + <p class="tile-title text-bold">Natasha Romanoff</p> + <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + </div> + </div> + </div> + <div class="panel-footer"> + <div class="input-group"> + <input class="form-input" type="text" placeholder="Hello"> + <button class="btn btn-primary input-group-btn">Send</button> + </div> + </div> + </div> + </div> + </div> + <p>Add a container element with the <code>panel</code> class. + And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> classes. + The <code>panel-body</code> can be auto expanded and vertically scrollable. + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-header"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-title"</span>></span>Comments<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-nav"</span>></span> + <span class="hljs-comment"><!-- navigation components: tabs, breadcrumbs or pagination --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-body"</span>></span> + <span class="hljs-comment"><!-- contents --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-footer"</span>></span> + <span class="hljs-comment"><!-- buttons or inputs --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <div class="docs-ad docs-ad-sidebar text-center"> + <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> + </div> + </div> + <div class="docs-footer container grid-lg" id="copyright"> + <p><a href="getting-started.html" target="_blank">Documents</a> · <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> · 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> + (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>
\ No newline at end of file |