bulma/docs/documentation/components/panel.html

115 lines
2.6 KiB
HTML
Raw Normal View History

---
title: Panel
2018-04-09 12:18:46 +00:00
subtitle: "A composable <strong>panel</strong>, for compact controls"
layout: documentation
doc-tab: components
doc-subtab: panel
2018-04-09 12:18:46 +00:00
breadcrumb:
- home
- documentation
- components
- components-panel
meta:
2018-04-09 13:15:31 +00:00
colors: false
sizes: false
variables: true
---
2016-10-30 23:35:30 +00:00
{% capture panel_example %}
<nav class="panel">
<p class="panel-heading">
2017-07-28 22:27:59 +00:00
repositories
</p>
2016-10-30 23:35:30 +00:00
<div class="panel-block">
2017-04-15 15:00:10 +00:00
<p class="control has-icons-left">
2017-07-28 22:27:59 +00:00
<input class="input is-small" type="text" placeholder="search">
2017-04-15 15:00:10 +00:00
<span class="icon is-small is-left">
2018-03-27 23:28:22 +00:00
<i class="fas fa-search" aria-hidden="true"></i>
2016-10-30 23:35:30 +00:00
</span>
</p>
</div>
<p class="panel-tabs">
2017-07-28 22:27:59 +00:00
<a class="is-active">all</a>
<a>public</a>
<a>private</a>
<a>sources</a>
<a>forks</a>
</p>
2016-10-30 23:35:30 +00:00
<a class="panel-block is-active">
<span class="panel-icon">
2018-03-27 23:28:22 +00:00
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
2016-10-30 23:35:30 +00:00
<a class="panel-block">
<span class="panel-icon">
2018-03-27 23:28:22 +00:00
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
2016-10-30 23:35:30 +00:00
<a class="panel-block">
<span class="panel-icon">
2018-03-27 23:28:22 +00:00
<i class="fas fa-book" aria-hidden="true"></i>
</span>
2016-10-30 23:35:30 +00:00
minireset.css
</a>
2016-10-30 23:35:30 +00:00
<a class="panel-block">
<span class="panel-icon">
2018-03-27 23:28:22 +00:00
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
2016-10-30 23:35:30 +00:00
<a class="panel-block">
<span class="panel-icon">
2018-03-27 23:28:22 +00:00
<i class="fas fa-code-fork" aria-hidden="true"></i>
</span>
2017-07-28 22:27:59 +00:00
daniellowtw/infboard
</a>
2016-10-30 23:35:30 +00:00
<a class="panel-block">
<span class="panel-icon">
2018-03-27 23:28:22 +00:00
<i class="fas fa-code-fork" aria-hidden="true"></i>
</span>
2016-10-30 23:35:30 +00:00
mojs
</a>
<label class="panel-block">
<input type="checkbox">
2017-07-28 22:27:59 +00:00
remember me
</label>
<div class="panel-block">
2017-10-09 17:13:02 +00:00
<button class="button is-link is-outlined is-fullwidth">
2017-07-28 22:27:59 +00:00
reset all filters
</button>
</div>
</nav>
2016-10-30 23:35:30 +00:00
{% endcapture %}
2017-07-28 22:27:59 +00:00
2018-04-09 12:18:46 +00:00
<div class="content">
<p>
The <code>panel</code> is container for several types:
</p>
<ul>
<li>
<code>panel-heading</code> as the first child
</li>
<li>
<code>panel-tabs</code> for navigation
</li>
<li>
<code>panel-block</code> which can contain other elements, like:
2017-07-28 22:27:59 +00:00
<ul>
2018-04-09 12:18:46 +00:00
<li><code>control</code></li>
<li><code>input</code></li>
<li><code>button</code></li>
<li><code>panel-icon</code></li>
2017-07-28 22:27:59 +00:00
</ul>
2018-04-09 12:18:46 +00:00
</li>
</ul>
<p>
The <code>panel-block</code> can be an anchor tag <code>&lt;a&gt;</code> or a label <code>&lt;label&gt;</code> with a checkbox inside.
</p>
</div>
2016-10-30 23:35:30 +00:00
2018-04-09 12:18:46 +00:00
{% include snippet.html content=panel_example size="one-third" %}
2017-07-28 22:27:59 +00:00
2018-04-09 12:18:46 +00:00
{% include variables.html type='component' %}