bulma/docs/documentation/components/panel.html

168 lines
3.9 KiB
HTML
Raw Normal View History

---
layout: documentation
doc-tab: components
doc-subtab: panel
2017-07-28 22:27:59 +00:00
variables:
- name: $panel-item-border
value: 1px solid $border
- name: $panel-heading-background-color
value: $background
- name: $panel-heading-color
value: $text-strong
- name: $panel-heading-line-height
value: 1.25
- name: $panel-heading-padding
value: 0.5em 0.75em
- name: $panel-heading-radius
value: $radius
- name: $panel-heading-size
value: 1.25em
- name: $panel-heading-weight
value: $weight-light
- name: $panel-tab-border-bottom
value: 1px solid $border
- name: $panel-tab-active-border-bottom-color
value: $link-active-border
- name: $panel-tab-active-color
value: $link-active
- name: $panel-list-item-color
value: $text
- name: $panel-list-item-hover-color
value: $link
- name: $panel-block-color
value: $text-strong
- name: $panel-block-hover-background-color
value: $background
- name: $panel-block-active-border-left-color
value: $link
- name: $panel-block-active-color
value: $link-active
- name: $panel-block-active-icon-color
value: $link
- name: $panel-icon-color
value: $text-light
---
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">
2016-10-30 23:35:30 +00:00
<i class="fa fa-search"></i>
</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">
<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>
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">
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">
2017-07-28 22:27:59 +00:00
remember me
</label>
<div class="panel-block">
<button class="button is-primary 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
{% 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>&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
<div class="columns">
<div class="column is-4">
2017-07-28 22:27:59 +00:00
{{panel_example}}
2016-10-30 23:35:30 +00:00
</div>
<div class="column">
2017-07-28 22:27:59 +00:00
{% highlight html %}{{panel_example}}{% endhighlight %}
</div>
</div>
2016-10-30 23:35:30 +00:00
2017-07-28 22:27:59 +00:00
{% include variables.html %}
</div>
</section>