From d18286f6cab6e8caf341384500fa749fe84fac1f Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 17 Jul 2017 15:51:22 +0100 Subject: [PATCH] Add form input doc --- docs/documentation/form/general.html | 302 ++++++++++++++++++-- docs/documentation/form/input.html | 394 +++++++++++++++++++++++++++ 2 files changed, 678 insertions(+), 18 deletions(-) create mode 100644 docs/documentation/form/input.html diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html index 7c9257fc..a99f81ec 100644 --- a/docs/documentation/form/general.html +++ b/docs/documentation/form/general.html @@ -7,9 +7,9 @@ doc-subtab: general {% capture example %}
-

+

-

+
@@ -140,16 +140,194 @@ doc-subtab: general
{% endcapture %} +{% capture icons_example %} +
+

+ + + + + + + +

+
+
+

+ + + + +

+
+
+

+ +

+
+{% endcapture %} + +{% capture select_icons_example %} +
+

+ + + + + + +

+
+{% endcapture %} + +{% capture has_icons_small_example %} +
+ +
+ + + + + + + +
+
+{% endcapture %} + +{% capture has_icons_normal_example %} +
+ +
+ + + + + + + +
+
+ +
+
+ + + + + + + +
+
+{% endcapture %} + +{% capture has_icons_medium_example %} +
+ +
+ + + + + + + +
+
+ +
+
+ + + + + + + +
+
+ +
+
+ + + + + + + +
+
+{% endcapture %} + +{% capture has_icons_large_example %} +
+ +
+ + + + + + + +
+
+ +
+
+ + + + + + + +
+
+ +
+
+ + + + + + + +
+
+ +
+
+ + + + + + + +
+
+{% endcapture %} + {% capture addons_example %}
-

+

-

-

+

+
Search -

+
{% endcapture %} @@ -210,8 +388,8 @@ doc-subtab: general {% capture addons_expanded_fullwidth_example %}
-

- +

+
- -

-

+

+
+
-

+
{% endcapture %} @@ -539,7 +717,6 @@ doc-subtab: general
  • a form control
  • an optional helptext
    • -

    It allows form fields to be spaced consistently.

    @@ -569,7 +746,7 @@ doc-subtab: general

    Form control

    -

    The control is a versatile container meant to enhance single form controls. Because it has the same height as a control elements, It can only contain the following elements:

    +

    The control is a versatile container meant to enhance single form controls. Because it has the same height as a control elements, it can only contain the following elements:

    • input
    • select
      • @@ -605,6 +782,95 @@ doc-subtab: general
    + +
    + +

    With icons

    +
    +

    You can append one of 2 modifiers on a control:

    + +

    You also need to add a modifier on the icon:

    + +

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

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

    + You can 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

    @@ -628,17 +894,17 @@ doc-subtab: general
    - {{addons_static_example}} + {{addons_static_example}}
    - {% highlight html %}{{addons_static_example}}{% endhighlight %} + {% 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}} + {{addons_expanded_example}}
    - {% highlight html %}{{addons_expanded_example}}{% endhighlight %} + {% highlight html %}{{addons_expanded_example}}{% endhighlight %}

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

    diff --git a/docs/documentation/form/input.html b/docs/documentation/form/input.html new file mode 100644 index 00000000..eef890cf --- /dev/null +++ b/docs/documentation/form/input.html @@ -0,0 +1,394 @@ +--- +layout: documentation +doc-tab: form +doc-subtab: input +--- + +{% capture input_example %} + +{% endcapture %} + +{% capture colors_example %} +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +{% endcapture %} + +{% capture sizes_example %} +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +{% endcapture %} + +{% capture normal_example %} +
    + +
    +{% endcapture %} + +{% capture hover_example %} +
    + +
    +{% endcapture %} + +{% capture focus_example %} +
    + +
    +{% endcapture %} + +{% capture loading_example %} +
    + +
    +{% endcapture %} + +{% capture loading_sizes_example %} +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +{% endcapture %} + +{% capture disabled_example %} +
    + +
    +{% endcapture %} + +{% capture icons_example %} +
    +

    + + + + + + + +

    +
    +
    +

    + + + + +

    +
    +{% endcapture %} + +{% capture has_icons_small_example %} +
    + + + + + + + +
    +{% endcapture %} + +{% capture has_icons_normal_example %} +
    + + + + + + + +
    +{% endcapture %} + +{% capture has_icons_medium_example %} +
    + + + + + + + +
    +{% endcapture %} + +{% capture has_icons_large_example %} +
    + + + + + + + +
    +{% endcapture %} + +{% include subnav-form.html %} + +
    +
    +

    Input

    +

    + The text input and its variations +

    + +
    + +
    +

    The following form controls classes are supported:

    + +

    The following type attributes are supported:

    +
      +
    • type="text"
      • +
    • type="password"
      • +
    • type="email"
      • +
    • type="tel"
      • +
    +
    + +
    +
    + {{input_example}} +
    +
    + {% highlight html %}{{input_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 %} +
    +
    + +
    +
    +
    +

    + 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 %} +
    +
    + +
    +