mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
Meta button
This commit is contained in:
Jeremy Thomas
parent
28856f6388
commit
741e9d2d40
@ -39,6 +39,9 @@ variables:
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_colors_example %}
|
||||
<article class="message is-dark">
|
||||
<div class="message-header">
|
||||
<p>Dark</p>
|
||||
@ -95,6 +98,54 @@ variables:
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_small %}
|
||||
<article class="message is-small">
|
||||
<div class="message-header">
|
||||
<p>Small message</p>
|
||||
<button class="delete is-small"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_normal %}
|
||||
<article class="message">
|
||||
<div class="message-header">
|
||||
<p>Normal message</p>
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_medium %}
|
||||
<article class="message is-medium">
|
||||
<div class="message-header">
|
||||
<p>Medium message</p>
|
||||
<button class="delete is-medium"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_large %}
|
||||
<article class="message is-large">
|
||||
<div class="message-header">
|
||||
<p>Large message</p>
|
||||
<button class="delete is-large"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_body_example %}
|
||||
<article class="message">
|
||||
<div class="message-body">
|
||||
@ -174,6 +225,63 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="colors" class="title" style="padding-top: 1.5rem;">
|
||||
Colors
|
||||
</h3>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_colors_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{message_colors_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="sizes" class="title" style="padding-top: 1.5rem;">
|
||||
Sizes
|
||||
</h3>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_small}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{message_small}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_normal}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{message_normal}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_medium}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{message_medium}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_large}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{message_large}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -61,6 +61,12 @@ variables:
|
||||
<h2 class="subtitle">
|
||||
A white <strong>box</strong> to contain other elements
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=false
|
||||
sizes=false
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
@ -45,48 +45,25 @@ variables:
|
||||
value: inset 0 1px 2px rgba($black, 0.2)
|
||||
---
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Buttons</h1>
|
||||
<h2 class="subtitle">
|
||||
The classic <strong>button</strong>, in different colors, sizes, and states
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
{% capture button_example %}
|
||||
<div class="block">
|
||||
<a class="button">Button</a>
|
||||
<a class="button is-white">White</a>
|
||||
<a class="button is-light">Light</a>
|
||||
<a class="button is-dark">Dark</a>
|
||||
<a class="button is-black">Black</a>
|
||||
<a class="button is-link">Link</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<a class="button is-primary">Primary</a>
|
||||
<a class="button is-info">Info</a>
|
||||
<a class="button is-success">Success</a>
|
||||
<a class="button is-warning">Warning</a>
|
||||
<a class="button is-danger">Danger</a>
|
||||
</div>
|
||||
<a class="button">Button</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
{% capture button_colors_a_example %}
|
||||
<a class="button is-white">White</a>
|
||||
<a class="button is-light">Light</a>
|
||||
<a class="button is-dark">Dark</a>
|
||||
<a class="button is-black">Black</a>
|
||||
<a class="button is-link">Link</a>
|
||||
{% endcapture %}
|
||||
|
||||
<h3 class="title">Sizes</h3>
|
||||
{% capture button_colors_b_example %}
|
||||
<a class="button is-primary">Primary</a>
|
||||
<a class="button is-info">Info</a>
|
||||
<a class="button is-success">Success</a>
|
||||
<a class="button is-warning">Warning</a>
|
||||
<a class="button is-danger">Danger</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_sizes_example %}
|
||||
<a class="button is-small">Small</a>
|
||||
@ -94,21 +71,7 @@ variables:
|
||||
<a class="button is-medium">Medium</a>
|
||||
<a class="button is-large">Large</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_sizes_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_sizes_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Styles</h3>
|
||||
<h4 class="subtitle">Outlined</h4>
|
||||
{% capture button_outlined_example %}
|
||||
<a class="button is-outlined">Outlined</a>
|
||||
<a class="button is-primary is-outlined">Outlined</a>
|
||||
@ -116,18 +79,6 @@ variables:
|
||||
<a class="button is-success is-outlined">Outlined</a>
|
||||
<a class="button is-danger is-outlined">Outlined</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_outlined_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_outlined_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
|
||||
|
||||
{% capture button_inverted_example %}
|
||||
<a class="button is-primary is-inverted">Inverted</a>
|
||||
@ -135,20 +86,6 @@ variables:
|
||||
<a class="button is-success is-inverted">Inverted</a>
|
||||
<a class="button is-danger is-inverted">Inverted</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="callout is-primary">
|
||||
{{button_inverted_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_inverted_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4>
|
||||
|
||||
{% capture button_inverted_outlined_example %}
|
||||
<a class="button is-primary is-inverted is-outlined">Invert Outlined</a>
|
||||
@ -156,23 +93,6 @@ variables:
|
||||
<a class="button is-success is-inverted is-outlined">Invert Outlined</a>
|
||||
<a class="button is-danger is-inverted is-outlined">Invert Outlined</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="callout is-primary">
|
||||
{{button_inverted_outlined_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_inverted_outlined_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">States</h3>
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
|
||||
{% capture button_normal_example %}
|
||||
<a class="button">Normal</a>
|
||||
@ -182,18 +102,6 @@ variables:
|
||||
<a class="button is-warning">Normal</a>
|
||||
<a class="button is-danger">Normal</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_normal_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_normal_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
|
||||
{% capture button_hover_example %}
|
||||
<a class="button is-hovered">Hover</a>
|
||||
@ -203,18 +111,6 @@ variables:
|
||||
<a class="button is-warning is-hovered">Hover</a>
|
||||
<a class="button is-danger is-hovered">Hover</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_hover_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_hover_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
|
||||
{% capture button_focus_example %}
|
||||
<a class="button is-focused">Focus</a>
|
||||
@ -224,18 +120,6 @@ variables:
|
||||
<a class="button is-warning is-focused">Focus</a>
|
||||
<a class="button is-danger is-focused">Focus</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_focus_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_focus_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Active</h4>
|
||||
|
||||
{% capture button_active_example %}
|
||||
<a class="button is-active">Active</a>
|
||||
@ -245,18 +129,6 @@ variables:
|
||||
<a class="button is-warning is-active">Active</a>
|
||||
<a class="button is-danger is-active">Active</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_active_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_active_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
|
||||
{% capture button_loading_example %}
|
||||
<a class="button is-loading">Loading</a>
|
||||
@ -266,46 +138,10 @@ variables:
|
||||
<a class="button is-warning is-loading">Loading</a>
|
||||
<a class="button is-danger is-loading">Loading</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_loading_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_loading_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 id="static-button" class="subtitle">
|
||||
Static
|
||||
</h4>
|
||||
|
||||
{% capture button_static_example %}
|
||||
<span class="button is-static">Static</span>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.4.2</span>
|
||||
</p>
|
||||
<p>
|
||||
You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/form/general#form-addons">form addons</a>.
|
||||
</p>
|
||||
</div>
|
||||
{{button_static_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_static_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Disabled</h4>
|
||||
|
||||
{% capture button_disabled_example %}
|
||||
<a class="button" title="Disabled button" disabled>Disabled</a>
|
||||
@ -315,23 +151,6 @@ variables:
|
||||
<a class="button is-warning" title="Disabled button" disabled>Disabled</a>
|
||||
<a class="button is-danger" title="Disabled button" disabled>Disabled</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="block">{{button_disabled_example}}</div>
|
||||
<div class="message is-danger">
|
||||
<div class="message-body">
|
||||
<p>The <code>is-disabled</code> CSS class has been deprecated in favor of the <code>disabled</code> HTML attribute. <a href="https://github.com/jgthms/bulma/issues/276">Learn more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_disabled_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">With Font Awesome icons</h4>
|
||||
|
||||
{% capture button_fa_example %}
|
||||
<p class="field">
|
||||
@ -404,27 +223,7 @@ variables:
|
||||
</a>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_fa_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_fa_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
</p>
|
||||
<p>
|
||||
If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
|
||||
</p>
|
||||
</div>
|
||||
{% capture button_only_icon_example %}
|
||||
<p class="field">
|
||||
<a class="button is-small">
|
||||
@ -485,21 +284,7 @@ variables:
|
||||
</a>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
{{button_only_icon_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_only_icon_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
{% capture button_group_example %}
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
@ -519,19 +304,7 @@ variables:
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{button_group_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{button_group_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<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>
|
||||
{% capture button_addons_example %}
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
@ -560,19 +333,7 @@ variables:
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{button_addons_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{button_addons_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Button group with addons</h3>
|
||||
<div class="content">
|
||||
<p>You can group together addons as well:</p>
|
||||
</div>
|
||||
{% capture button_group_addons_example %}
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
@ -628,12 +389,272 @@ variables:
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{button_group_addons_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{button_group_addons_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Buttons</h1>
|
||||
<h2 class="subtitle">
|
||||
The classic <strong>button</strong>, in different colors, sizes, and states
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=true
|
||||
sizes=true
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="colors" class="title" style="padding-top: 1.5rem;">
|
||||
Colors
|
||||
</h3>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_colors_a_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_colors_a_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_colors_b_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_colors_b_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="sizes" class="title" style="padding-top: 1.5rem;">
|
||||
Sizes
|
||||
</h3>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_sizes_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_sizes_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<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>
|
||||
|
||||
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="callout is-primary">
|
||||
{{button_inverted_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_inverted_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="callout is-primary">
|
||||
{{button_inverted_outlined_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_inverted_outlined_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_loading_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_loading_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 id="static-button" class="subtitle">
|
||||
Static
|
||||
</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.4.2</span>
|
||||
</p>
|
||||
<p>
|
||||
You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/form/general#form-addons">form addons</a>.
|
||||
</p>
|
||||
</div>
|
||||
{{button_static_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_static_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Disabled</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="block">
|
||||
{{button_disabled_example}}
|
||||
</div>
|
||||
<div class="message is-danger">
|
||||
<div class="message-body">
|
||||
<p>The <code>is-disabled</code> CSS class has been deprecated in favor of the <code>disabled</code> HTML attribute. <a href="https://github.com/jgthms/bulma/issues/276">Learn more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_disabled_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
</p>
|
||||
<p>
|
||||
If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
|
||||
</p>
|
||||
</div>
|
||||
{{button_only_icon_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_only_icon_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div class="example">
|
||||
{{button_group_example}}
|
||||
</div>
|
||||
{% highlight html %}{{button_group_example}}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<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="example">
|
||||
{{button_addons_example}}
|
||||
</div>
|
||||
{% highlight html %}{{button_addons_example}}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Button group with addons</h3>
|
||||
<div class="content">
|
||||
<p>You can group together addons as well:</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{{button_group_addons_example}}
|
||||
</div>
|
||||
{% highlight html %}{{button_group_addons_example}}{% endhighlight %}
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user