Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-19 03:44:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

Component links

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-09 13:18:46 +01:00
parent 0f9d338f66
commit e75fd365e3
11 changed files with 1110 additions and 1160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
docs/documentation/components/panel.html
View File

@@ -1,8 +1,18 @@
---
title: Panel
subtitle: "A composable <strong>panel</strong>, for compact controls"
layout: documentation
doc-tab: components
doc-subtab: panel
breadcrumb:
- home
- documentation
- components
- components-panel
meta:
- colors: false
- sizes: false
- variables: true
---
{% capture panel_example %}
@@ -73,50 +83,32 @@ doc-subtab: panel
</nav>
{% endcapture %}
{% include subnav/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>
<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>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>
<li><code>control</code></li>
<li><code>input</code></li>
<li><code>button</code></li>
<li><code>panel-icon</code></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>
</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>
{% include snippet.html content=panel_example size="one-third" %}
{% include snippet.html content=panel_example size="one-third" %}
{% include variables.html type='component' %}
</div>
</section>
{% include variables.html type='component' %}