sonarqube.git - Continuous Inspection: https://github.com/SonarSource/sonarqube

diff options

Diffstat (limited to 'sonar-core')

-rw-r--r--

sonar-core/src/main/resources/org/sonar/l10n/core.properties

1 files changed, 1 insertions, 0 deletions

--- title: FormLayout order: 5 layout: page --- [[layout.formlayout]] = FormLayout ifdef::web[] [.sampler] image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/form-layout"] endif::web[] [classname]#FormLayout# lays the components and their captions out in two columns, with optional indicators for required fields and errors that can be shown for each field. The field captions can have an icon in addition to the text. [classname]#FormLayout# is an ordered layout and much like [classname]#VerticalLayout#. For description of margins, spacing, and other features in ordered layouts, see <<layout-orderedlayout#layout.orderedlayout, "VerticalLayout and HorizontalLayout">>. The following example shows typical use of [classname]#FormLayout# in a form: [source, java] ---- FormLayout form = new FormLayout(); TextField tf1 = new TextField("Name"); tf1.setIcon(VaadinIcons.USER); tf1.setRequiredIndicatorVisible(true); form.addComponent(tf1); TextField tf2 = new TextField("Street address"); tf2.setIcon(VaadinIcons.ROAD); form.addComponent(tf2); TextField tf3 = new TextField("Postal code"); tf3.setIcon(VaadinIcons.ENVELOPE); form.addComponent(tf3); // normally comes from validation by Binder tf3.setComponentError(new UserError("Doh!")); ---- The resulting layout will look as follows. The error message shows in a tooltip when you hover the mouse pointer over the error indicator. [[figure.layout.formlayout]] .A [classname]#FormLayout# Layout for Forms image::img/formlayout-example1.png[width=50%, scaledwidth=70%] [[layout.formlayout.css]] == CSS Style Rules [source, css] ---- .v-formlayout {} .v-formlayout .v-caption {} /* Columns in a field row. */ .v-formlayout-contentcell {} /* Field content. */ .v-formlayout-captioncell {} /* Field caption. */ .v-formlayout-errorcell {} /* Field error indicator. */ /* Overall style of field rows. */ .v-formlayout-row {} .v-formlayout-firstrow {} .v-formlayout-lastrow {} /* Required field indicator. */ .v-formlayout .v-required-field-indicator {} .v-formlayout-captioncell .v-caption .v-required-field-indicator {} /* Error indicator. */ .v-formlayout-cell .v-errorindicator {} .v-formlayout-error-indicator .v-errorindicator {} ---- The top-level element of [classname]#FormLayout# has the [literal]#++v-formlayout++# style. The layout is tabular with three columns: the caption column, the error indicator column, and the field column. These can be styled with [literal]#++v-formlayout-captioncell++#, [literal]#++v-formlayout-errorcell++#, and [literal]#++v-formlayout-contentcell++#, respectively. While the error indicator is shown as a dedicated column, the indicator for required fields is currently shown as a part of the caption column. For information on setting margins and spacing, see also <<layout-orderedlayout#layout.orderedlayout.spacing,"Spacing in Ordered Layouts">> and <<layout-settings#layout.settings.margins, "Layout Margins">>.


context:
space:
mode: