This page is an example to show how to use a vertical form.
First of all, you need to declare the vertical field constructor as implicit.
@implicitFieldConstructor = @{ b4.vertical.fieldConstructor() }
Or simply use the specific vertical form:
@b4.vertical.form(...) { implicit vfc => ... }
@b4.vertical.form(routes.Application.handleRequest) { implicit vfc => @b4.text( fooForm("foo"), '_label -> "Input Text", 'placeholder -> "A simple text..." ) @b4.email( fooForm("foo"), '_label -> "Email", 'placeholder -> "example@mail.com" ) @b4.password( fooForm("foo"), '_label -> "Password", 'placeholder -> "Password" ) @b4.file( fooForm("foo"), '_label -> "File" ) }
@b4.vertical.form(routes.Application.handleRequest) { implicit vfc => @b4.text( fooForm("foo"), '_label -> "Input Text", 'placeholder -> "A simple text..." ) @b4.text( fooForm("foo"), '_label -> "Help", '_help -> "This is a help text", 'placeholder -> "A simple text showing a help..." ) @b4.text( fooForm("foo"), '_label -> "Constraints", '_showConstraints -> true, 'placeholder -> "A simple text showing its constraints..." ) @b4.text( fooForm("foo"), 'placeholder -> "Without label" ) @b4.text( fooForm("foo"), '_label -> "A big text", 'class -> "form-control-lg", 'placeholder -> "An awesome field..." ) }
@b4.vertical.form(routes.Application.handleRequest) { implicit vfc => @b4.textarea( fooForm("foo"), '_label -> "Textarea", 'rows -> 3 ) @b4.checkbox( fooForm("foo"), '_text -> "Checkbox", 'checked -> true ) @b4.radio( fooForm("foo"), options = Seq("M"->"Male","F"->"Female"), '_label -> "Radio Group" ) @fruits = @{ Seq("A"->"Apples","P"->"Pears","B"->"Bananas") } ... @b4.select( fooForm("foo"), options = fruits, '_label -> "Select" ) @b4.select( fooForm("foo"), options = fruits, '_label -> "Multiple Select", 'multiple -> true ) }
Checkboxes, radio buttons and selects also support readonly attribute adding a hidden input.
readonly
@b4.vertical.form(routes.Application.handleRequest) { implicit vfc => @b4.text( fooForm("foo"), '_label -> "Disabled", 'disabled -> true, 'placeholder -> "Disabled text..." ) @b4.checkbox( fooForm("foo"), '_text -> "Readonly checkbox", 'readonly -> true, 'value -> true ) @b4.select( fooForm("foo"), options = fruits, '_label -> "Select", 'multiple -> true, 'readonly -> true, 'value -> "B,P" ) }
Note! warning state is no more supported by Bootstrap 4, so if you use it you would need to add your own styling.
@b4.vertical.form(routes.Application.handleRequest) { implicit vfc => @b4.text( fooForm("foo"), '_label -> "Success", '_success -> true, 'placeholder -> "Success text..." ) @b4.text( fooForm("foo"), '_label -> "Warning", '_warning -> "Be carefull with this...", 'placeholder -> "Warning text..." ) @b4.text( fooForm("foo"), '_label -> "Error", '_error -> "An error occurred!", '_help -> "Another help text", 'placeholder -> "Error text..." ) } // With feedback tooltips @b4.vertical.form(routes.Application.vertical, '_feedbackTooltip -> true) { implicit vfc => @b4.text( fooForm("foo"), '_label -> "Success", '_showIconValid -> true, 'placeholder -> "Success text..." ) @b4.text( fooForm("foo"), '_label -> "Warning", '_warning -> "Be carefull with this...", '_showIconWarning -> true, 'placeholder -> "Warning text..." ) @b4.text( fooForm("foo"), '_label -> "Error", '_error -> "An error occurred!", '_showIconOnError -> true, '_help -> "Another help text", 'placeholder -> "Error text..." ) }
@b4.vertical.form(routes.Application.handleRequest) { implicit vfc => @b4.checkbox( fooForm("foo_check_custom_1"), '_text -> "Checkbox", 'checked -> true, '_custom -> true ) @b4.radio( fooForm("foo_radio_custom_1"), options = Seq("M"->"Male","F"->"Female"), '_label -> "Radio Group", '_custom -> true ) @b4.select( fooForm("foo_select_custom_1"), options = fruits, '_label -> "Select", '_custom -> true ) @b4.file( fooForm("foo_file_custom_1"), '_label -> "File", 'placeholder -> "Select a file...", '_custom -> true ) } Or @b4.vertical.form(routes.Application.handleRequest, '_custom -> true) { implicit vfc => @b4.checkbox( fooForm("foo_check_custom_1"), '_text -> "Checkbox", 'checked -> true ) @b4.radio( fooForm("foo_radio_custom_1"), options = Seq("M"->"Male","F"->"Female"), '_label -> "Radio Group" ) @b4.select( fooForm("foo_select_custom_1"), options = fruits, '_label -> "Select" ) @b4.file( fooForm("foo_file_custom_1"), '_label -> "File", 'placeholder -> "Select a file..." ) }
@b4.vertical.form(routes.Application.handleRequest) { implicit vfc => @b4.inputWrapped( "email", fooForm("foo"), '_label -> "Simple input group", 'placeholder -> "Custom input group for email..." ) { input => <div class="input-group"> <span class="input-group-prepend"> <span class="input-group-text">@@</span> </div> @input </div> } @b4.inputWrapped( "text", fooForm("foo"), '_label -> "Fully customized", 'placeholder -> "A complicated one..." ) { input => <div class="input-group"> <span class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-star"></i></span> </div> @input <div class="input-group-append"> <!-- Button and dropdown menu --> </div> </div> } @b4.inputWrapped( "text", fooForm("foo"), '_label -> "Number", 'value -> 0, '_help -> "This needs some JavaScript and CSS" ) { input => <div class="input-number input-group"> <span class="input-group-prepend"> <span class="input-group-text input-number-minus"><i class="fa fa-minus"></i></span> </div> @input <span class="input-group-append"> <span class="input-group-text input-number-plus"><i class="fa fa-plus"></i></span> </div> </div> } }
This is a link
@b4.vertical.form(routes.Application.handleRequest) { implicit vfc => @b4.static("Static HTML"){ <a href="#"><i class="fa fa-star"></i> This is a link</a> } @b4.submit('class -> "btn btn-secondary"){ <i class="fa fa-ok"></i> Submit me! } @b4.free() { <button type="submit" class="btn btn-primary"> <i class="fa fa-ok"></i> Save changes</button> <a class="btn btn-secondary" href> <i class="fa fa-remove"></i> Cancel</a> } }