bulma/docs/documentation/components/panel.html

122 lines
2.7 KiB
HTML
Raw Normal View History

---
layout: documentation
doc-tab: components
doc-subtab: panel
---
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Panel</h1>
<h2 class="subtitle">A composable <strong>panel</strong>, for compact controls</h2>
<hr>
2016-10-30 23:35:30 +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:
<ul>
<li><code>control</code></li>
<li><code>input</code></li>
<li><code>button</code></li>
<li><code>panel-icon</code></li>
</ul>
</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>
{% capture panel_example %}
<nav class="panel">
<p class="panel-heading">
Repositories
</p>
2016-10-30 23:35:30 +00:00
<div class="panel-block">
<p class="control has-icon">
<input class="input is-small" type="text" placeholder="Search">
<span class="icon is-small">
<i class="fa fa-search"></i>
</span>
</p>
</div>
<p class="panel-tabs">
2016-10-30 23:35:30 +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">
<i class="fa fa-book"></i>
</span>
bulma
</a>
2016-10-30 23:35:30 +00:00
<a class="panel-block">
<span class="panel-icon">
<i class="fa fa-book"></i>
</span>
marksheet
</a>
2016-10-30 23:35:30 +00:00
<a class="panel-block">
<span class="panel-icon">
2016-10-30 23:35:30 +00:00
<i class="fa fa-book"></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">
<i class="fa fa-book"></i>
</span>
jgthms.github.io
</a>
2016-10-30 23:35:30 +00:00
<a class="panel-block">
<span class="panel-icon">
<i class="fa fa-code-fork"></i>
</span>
2016-10-30 23:35:30 +00:00
daniellowtw/infBoard
</a>
2016-10-30 23:35:30 +00:00
<a class="panel-block">
<span class="panel-icon">
2016-10-30 23:35:30 +00:00
<i class="fa fa-code-fork"></i>
</span>
2016-10-30 23:35:30 +00:00
mojs
</a>
<label class="panel-block">
<input type="checkbox">
Remember me
</label>
<div class="panel-block">
<button class="button is-primary is-outlined is-fullwidth">
Reset all filters
</button>
</div>
</nav>
2016-10-30 23:35:30 +00:00
{% endcapture %}
<div class="columns">
<div class="column is-4">
{{panel_example}}
</div>
<div class="column">
{% highlight html %}
{{panel_example}}
{% endhighlight %}
</div>
</div>
2016-10-30 23:35:30 +00:00
</div>
</section>