mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Add form input doc
This commit is contained in:
Jeremy Thomas
parent
48f0de2062
commit
d18286f6ca
@ -7,9 +7,9 @@ doc-subtab: general
|
||||
{% capture example %}
|
||||
<div class="field">
|
||||
<label class="label">Name</label>
|
||||
<p class="control">
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Text input">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
@ -140,16 +140,194 @@ doc-subtab: general
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icons_example %}
|
||||
<div class="field">
|
||||
<p class="control has-icons-left has-icons-right">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input" type="password" placeholder="Password">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-lock"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<button class="button is-success">
|
||||
Login
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture select_icons_example %}
|
||||
<div class="field">
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>Country</option>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-globe"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_small_example %}
|
||||
<div class="field">
|
||||
<label class="label is-small">Small input</label>
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-small" type="email" placeholder="Email">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_normal_example %}
|
||||
<div class="field">
|
||||
<label class="label">Normal input</label>
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<span class="icon is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_medium_example %}
|
||||
<div class="field">
|
||||
<label class="label is-medium">Medium input</label>
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-medium" type="email" placeholder="Email">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-medium" type="email" placeholder="Email">
|
||||
<span class="icon is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-medium" type="email" placeholder="Email">
|
||||
<span class="icon is-medium is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-medium is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_large_example %}
|
||||
<div class="field">
|
||||
<label class="label is-large">Large input</label>
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<span class="icon is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<span class="icon is-medium is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-medium is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<span class="icon is-large is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-large is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture addons_example %}
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Find a repository">
|
||||
</p>
|
||||
<p class="control">
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-info">
|
||||
Search
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
@ -210,8 +388,8 @@ doc-subtab: general
|
||||
|
||||
{% capture addons_expanded_fullwidth_example %}
|
||||
<div class="field has-addons">
|
||||
<p class="control is-expanded">
|
||||
<span class="select is-fullwidth">
|
||||
<div class="control is-expanded">
|
||||
<div class="select is-fullwidth">
|
||||
<select name="country">
|
||||
<option value="Argentina">Argentina</option>
|
||||
<option value="Bolivia">Bolivia</option>
|
||||
@ -226,11 +404,11 @@ doc-subtab: general
|
||||
<option value="Uruguay">Uruguay</option>
|
||||
<option value="Venezuela">Venezuela</option>
|
||||
</select>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button type="submit" class="button is-primary">Choose</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
@ -539,7 +717,6 @@ doc-subtab: general
|
||||
<li>a form <code>control</code></li>
|
||||
<li>an optional <code>help</code>text</li>
|
||||
</ul>
|
||||
<p>It allows form fields to be <strong>spaced consistently</strong>.</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
@ -569,7 +746,7 @@ doc-subtab: general
|
||||
<h3 id="form-control" class="title">Form control</h3>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<ul>
|
||||
<li><code>input</code></li>
|
||||
<li><code>select</code></li>
|
||||
@ -605,6 +782,95 @@ doc-subtab: general
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font Awesome Icons -->
|
||||
<hr>
|
||||
|
||||
<h3 class="title">With icons</h3>
|
||||
<div class="content">
|
||||
<p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>has-icons-left</code>
|
||||
</li>
|
||||
<li>
|
||||
and/or <code>has-icons-right</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>You also need to add a modifier on the <strong>icon</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>icon is-left</code> if <code>has-icons-left</code> is used
|
||||
</li>
|
||||
<li>
|
||||
<code>icon is-right</code> if <code>has-icons-right</code> is used
|
||||
</li>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 id="form-addons" class="title">Form addons</h3>
|
||||
@ -628,17 +894,17 @@ doc-subtab: general
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{{addons_static_example}}
|
||||
{{addons_static_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_static_example}}{% endhighlight %}
|
||||
{% highlight html %}{{addons_static_example}}{% endhighlight %}
|
||||
|
||||
<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="example">
|
||||
{{addons_expanded_example}}
|
||||
{{addons_expanded_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_expanded_example}}{% endhighlight %}
|
||||
{% highlight html %}{{addons_expanded_example}}{% endhighlight %}
|
||||
|
||||
<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>
|
||||
|
||||
394
docs/documentation/form/input.html
Normal file
394
docs/documentation/form/input.html
Normal file
@ -0,0 +1,394 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: form
|
||||
doc-subtab: input
|
||||
---
|
||||
|
||||
{% capture input_example %}
|
||||
<input class="input" type="text" placeholder="Text input">
|
||||
{% endcapture %}
|
||||
|
||||
{% capture colors_example %}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-primary" type="text" placeholder="Primary input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-info" type="text" placeholder="Info input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-success" type="text" placeholder="Success input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-warning" type="text" placeholder="Warning input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-danger" type="text" placeholder="Danger input">
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture sizes_example %}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-small" type="text" placeholder="Small input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Normal input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-medium" type="text" placeholder="Medium input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-large" type="text" placeholder="Large input">
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture normal_example %}
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Normal input">
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture hover_example %}
|
||||
<div class="control">
|
||||
<input class="input is-hovered" type="text" placeholder="Hovered input">
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture focus_example %}
|
||||
<div class="control">
|
||||
<input class="input is-focused" type="text" placeholder="Focused input">
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture loading_example %}
|
||||
<div class="control is-loading">
|
||||
<input class="input" type="text" placeholder="Loading input">
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture loading_sizes_example %}
|
||||
<div class="field">
|
||||
<div class="control is-small is-loading">
|
||||
<input class="input is-small" type="text" placeholder="Small loading input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control is-loading">
|
||||
<input class="input" type="text" placeholder="Normal loading input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control is-medium is-loading">
|
||||
<input class="input is-medium" type="text" placeholder="Medium loading input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control is-large is-loading">
|
||||
<input class="input is-large" type="text" placeholder="Large loading input">
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture disabled_example %}
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Disabled input" disabled>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icons_example %}
|
||||
<div class="field">
|
||||
<p class="control has-icons-left has-icons-right">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input" type="password" placeholder="Password">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-lock"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_small_example %}
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-small" type="email" placeholder="Email">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_normal_example %}
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_medium_example %}
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-medium" type="email" placeholder="Email">
|
||||
<span class="icon is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_large_example %}
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<span class="icon is-medium is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-medium is-right">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-form.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Input</h1>
|
||||
<h2 class="subtitle">
|
||||
The <strong>text input</strong> and its variations
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>The following form controls <strong>classes</strong> are supported:</p>
|
||||
<ul>
|
||||
<li>the <strong><a href="#input-color">color</a></strong></li>
|
||||
<li>the <strong><a href="#input-size">size</a></strong></li>
|
||||
<li>the <strong><a href="#input-state">state</a></strong></li>
|
||||
</ul>
|
||||
<p>The following <a href="http://htmlreference.io/element/input/" target="_blank">type attributes</a> are supported:</p>
|
||||
<ul>
|
||||
<li><code>type="text"</code></li>
|
||||
<li><code>type="password"</code></li>
|
||||
<li><code>type="email"</code></li>
|
||||
<li><code>type="tel"</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{input_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
{% highlight html %}{{input_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 id="input-color" class="title">Colors</h3>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{colors_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
{% highlight html %}{{colors_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<h3 id="input-size" class="title">Sizes</h3>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{sizes_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{sizes_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 id="input-state" class="title">States</h3>
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{normal_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{normal_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{hover_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{hover_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{focus_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{focus_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{loading_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{loading_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if site.vernum >= 43 %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<p style="margin-bottom: 0.5rem;">
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.4.3</span>
|
||||
</p>
|
||||
<div class="content">
|
||||
<p>
|
||||
You can resize the loading spinner by appending <code>is-small</code>, <code>is-medium</code> or <code>is-large</code> to the <code>control</code> container.
|
||||
</p>
|
||||
</div>
|
||||
{{loading_sizes_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{loading_sizes_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<h4 class="subtitle">Disabled</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{disabled_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{disabled_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font Awesome Icons -->
|
||||
<hr>
|
||||
|
||||
<h3 id="input-with-icons" class="title">With icons</h3>
|
||||
<div class="content">
|
||||
<p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>has-icons-left</code>
|
||||
</li>
|
||||
<li>
|
||||
and/or <code>has-icons-right</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>You also need to add a modifier on the <strong>icon</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>icon is-left</code> if <code>has-icons-left</code> is used
|
||||
</li>
|
||||
<li>
|
||||
<code>icon is-right</code> if <code>has-icons-right</code> is used
|
||||
</li>
|
||||
</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 html %}{{icons_example}}{% endhighlight %}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
Loading…
Reference in New Issue
Block a user