From bb8ef7c1404e106ebef97efa489b89620fa55666 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sun, 16 Jul 2017 20:41:53 +0100 Subject: [PATCH] Fix form html --- docs/_layouts/documentation.html | 2 +- docs/documentation/elements/form.html | 727 ++++++++++++-------------- 2 files changed, 349 insertions(+), 380 deletions(-) diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index 9917654e..e42770b8 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -4,10 +4,10 @@ route: documentation ---
- {% include navbar.html id="Documentation" %}
+ {% include navbar.html id="Documentation" %}
diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html index f0bbc78a..1048d6d0 100644 --- a/docs/documentation/elements/form.html +++ b/docs/documentation/elements/form.html @@ -4,33 +4,6 @@ doc-tab: elements doc-subtab: form --- -{% include subnav-elements.html %} - -
-
-

Form controls

-

- All generic form controls, designed for consistency -

- -
- -
-

The following form controls classes are supported:

-
    -
  • .label
    • -
  • .input
    • -
  • .textarea
    • -
  • .select
    • -
  • .checkbox
    • -
  • .radio
    • -
  • .button
    • -
  • .help
    • -
-

Each of them should be wrapped in a .control container.
- When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.

-
- {% capture form_example %}
@@ -118,20 +91,6 @@ doc-subtab: form
{% endcapture %} -
-
- {{form_example}} -
-
-{% highlight html %} -{{form_example}} -{% endhighlight %} -
-
- -
- -

Colors

{% capture colors_example %}

@@ -159,18 +118,6 @@ doc-subtab: form

{% endcapture %} -
-
- {{colors_example}} -
-
-{% highlight html %} -{{colors_example}} -{% endhighlight %} -
-
- -
{% capture sizes_example %}
@@ -234,22 +181,7 @@ doc-subtab: form

{% endcapture %} -

Sizes

-
-
- {{sizes_example}} -
-
-{% highlight html %} -{{sizes_example}} -{% endhighlight %} -
-
-
- -

States

-

Normal

{% capture normal_example %}

@@ -262,18 +194,7 @@ doc-subtab: form

{% endcapture %} -
-
-{{normal_example}} -
-
-{% highlight html %} -{{normal_example}} -{% endhighlight %} -
-
-

Hover

{% capture hover_example %}

@@ -286,18 +207,7 @@ doc-subtab: form

{% endcapture %} -
-
- {{hover_example}} -
-
-{% highlight html %} -{{hover_example}} -{% endhighlight %} -
-
-

Focus

{% capture focus_example %}

@@ -310,18 +220,7 @@ doc-subtab: form

{% endcapture %} -
-
-{{focus_example}} -
-
-{% highlight html %} -{{focus_example}} -{% endhighlight %} -
-
-

Loading

{% capture loading_example %}

@@ -343,16 +242,6 @@ doc-subtab: form

{% endcapture %} -
-
-{{loading_example}} -
-
-{% highlight html %} -{{loading_example}} -{% endhighlight %} -
-
{% capture loading_sizes_example %}
@@ -413,29 +302,6 @@ doc-subtab: form
{% endcapture %} -{% if site.vernum >= 43 %} -
-
-

- New! - 0.4.3 -

-
-

- You can resize the loading spinner by appending is-small, is-medium or is-large to the control container. -

-
-{{loading_sizes_example}} -
-
-{% highlight html %} -{{loading_sizes_example}} -{% endhighlight %} -
-
-{% endif %} - -

Disabled

{% capture disabled_example %}

@@ -485,42 +351,7 @@ doc-subtab: form

{% endcapture %} -
-
-{{disabled_example}} -
-
-{% highlight html %} -{{disabled_example}} -{% endhighlight %} -
-
- -
- -

With icons

-
-

You can append one of 2 modifiers on a control:

-
    -
  • - has-icons-left -
    • -
  • - and/or has-icons-right -
    • -
-

You also need to add a modifier on the icon:

-
    -
  • - icon is-left if has-icons-left is used -
    • -
  • - icon is-right if has-icons-right is used -
    • -
-

The size of the input will define the size of the icon container.

-
{% capture icons_example %}

@@ -546,16 +377,6 @@ doc-subtab: form

{% endcapture %} -
-
-{{icons_example}} -
-
-{% highlight html %} -{{icons_example}} -{% endhighlight %} -
-
{% capture select_icons_example %}
@@ -573,32 +394,6 @@ doc-subtab: form

{% endcapture %} -
-
- -
-

- New! - 0.4.2 -

-

- You can now append icons to select dropdowns as well. -

-
-{{select_icons_example}} -
-
-{% highlight html %} -{{select_icons_example}} -{% endhighlight %} -
-
- -
-

- If the control contains an icon, Bulma will make sure the icon remains centered, no matter the size of the input or of the icon. -

-
{% capture has_icons_small_example %}
@@ -731,56 +526,7 @@ doc-subtab: form

