mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
114 lines
2.6 KiB
HTML
114 lines
2.6 KiB
HTML
---
|
|
title: Panel
|
|
layout: documentation
|
|
doc-tab: components
|
|
doc-subtab: panel
|
|
breadcrumb:
|
|
- home
|
|
- documentation
|
|
- components
|
|
- components-panel
|
|
meta:
|
|
colors: false
|
|
sizes: false
|
|
variables: true
|
|
---
|
|
|
|
{% capture panel_example %}
|
|
<nav class="panel">
|
|
<p class="panel-heading">
|
|
repositories
|
|
</p>
|
|
<div class="panel-block">
|
|
<p class="control has-icons-left">
|
|
<input class="input is-small" type="text" placeholder="search">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-search" aria-hidden="true"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<p class="panel-tabs">
|
|
<a class="is-active">all</a>
|
|
<a>public</a>
|
|
<a>private</a>
|
|
<a>sources</a>
|
|
<a>forks</a>
|
|
</p>
|
|
<a class="panel-block is-active">
|
|
<span class="panel-icon">
|
|
<i class="fas fa-book" aria-hidden="true"></i>
|
|
</span>
|
|
bulma
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fas fa-book" aria-hidden="true"></i>
|
|
</span>
|
|
marksheet
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fas fa-book" aria-hidden="true"></i>
|
|
</span>
|
|
minireset.css
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fas fa-book" aria-hidden="true"></i>
|
|
</span>
|
|
jgthms.github.io
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fas fa-code-fork" aria-hidden="true"></i>
|
|
</span>
|
|
daniellowtw/infboard
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fas fa-code-fork" aria-hidden="true"></i>
|
|
</span>
|
|
mojs
|
|
</a>
|
|
<label class="panel-block">
|
|
<input type="checkbox">
|
|
remember me
|
|
</label>
|
|
<div class="panel-block">
|
|
<button class="button is-link is-outlined is-fullwidth">
|
|
reset all filters
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
{% endcapture %}
|
|
|
|
<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><a></code> or a label <code><label></code> with a checkbox inside.
|
|
</p>
|
|
</div>
|
|
|
|
{% include elements/snippet.html content=panel_example size="one-third" %}
|
|
|
|
{% include elements/variables.html type='component' %}
|