mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 11:54:30 -07:00
More snippets
This commit is contained in:
Jeremy Thomas
@@ -591,16 +591,7 @@ variables:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example">
|
||||
{{ file }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ file }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=file %}
|
||||
|
||||
{% include anchor.html name="Modifiers" %}
|
||||
|
||||
@@ -686,29 +677,21 @@ variables:
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can style the file element by appending one of the <strong>9 color modifiers</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
{% for color in site.colors %}
|
||||
<li>
|
||||
<code>is-{{ color }}</code>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ file_colors }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_colors }}{% endhighlight %}
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
You can style the file element by appending one of the <strong>9 color modifiers</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
{% for color in site.colors %}
|
||||
<li>
|
||||
<code>is-{{ color }}</code>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=file_colors clipped=true %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
@@ -728,49 +711,13 @@ variables:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example">
|
||||
{{ file_sizes }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_sizes }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=file_sizes clipped=true %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example">
|
||||
{{ file_sizes_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_sizes_name }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=file_sizes_name clipped=true %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example">
|
||||
{{ file_sizes_boxed }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_sizes_boxed }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=file_sizes_boxed clipped=true %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example">
|
||||
{{ file_sizes_boxed_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_sizes_boxed_name }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=file_sizes_boxed_name clipped=true %}
|
||||
|
||||
{% include anchor.html name="Alignment" %}
|
||||
|
||||
@@ -788,27 +735,9 @@ variables:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example">
|
||||
{{ file_centered }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_centered }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=file_centered %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example">
|
||||
{{ file_right }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_right }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=file_right %}
|
||||
|
||||
{% include anchor.html name="JavaScript" %}
|
||||
|
||||
|
||||
@@ -815,16 +815,14 @@ doc-subtab: general
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{example}}
|
||||
{{ example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{example}}{% endhighlight %}
|
||||
{% highlight html %}{{ example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 id="form-field" class="title">Form field</h3>
|
||||
{% include anchor.html name="Form field" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>field</code> container is a simple container for:</p>
|
||||
@@ -835,31 +833,15 @@ doc-subtab: general
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{field_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{field_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=field_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>This container allows form fields to be <strong>spaced consistently</strong>.</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{fields_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{fields_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=fields_example %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 id="form-control" class="title">Form control</h3>
|
||||
{% include anchor.html name="Form control" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>control</code> is a versatile container meant to <strong>enhance single form controls</strong>. Because it has the same height as a control elements, it can <strong class="has-text-danger">only contain</strong> the following elements:</p>
|
||||
@@ -871,37 +853,15 @@ doc-subtab: general
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{control_input_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{control_input_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=control_input_example %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{control_select_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{control_select_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=control_select_example %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{control_button_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{control_button_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=control_button_example %}
|
||||
|
||||
<!-- Font Awesome Icons -->
|
||||
<hr>
|
||||
{% include anchor.html name="With icons" %}
|
||||
|
||||
<h3 class="title">With icons</h3>
|
||||
<div class="content">
|
||||
<p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
|
||||
<ul>
|
||||
@@ -923,80 +883,39 @@ doc-subtab: general
|
||||
</ul>
|
||||
<p>The size of the <strong>input</strong> will define the size of the icon container.</p>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{icons_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
{% highlight html %}{{icons_example}}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=icons_example clipped=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can append icons to <strong>select dropdowns</strong> as well.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can append icons to <strong>select dropdowns</strong> as well.
|
||||
</p>
|
||||
</div>
|
||||
{{select_icons_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{select_icons_example}}{% endhighlight %}
|
||||
</div>
|
||||
{% include snippet.html content=select_icons_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="content">
|
||||
<p>
|
||||
If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
|
||||
</p>
|
||||
</div>
|
||||
{{has_icons_small_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{has_icons_small_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=has_icons_small_example %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{has_icons_normal_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{has_icons_normal_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=has_icons_normal_example clipped=true %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{has_icons_medium_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{has_icons_medium_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=has_icons_medium_example clipped=true %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{has_icons_large_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{has_icons_large_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=has_icons_large_example clipped=true %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Form addons" %}
|
||||
|
||||
<h3 id="form-addons" class="title">Form addons</h3>
|
||||
<div class="content">
|
||||
<p>If you want to <strong>attach controls</strong> together, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{addons_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_example}}{% endhighlight %}
|
||||
|
||||
{% include snippet.html content=addons_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
|
||||
</div>
|
||||
@@ -1009,67 +928,46 @@ doc-subtab: general
|
||||
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
{{addons_static_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_static_example}}{% endhighlight %}
|
||||
{% include snippet.html content=addons_static_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{addons_expanded_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_expanded_example}}{% endhighlight %}
|
||||
|
||||
{% include snippet.html content=addons_expanded_example horizontal=true clipped=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{addons_expanded_fullwidth_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_expanded_fullwidth_example}}{% endhighlight %}
|
||||
|
||||
{% include snippet.html content=addons_expanded_fullwidth_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{addons_center_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_center_example}}{% endhighlight %}
|
||||
<div class="bd-example">
|
||||
{{addons_right_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_right_example}}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
{% include snippet.html content=addons_center_example %}
|
||||
|
||||
{% include snippet.html content=addons_right_example %}
|
||||
|
||||
{% include anchor.html name="Form group" %}
|
||||
|
||||
<h3 class="title">Form group</h3>
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>field</code> container.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
{{group_example}}
|
||||
</div>
|
||||
{% highlight html %}{{group_example}}{% endhighlight %}
|
||||
{% include snippet.html content=group_example %}
|
||||
|
||||
<div class="content">
|
||||
Use the <code>is-grouped-centered</code> or the <code>is-grouped-right</code> modifers to alter the <strong>alignment</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
{{group_centered_example}}
|
||||
</div>
|
||||
{% highlight html %}{{group_centered_example}}{% endhighlight %}
|
||||
{% include snippet.html content=group_centered_example %}
|
||||
|
||||
<div class="bd-example">
|
||||
{{group_right_example}}
|
||||
</div>
|
||||
{% highlight html %}{{group_right_example}}{% endhighlight %}
|
||||
{% include snippet.html content=group_right_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -1077,10 +975,7 @@ doc-subtab: general
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
{{group_expanded_example}}
|
||||
</div>
|
||||
{% highlight html %}{{group_expanded_example}}{% endhighlight %}
|
||||
{% include snippet.html content=group_expanded_example %}
|
||||
|
||||
<div id="form-group-multiline" class="content">
|
||||
<p>
|
||||
@@ -1092,20 +987,10 @@ doc-subtab: general
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="bd-example">
|
||||
{{group_multiline_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{group_multiline_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=group_multiline_example clipped=true %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Horizontal form" %}
|
||||
|
||||
<h3 class="title">Horizontal form</h3>
|
||||
<div class="content">
|
||||
<p>If you want a <strong>horizontal</strong> form control, use the <code>is-horizontal</code> modifier on the <code>field</code> container, in which you include:</p>
|
||||
<ul>
|
||||
@@ -1118,10 +1003,8 @@ doc-subtab: general
|
||||
</ul>
|
||||
<p>You can use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{horizontal_form_example}}
|
||||
</div>
|
||||
{% highlight html %}{{horizontal_form_example}}{% endhighlight %}
|
||||
|
||||
{% include snippet.html content=horizontal_form_example horizontal=true clipped=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -1142,9 +1025,8 @@ doc-subtab: general
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{field_label_example}}
|
||||
</div>
|
||||
{% highlight html %}{{field_label_example}}{% endhighlight %}
|
||||
|
||||
{% include snippet.html content=field_label_example horizontal=true clipped=true %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user