{% endcapture %} -
-
-{{has_icons_small_example}} -
-
-{% highlight html %} -{{has_icons_small_example}} -{% endhighlight %} -
-
-
-
-{{has_icons_normal_example}} -
-
-{% highlight html %} -{{has_icons_normal_example}} -{% endhighlight %} -
-
- -
-
-{{has_icons_medium_example}} -
-
-{% highlight html %} -{{has_icons_medium_example}} -{% endhighlight %} -
-
- -
-
-{{has_icons_large_example}} -
-
-{% highlight html %} -{{has_icons_large_example}} -{% endhighlight %} -
-
- -
- -

Form addons

-
-

If you want to attach controls together, use the has-addons modifier on the control container:

-
{% capture addons_example %}

@@ -793,23 +539,6 @@ doc-subtab: form

{% endcapture %} -
-{{addons_example}} -
-{% highlight html %} -{{addons_example}} -{% endhighlight %} -
-

You can attach inputs, buttons, and dropdowns only.

-
- -
-

- New! - 0.4.2 -

-

It can be useful to append a static button.

-
{% capture addons_static_example %}
@@ -823,16 +552,7 @@ doc-subtab: form

{% endcapture %} -
-{{addons_static_example}} -
-{% highlight html %} -{{addons_static_example}} -{% endhighlight %} -
-

Use the is-expanded modifier on the element you want to fill up the remaining space (in this case, the input):

-
{% capture addons_expanded_example %}

@@ -874,16 +594,7 @@ doc-subtab: form

{% endcapture %} -
-{{addons_expanded_example}} -
-{% highlight html %} -{{addons_expanded_example}} -{% endhighlight %} -
-

If you want a full width select dropdown, pair control is-expanded with select is-fullwidth.

-
{% capture addons_expanded_fullwidth_example %}

@@ -909,16 +620,7 @@ doc-subtab: form

{% endcapture %} -
-{{addons_expanded_fullwidth_example}} -
-{% highlight html %} -{{addons_expanded_fullwidth_example}} -{% endhighlight %} -
-

Use the has-addons-centered or the has-addons-right modifers to alter the alignment.

-
{% capture addons_center_example %}

@@ -940,12 +642,7 @@ doc-subtab: form

{% endcapture %} -
-{{addons_center_example}} -
-{% highlight html %} -{{addons_center_example}} -{% endhighlight %} + {% capture addons_right_example %}

@@ -967,26 +664,7 @@ doc-subtab: form

{% endcapture %} -
-{{addons_right_example}} -
-{% highlight html %} -{{addons_right_example}} -{% endhighlight %} -
- -

Form group

-
-

- If you want to group controls together, use the is-grouped modifier on the control container. -
- Use the is-grouped-centered or the is-grouped-right modifers to alter the alignment. -

-

- Add the is-expanded modifier on the control element you want to fill up the remaining space. -

-
{% capture group_example %}

@@ -999,28 +677,7 @@ doc-subtab: form

{% endcapture %} -
-{{group_example}} -
-{% highlight html %} -{{group_example}} -{% endhighlight %} -
- -

Horizontal form

-
-

If you want a horizontal form control, use the is-horizontal modifier on the field container, in which you include:

-
    -
  • - field-label for the side label -
    • -
  • - field-body for the input/select/textarea container -
    • -
-

You can of course use is-grouped or has-addons for the child elements.

-
{% capture horizontal_form_example %}
@@ -1133,35 +790,6 @@ doc-subtab: form
{% endcapture %} -
-{{horizontal_form_example}} -
-{% highlight html %} -{{horizontal_form_example}} -{% endhighlight %} - -
-

- New! -

-

- To preserve the vertical alignment of labels with each type and size of control, the .field-label comes with 4 size modifiers: -

-
    -
  • - .is-small -
    • -
  • - .is-normal for any .input or .button -
    • -
  • - .is-medium -
    • -
  • - .is-large -
    • -
-
{% capture field_label_example %}
@@ -1232,11 +860,352 @@ doc-subtab: form
{% endcapture %} -
-{{field_label_example}} -
-{% highlight html %} -{{field_label_example}} -{% endhighlight %} + +{% include subnav-elements.html %} + +
+
+

Form controls

+

+ All generic form controls, designed for consistency +

+ +
+ +
+

The following form controls classes are supported:

+
    +
  • .label
    • +
  • .input
    • +
  • .textarea
    • +
  • .select
    • +
  • .checkbox
    • +
  • .radio
    • +
  • .button
    • +
  • .help
    • +
+

Each of them should be wrapped in a .control container.
+ When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.

+
+ +
+
+ {{form_example}} +
+
+ {% highlight html %}{{form_example}}{% endhighlight %} +
+
+ +
+ +

Colors

+
+
+ {{colors_example}} +
+
+ {% highlight html %}{{colors_example}}{% endhighlight %} +
+
+ +
+

Sizes

+
+
+ {{sizes_example}} +
+
+ {% highlight html %}{{sizes_example}}{% endhighlight %} +
+
+ +
+ +

States

+

Normal

