mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
9094eff30a
* Add package files whitelist * Add flex shrink * Add flex shrink * Add docs config * Fix flex shrink * Fix hero pages * Add docs folder
261 lines
7.6 KiB
HTML
261 lines
7.6 KiB
HTML
---
|
|
layout: documentation
|
|
doc-tab: components
|
|
doc-subtab: level
|
|
---
|
|
|
|
{% include subnav-components.html %}
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Level</h1>
|
|
<h2 class="subtitle">A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element</h2>
|
|
|
|
<hr>
|
|
|
|
<div class="content">
|
|
<p>The <strong>structure</strong> of a level is the following:</p>
|
|
<ul>
|
|
<li>
|
|
<code>level</code>: main container
|
|
<ul>
|
|
<li><code>level-left</code> for the left side</li>
|
|
<li>
|
|
<code>level-right</code> for the right side
|
|
<ul>
|
|
<li><code>level-item</code> for each individual element</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
|
|
</div>
|
|
|
|
<div class="structure">
|
|
<nav class="level structure-item is-structure-container" title="level">
|
|
<div class="level-left structure-item" title="level-left">
|
|
<div class="level-item">
|
|
<p class="subtitle is-5">
|
|
<strong>123</strong> posts
|
|
</p>
|
|
</div>
|
|
<div class="level-item">
|
|
<p class="control has-addons">
|
|
<input class="input" type="text" placeholder="Find a post">
|
|
<button class="button">
|
|
Search
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="level-right structure-item" title="level-right">
|
|
<p class="level-item">
|
|
<strong>All</strong>
|
|
</p>
|
|
<p class="level-item">
|
|
<a>Published</a>
|
|
</p>
|
|
<p class="level-item">
|
|
<a>Drafts</a>
|
|
</p>
|
|
<p class="level-item">
|
|
<a>Deleted</a>
|
|
</p>
|
|
<p class="level-item">
|
|
<a class="button is-success">
|
|
New
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<nav class="level">
|
|
<div class="level-left">
|
|
<div class="level-item">
|
|
<p class="subtitle is-5">
|
|
<strong>123</strong> posts
|
|
</p>
|
|
</div>
|
|
<div class="level-item">
|
|
<p class="control has-addons">
|
|
<input class="input" type="text" placeholder="Find a post">
|
|
<button class="button">
|
|
Search
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="level-right">
|
|
<p class="level-item">
|
|
<strong>All</strong>
|
|
</p>
|
|
<p class="level-item">
|
|
<a>Published</a>
|
|
</p>
|
|
<p class="level-item">
|
|
<a>Drafts</a>
|
|
</p>
|
|
<p class="level-item">
|
|
<a>Deleted</a>
|
|
</p>
|
|
<p class="level-item">
|
|
<a class="button is-success">
|
|
New
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
{% highlight html %}
|
|
<!-- Main container -->
|
|
<nav class="level">
|
|
<!-- Left side -->
|
|
<div class="level-left">
|
|
<div class="level-item">
|
|
<p class="subtitle is-5">
|
|
<strong>123</strong> posts
|
|
</p>
|
|
</div>
|
|
<div class="level-item">
|
|
<p class="control has-addons">
|
|
<input class="input" type="text" placeholder="Find a post">
|
|
<button class="button">
|
|
Search
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side -->
|
|
<div class="level-right">
|
|
<p class="level-item"><strong>All</strong></p>
|
|
<p class="level-item"><a>Published</a></p>
|
|
<p class="level-item"><a>Drafts</a></p>
|
|
<p class="level-item"><a>Deleted</a></p>
|
|
<p class="level-item"><a class="button is-success">New</a></p>
|
|
</div>
|
|
</nav>
|
|
{% endhighlight %}
|
|
|
|
<hr>
|
|
<h3 class="title">Centered level</h3>
|
|
|
|
<div class="content">
|
|
If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
|
|
</div>
|
|
|
|
<div class="example">
|
|
<nav class="level">
|
|
<div class="level-item has-text-centered">
|
|
<p class="heading">Tweets</p>
|
|
<p class="title">3,456</p>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<p class="heading">Following</p>
|
|
<p class="title">123</p>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<p class="heading">Followers</p>
|
|
<p class="title">456K</p>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<p class="heading">Likes</p>
|
|
<p class="title">789</p>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
{% highlight html %}
|
|
<nav class="level">
|
|
<div class="level-item has-text-centered">
|
|
<p class="heading">Tweets</p>
|
|
<p class="title">3,456</p>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<p class="heading">Following</p>
|
|
<p class="title">123</p>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<p class="heading">Followers</p>
|
|
<p class="title">456K</p>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<p class="heading">Likes</p>
|
|
<p class="title">789</p>
|
|
</div>
|
|
</nav>
|
|
{% endhighlight %}
|
|
|
|
<div class="example">
|
|
<nav class="level">
|
|
<p class="level-item has-text-centered">
|
|
<a class="link is-info">Home</a>
|
|
</p>
|
|
<p class="level-item has-text-centered">
|
|
<a class="link is-info">Menu</a>
|
|
</p>
|
|
<p class="level-item has-text-centered">
|
|
<img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;">
|
|
</p>
|
|
<p class="level-item has-text-centered">
|
|
<a class="link is-info">Reservations</a>
|
|
</p>
|
|
<p class="level-item has-text-centered">
|
|
<a class="link is-info">Contact</a>
|
|
</p>
|
|
</nav>
|
|
</div>
|
|
|
|
{% highlight html %}
|
|
<nav class="level">
|
|
<p class="level-item has-text-centered">
|
|
<a class="link is-info">Home</a>
|
|
</p>
|
|
<p class="level-item has-text-centered">
|
|
<a class="link is-info">Menu</a>
|
|
</p>
|
|
<p class="level-item has-text-centered">
|
|
<img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;">
|
|
</p>
|
|
<p class="level-item has-text-centered">
|
|
<a class="link is-info">Reservations</a>
|
|
</p>
|
|
<p class="level-item has-text-centered">
|
|
<a class="link is-info">Contact</a>
|
|
</p>
|
|
</nav>
|
|
{% endhighlight %}
|
|
|
|
<hr>
|
|
<h3 class="title">Mobile level</h3>
|
|
<div class="content">
|
|
By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
|
|
</div>
|
|
|
|
<div class="example">
|
|
<nav class="level is-mobile">
|
|
<div class="level-item has-text-centered">
|
|
<p class="heading">Tweets</p>
|
|
<p class="title">3,456</p>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<p class="heading">Following</p>
|
|
<p class="title">123</p>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<p class="heading">Followers</p>
|
|
<p class="title">456K</p>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<p class="heading">Likes</p>
|
|
<p class="title">789</p>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</section>
|