diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html index cbbc2b81..c142561a 100644 --- a/docs/documentation/form/general.html +++ b/docs/documentation/form/general.html @@ -457,6 +457,51 @@ doc-subtab: general {% endcapture %} {% capture group_example %} +
+

+ + Submit + +

+

+ + Cancel + +

+
+{% endcapture %} + +{% capture group_centered_example %} +
+

+ + Submit + +

+

+ + Cancel + +

+
+{% endcapture %} + +{% capture group_right_example %} +
+

+ + Submit + +

+

+ + Cancel + +

+
+{% endcapture %} + +{% capture group_expanded_example %}

@@ -469,6 +514,76 @@ doc-subtab: general

{% endcapture %} +{% capture group_multiline_example %} +
+

+ + One + +

+

+ + Two + +

+

+ + Three + +

+

+ + Four + +

+

+ + Five + +

+

+ + Size + +

+

+ + Seven + +

+

+ + Eight + +

+

+ + Nine + +

+

+ + Ten + +

+

+ + Eleven + +

+

+ + Twelve + +

+

+ + Thirteen + +

+
+{% endcapture %} + {% capture horizontal_form_example %}
@@ -932,18 +1047,61 @@ doc-subtab: general

If you want to group controls together, use the is-grouped modifier on the field 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 with.

+
{{group_example}}
{% highlight html %}{{group_example}}{% endhighlight %} +
+ Use the is-grouped-centered or the is-grouped-right modifers to alter the alignment. +

+
+ +
+ {{group_centered_example}} +
+ {% highlight html %}{{group_centered_example}}{% endhighlight %} + +
+ {{group_right_example}} +
+ {% highlight html %}{{group_right_example}}{% endhighlight %} + +
+

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

+
+ +
+ {{group_expanded_example}} +
+ {% highlight html %}{{group_expanded_example}}{% endhighlight %} + +
+

+ New! + 0.4.4 +

+

+ Add the is-grouped-multiline modifier to allow controls to fill up multiple lines. This is ideal for a long list of controls. +

+
+ +
+
+
+ {{group_multiline_example}} +
+
+
+ {% highlight html %}{{group_multiline_example}}{% endhighlight %} +
+
+

Horizontal form