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

Create snippet component

Browse Source
This commit is contained in:
Jeremy Thomas
2017-08-30 20:44:39 +01:00
parent 1776d601da
commit 9b06974cd1
15 changed files with 180 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
docs/documentation/elements/button.html
View File

@@ -425,14 +425,7 @@ variables:
</p>
</div>
<div class="columns">
<div class="column">
{{button_example}}
</div>
<div class="column">
{% highlight html %}{{button_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=button_example %}
<div class="content">
<p>
@@ -454,59 +447,23 @@ variables:
</ul>
</div>
<div class="columns">
<div class="column">
{{button_tags_example}}
</div>
<div class="column">
{% highlight html %}{{button_tags_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=button_tags_example %}
{% include anchor.html name="Colors" %}
<div class="columns">
<div class="column">
{{button_colors_a_example}}
</div>
<div class="column">
{% highlight html %}{{button_colors_a_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=button_colors_a_example %}
<div class="columns">
<div class="column">
{{button_colors_b_example}}
</div>
<div class="column">
{% highlight html %}{{button_colors_b_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=button_colors_b_example %}
{% include anchor.html name="Sizes" %}
<div class="columns">
<div class="column">
{{button_sizes_example}}
</div>
<div class="column">
{% highlight html %}{{button_sizes_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=button_sizes_example %}
<hr>
{% include anchor.html name="Styles" %}
<h3 class="title">Styles</h3>
<h4 class="subtitle">Outlined</h4>
<div class="columns">
<div class="column">
{{button_outlined_example}}
</div>
<div class="column">
{% highlight html %}{{button_outlined_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=button_outlined_example %}
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
@@ -517,7 +474,7 @@ variables:
</div>
</div>
<div class="column">
{% highlight html %}{{button_inverted_example}}{% endhighlight %}
{% highlight html %}{{button_inverted_example}}{% endhighlight %}
</div>
</div>
@@ -534,52 +491,23 @@ variables:
</div>
</div>
<hr>
{% include anchor.html name="States" %}
<h3 class="title">States</h3>
<h4 class="subtitle">Normal</h4>
<div class="columns">
<div class="column">
{{button_normal_example}}
</div>
<div class="column">
{% highlight html %}{{button_normal_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=button_normal_example %}
<h4 class="subtitle">Hover</h4>
<div class="columns">
<div class="column">
{{button_hover_example}}
</div>
<div class="column">
{% highlight html %}{{button_hover_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=button_hover_example %}
<h4 class="subtitle">Focus</h4>
<div class="columns">
<div class="column">
{{button_focus_example}}
</div>
<div class="column">
{% highlight html %}{{button_focus_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=button_focus_example %}
<h4 class="subtitle">Active</h4>
<div class="columns">
<div class="column">
{{button_active_example}}
</div>
<div class="column">
{% highlight html %}{{button_active_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=button_active_example %}
<h4 class="subtitle">Loading</h4>
@@ -643,14 +571,7 @@ variables:
<h4 class="subtitle">With Font Awesome icons</h4>
<div class="columns">
<div class="column">
{{button_fa_example}}
</div>
<div class="column">
{% highlight html %}{{button_fa_example}}{% endhighlight %}
</div>
</div>
{% include snippet.html content=button_fa_example %}
<div class="columns">
<div class="column">
@@ -669,40 +590,29 @@ variables:
</div>
</div>
<hr>
{% include anchor.html name="Button group" %}
<h3 class="title">Button group</h3>
<div class="content">
<p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
<p>If you want to <strong>group</strong> buttons together on a <strong>single line</strong>, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
</div>
<div class="bd-example">
{{button_group_example}}
</div>
{% highlight html %}{{button_group_example}}{% endhighlight %}
<hr>
{% include snippet.html content=button_group_example %}
{% include anchor.html name="Button addons" %}
<h3 class="title">Button addons</h3>
<div class="content">
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
</div>
<div class="bd-example">
{{button_addons_example}}
</div>
{% highlight html %}{{button_addons_example}}{% endhighlight %}
{% include snippet.html content=button_addons_example %}
<hr>
{% include anchor.html name="Button group with addons" %}
<h3 class="title">Button group with addons</h3>
<div class="content">
<p>You can group together addons as well:</p>
</div>
<div class="bd-example">
{{button_group_addons_example}}
</div>
{% highlight html %}{{button_group_addons_example}}{% endhighlight %}
{% include snippet.html content=button_group_addons_example %}
{% include variables.html %}