bulma/docs/documentation/modifiers/responsive-helpers.html
2018-03-26 14:46:39 +01:00

289 lines
6.9 KiB
HTML

---
title: Responsive helpers
layout: documentation
doc-tab: modifiers
doc-subtab: responsive-helpers
---
{% capture thead %}
<thead>
<tr>
<th>
Class
</th>
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
<th>
{{ breakpoint.name }}<br>
{% if breakpoint.id == 'mobile' %}
Up to <code>{{ breakpoint.to }}px</code>
{% elsif breakpoint.id == 'fullhd' %}
<code>{{ breakpoint.from }}px</code> and above
{% else %}
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
{% endif %}
</th>
{% endfor %}
</tr>
</thead>
{% endcapture %}
{% capture flex %}
<td class="is-narrow">
<p class="notification is-success">flex</p>
</td>
{% endcapture %}
{% capture visible %}
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
{% endcapture %}
{% capture hidden %}
<td class="is-narrow">
<p class="notification">hidden</p>
</td>
{% endcapture %}
{% capture unchanged %}
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
{% endcapture %}
{% include subnav/subnav-modifiers.html %}
<section class="section">
<div class="container">
<h1 class="title">Responsive helpers</h1>
<h2 class="subtitle"><strong>Show/hide content</strong> depending on the width of the viewport</h2>
{% include anchor.html name="Show" %}
<div class="content">
<p>
You can use one of the following <code>display</code> classes:
</p>
<ul>
<li><code>block</code></li>
<li><code>flex</code></li>
<li><code>inline</code></li>
<li><code>inline-block</code></li>
<li><code>inline-flex</code></li>
</ul>
<p>For example, here's how the <code>is-flex</code> helper works:</p>
</div>
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td class="is-narrow">
<code>is-flex-mobile</code>
</td>
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet-only</code>
</td>
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-desktop-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-widescreen-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
</tr>
<tr>
<th colspan="5">
<p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
</th>
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-touch</code>
</td>
{{ flex }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet</code>
</td>
{{ unchanged }}
{{ flex }}
{{ flex }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-desktop</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-widescreen</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-fullhd</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
</tr>
</tbody>
</table>
<div class="content">
<p>
For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
</p>
</div>
{% include anchor.html name="Hide" %}
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td class="is-narrow">
<code>is-hidden-mobile</code>
</td>
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-tablet-only</code>
</td>
{{ visible }}
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-desktop-only</code>
</td>
{{ visible }}
{{ visible }}
{{ hidden }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-widescreen-only</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
{{ visible }}
</tr>
<tr>
<th colspan="5">
<p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
</th>
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-touch</code>
</td>
{{ hidden }}
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-tablet</code>
</td>
{{ visible }}
{{ hidden }}
{{ hidden }}
{{ hidden }}
{{ hidden }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-desktop</code>
</td>
{{ visible }}
{{ visible }}
{{ hidden }}
{{ hidden }}
{{ hidden }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-widescreen</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
{{ hidden }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-fullhd</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
</tr>
</tbody>
</table>
</div>
</section>