+
+
+ {{normal_example}} +
+
+ {% highlight html %}{{normal_example}}{% endhighlight %} +
+
+ +

Hover

+
+
+ {{hover_example}} +
+
+ {% highlight html %}{{hover_example}}{% endhighlight %} +
+
+ +

Focus

+
+
+ {{focus_example}} +
+
+ {% highlight html %}{{focus_example}}{% endhighlight %} +
+
+ +

Loading

+
+
+ {{loading_example}} +
+
+ {% highlight html %}{{loading_example}}{% endhighlight %} +
+
+ + {% if site.vernum >= 43 %} +
+
+

+ New! + 0.4.3 +

+
+

+ You can resize the loading spinner by appending is-small, is-medium or is-large to the control container. +

+
+ {{loading_sizes_example}} +
+
+ {% highlight html %}{{loading_sizes_example}}{% endhighlight %} +
+
+ {% endif %} + +

Disabled

+
+
+ {{disabled_example}} +
+
+ {% highlight html %}{{disabled_example}}{% endhighlight %} +
+
+ + +
+ +

With icons

+
+

You can append one of 2 modifiers on a control:

+
    +
  • + has-icons-left +
    • +
  • + and/or has-icons-right +
    • +
+

You also need to add a modifier on the icon:

+
    +
  • + icon is-left if has-icons-left is used +
    • +
  • + icon is-right if has-icons-right is used +
    • +
+

The size of the input will define the size of the icon container.

+
+
+
+ {{icons_example}} +
+
+ {% highlight html %}{{icons_example}}{% endhighlight %} +
+
+ +
+
+ +
+

+ New! + 0.4.2 +

+

+ You can now append icons to select dropdowns as well. +

+
+ {{select_icons_example}} +
+
+ {% highlight html %}{{select_icons_example}}{% endhighlight %} +
+
+ +
+

+ If the control contains an icon, Bulma will make sure the icon remains centered, no matter the size of the input or of the icon. +

+
+ +
+
+ {{has_icons_small_example}} +
+
+ {% highlight html %}{{has_icons_small_example}}{% endhighlight %} +
+
+ +
+
+ {{has_icons_normal_example}} +
+
+ {% highlight html %}{{has_icons_normal_example}}{% endhighlight %} +
+
+ +
+
+ {{has_icons_medium_example}} +
+
+ {% highlight html %}{{has_icons_medium_example}}{% endhighlight %} +
+
+ +
+
+ {{has_icons_large_example}} +
+
+ {% highlight html %}{{has_icons_large_example}}{% endhighlight %} +
+
+ +
+ +

Form addons

+
+

If you want to attach controls together, use the has-addons modifier on the control container:

+
+
+ {{addons_example}} +
+ {% highlight html %}{{addons_example}}{% endhighlight %} +
+

You can attach inputs, buttons, and dropdowns only.

+
+ +
+

+ New! + 0.4.2 +

+

It can be useful to append a static button.

+
+ +
+ {{addons_static_example}} +
+ {% highlight html %}{{addons_static_example}}{% endhighlight %} + +
+

Use the is-expanded modifier on the element you want to fill up the remaining space (in this case, the input):

+
+
+ {{addons_expanded_example}} +
+ {% highlight html %}{{addons_expanded_example}}{% endhighlight %} + +
+

If you want a full width select dropdown, pair control is-expanded with select is-fullwidth.

+
+
+ {{addons_expanded_fullwidth_example}} +
+ {% highlight html %}{{addons_expanded_fullwidth_example}}{% endhighlight %} + +
+

Use the has-addons-centered or the has-addons-right modifers to alter the alignment.

+
+
+ {{addons_center_example}} +
+ {% highlight html %}{{addons_center_example}}{% endhighlight %} +
+ {{addons_right_example}} +
+ {% highlight html %}{{addons_right_example}}{% endhighlight %} + +
+ +

Form group

+
+

+ If you want to group controls together, use the is-grouped modifier on the control container. +
+ Use the is-grouped-centered or the is-grouped-right modifers to alter the alignment. +

+

+ Add the is-expanded modifier on the control element you want to fill up the remaining space. +

+
+
+ {{group_example}} +
+ {% highlight html %}{{group_example}}{% endhighlight %} + +
+ +

Horizontal form

+
+

If you want a horizontal form control, use the is-horizontal modifier on the field container, in which you include:

+
    +
  • + field-label for the side label +
    • +
  • + field-body for the input/select/textarea container +
    • +
+

You can of course use is-grouped or has-addons for the child elements.

+
+
+ {{horizontal_form_example}} +
+ {% highlight html %}{{horizontal_form_example}}{% endhighlight %} + +
+

+ New! +

+

+ To preserve the vertical alignment of labels with each type and size of control, the .field-label comes with 4 size modifiers: +

+
    +
  • + .is-small +
    • +
  • + .is-normal for any .input or .button +
    • +
  • + .is-medium +
    • +
  • + .is-large +
    • +
+
+
+ {{field_label_example}} +
+ {% highlight html %}{{field_label_example}}{% endhighlight %}