Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-16 02:34:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix panel

Browse Source
This commit is contained in:
Jeremy Thomas
2016-10-30 23:35:30 +00:00
parent 385c412242
commit db6380b9fb
4 changed files with 201 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,92 +13,88 @@ doc-subtab: panel
<hr>
<div class="columns">
<div class="column is-4">
<nav class="panel">
<p class="panel-heading">
Repositories
</p>
<p class="panel-tabs">
<a class="is-active" href="#">All</a>
<a href="#">Public</a>
<a href="#">Private</a>
<a href="#">Sources</a>
<a href="#">Forks</a>
</p>
<a class="panel-block is-active" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>bulma-website</a>
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>bulma</a>
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>marksheet</a>
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-code-fork"></i></span>daniellowtw/infBoard</a>
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>jgthms.github.io</a>
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-code-fork"></i></span>mojs</a>
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>grumpy-cat</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>
</div>
<div class="column">
{% highlight html %}
<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>
<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">
<a class="is-active" href="#">All</a>
<a href="#">Public</a>
<a href="#">Private</a>
<a href="#">Sources</a>
<a href="#">Forks</a>
<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" href="#">
<span class="panel-icon">
<i class="fa fa-book"></i>
</span>
bulma-website
</a>
<a class="panel-block" href="#">
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fa fa-book"></i>
</span>
bulma
</a>
<a class="panel-block" href="#">
<a class="panel-block">
<span class="panel-icon">
<i class="fa fa-book"></i>
</span>
marksheet
</a>
<a class="panel-block" href="#">
<a class="panel-block">
<span class="panel-icon">
<i class="fa fa-code-fork"></i>
<i class="fa fa-book"></i>
</span>
daniellowtw/infBoard
minireset.css
</a>
<a class="panel-block" href="#">
<a class="panel-block">
<span class="panel-icon">
<i class="fa fa-book"></i>
</span>
jgthms.github.io
</a>
<a class="panel-block" href="#">
<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>
<a class="panel-block" href="#">
<span class="panel-icon">
<i class="fa fa-book"></i>
</span>
grumpy-cat
</a>
<label class="panel-block">
<input type="checkbox">
Remember me
@@ -109,8 +105,17 @@ doc-subtab: panel
</button>
</div>
</nav>
{% endcapture %}
<div class="columns">
<div class="column is-4">
{{panel_example}}
</div>
<div class="column">
{% highlight html %}
{{panel_example}}
{% endhighlight %}
</div>
</div>
</div>
</section>