mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 03:44:31 -07:00
Add form input doc
This commit is contained in:
Jeremy Thomas
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user