mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
1523ce8527
* Replace variables.json with colors.json and update related files accordingly * Add variables data files * Update variables include template and all related files to use new variables data * Fix mobile breakpoint id typo in responsivness docs page * Fix Liquid syntax error in made-with-bulma docs page * Update bulma sass files count in modular docs page * Use breakpoints data in responsiveness helpers docs page * Use breakpoints and variables data in typography helpers docs page * Add missing page titles in docs pages front matter
123 lines
2.7 KiB
HTML
123 lines
2.7 KiB
HTML
---
|
|
title: Panel
|
|
layout: documentation
|
|
doc-tab: components
|
|
doc-subtab: panel
|
|
---
|
|
|
|
{% 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="fa fa-search"></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="fa fa-book"></i>
|
|
</span>
|
|
bulma
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fa fa-book"></i>
|
|
</span>
|
|
marksheet
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fa fa-book"></i>
|
|
</span>
|
|
minireset.css
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fa fa-book"></i>
|
|
</span>
|
|
jgthms.github.io
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fa fa-code-fork"></i>
|
|
</span>
|
|
daniellowtw/infboard
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fa fa-code-fork"></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 %}
|
|
|
|
{% 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>
|
|
{%
|
|
include meta.html
|
|
colors=false
|
|
sizes=false
|
|
variables=true
|
|
%}
|
|
|
|
<hr>
|
|
|
|
<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 snippet.html content=panel_example size="one-third" %}
|
|
|
|
{% include variables.html type='component' %}
|
|
|
|
</div>
|
|
</section>
|