com.github.fluorumlabs.disconnect.vaadin.FormItem Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of disconnect-vaadin Show documentation
Show all versions of disconnect-vaadin Show documentation
Vaadin components bindings for Disconnect Zero
The newest version!
package com.github.fluorumlabs.disconnect.vaadin;
import com.github.fluorumlabs.disconnect.core.annotations.WebComponent;
import com.github.fluorumlabs.disconnect.vaadin.elements.FormItemElement;
import com.github.fluorumlabs.disconnect.zero.component.*;
/**
* <vaadin-form-item> is a Web Component providing labelled form item wrapper
* for using inside <vaadin-form-layout>.
*
* <vaadin-form-item> accepts any number of children as the input content,
* and also has a separate named label slot:
*
* <vaadin-form-item>
* <label slot="label">Label aside</label>
* <input>
* </vaadin-form-item>
*
* Any content can be used. For instance, you can have multiple input elements
* with surrounding text. The label can be an element of any type:
*
* <vaadin-form-item>
* <span slot="label">Date of Birth</span>
* <input placeholder="YYYY" size="4"> -
* <input placeholder="MM" size="2"> -
* <input placeholder="DD" size="2"><br>
* <em>Example: 1900-01-01</em>
* </vaadin-form-item>
*
* The label is optional and can be omitted:
*
* <vaadin-form-item>
* <input type="checkbox"> Subscribe to our Newsletter
* </vaadin-form-item>
*
* By default, the label slot content is displayed aside of the input content.
* When label-position="top" is set, the label slot content is displayed on top:
*
* <vaadin-form-item label-position="top">
* <label slot="label">Label on top</label>
* <input>
* </vaadin-form-item>
*
* Note: Normally, <vaadin-form-item> is used as a child of
* a <vaadin-form-layout> element. Setting label-position is unnecessary,
* because the label-position attribute is triggered automatically by the parent
* <vaadin-form-layout>, depending on its width and responsive behavior.
*
* Input Width
* By default, <vaadin-form-item> does not manipulate the width of the slotted
* input elements. Optionally you can stretch the child input element to fill
* the available width for the input content by adding the full-width class:
*
* <vaadin-form-item>
* <label slot="label">Label</label>
* <input class="full-width">
* </vaadin-form-item>
*
* Styling
* The label-position host attribute can be used to target the label on top state:
*
*
* <dom-module id="my-form-item-theme" theme-for="vaadin-form-item">
* <template>
* <style>
* :host {
* /* default state styles, label aside */
* }
*
* :host([label-position="top"]) {
* /* label on top state styles */
* }
* </style>
* </template>
* </dom-module>
*
* The following shadow DOM parts are available for styling:
*
*
*
* Part name Description label The label slot container
* Custom CSS Properties Reference
* The following custom CSS properties are available on the <vaadin-form-item>
* element:
*
*
*
* Custom CSS property Description Default --vaadin-form-item-label-widthWidth of the label column when the labels are
* aside 8em--vaadin-form-item-label-spacingSpacing between the label column and the input
* column when the labels are aside 1em--vaadin-form-item-row-spacingHeight of the spacing between the form item
* elements 1em
* See
* ThemableMixin – how to apply styles for shadow parts
*/
@WebComponent
public class FormItem extends AbstractComponent
implements HasSlots,
HasStyle, HasComponents> {
public FormItem() {
super(FormItemElement.TAGNAME());
}
public HasSlots.Container labelSlot() {
return slotted("label");
}
}