<dom-module id="form-layout-basic-demos">
<template>
<style>
:host {
display: block;
}
</style>
<h3>Basic Usage</h3>
<vaadin-demo-snippet id='form-layout-basic-demos-basic-usage'>
<template preserve-content>
<vaadin-form-layout>
<vaadin-form-item>
<label slot="label">First Name</label>
<input class="full-width" value="Jane">
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Last Name</label>
<input class="full-width" value="Doe">
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Email</label>
<input class="full-width" value="jane.doe@example.com">
</vaadin-form-item>
</vaadin-form-layout>
</template>
</vaadin-demo-snippet>
<p>
Any content can be used in the <code><vaadin-form-item></code> element. For instance,
you can add multiple input elements with surrounding text. The label can be any element:
</p>
<vaadin-demo-snippet id='form-layout-basic-demos-basic-usage'>
<template preserve-content>
<vaadin-form-layout>
<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>
</vaadin-form-layout>
</template>
</vaadin-demo-snippet>
<p>
<strong>Note:</strong> in order to make <code><textarea></code> vertically
aligned with the <code><vaadin-form-item></code> label, add
<code style="white-space: nowrap;">textarea { vertical-align: top; display: inline-flex; }</code> to your CSS.
</p>
<vaadin-demo-snippet id='form-layout-basic-demos-basic-usage'>
<template preserve-content>
<vaadin-form-layout>
<vaadin-form-item colspan="2">
<label slot="label">Conference Abstract</label>
<textarea rows="6" class="full-width" style="display: inline-flex; vertical-align: top;"></textarea>
</vaadin-form-item>
</vaadin-form-layout>
</template>
</vaadin-demo-snippet>
<p>The label is optional and can be omitted:</p>
<vaadin-demo-snippet id='form-layout-basic-demos-basic-usage'>
<template preserve-content>
<vaadin-form-layout>
<vaadin-form-item>
<input type="checkbox"> Subscribe to our Newsletter
</vaadin-form-item>
</vaadin-form-layout>
</template>
</vaadin-demo-snippet>
<h3>Single Column</h3>
<!--
Note for maintainers: use <nice-demo-snippet> for this example. The original
<vaadin-demo-snippet id='form-layout-basic-demos-single-column'> makes JSON attribute values unreadible.
-->
<nice-demo-snippet>
<script type="text/html" slot="source">
<vaadin-form-layout responsive-steps='[{"columns": 1}]'>
<vaadin-form-item>
<label slot="label">First Name</label>
<input class="full-width" value="Jane">
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Last Name</label>
<input class="full-width" value="Doe">
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Email</label>
<input class="full-width" value="jane.doe@example.com">
</vaadin-form-item>
</vaadin-form-layout>
</script>
</nice-demo-snippet>
<h3>Custom Responsive Steps</h3>
<p>
Use JSON in the <code><responsive-steps></code> HTML attribute to specify
custom responsive steps for the <code><vaadin-form-layout></code> element.
</p>
<p>
<strong>See also:</strong> <a href="../#property-responsiveSteps"><code>responsiveSteps</code></a>
property in the API Reference.
</p>
<!--
Note: use <nice-demo-snippet> for this example. The original
<vaadin-demo-snippet id='form-layout-basic-demos-single-column'> makes JSON attribute values unreadible.
-->
<nice-demo-snippet>
<script type="text/html" slot="source">
<vaadin-form-layout
responsive-steps='[
{"minWidth": 0, "columns": 2},
{"minWidth": "640px", "columns": 3}
]'>
<vaadin-form-item>
<label slot="label">First Name</label>
<input class="full-width" value="Jane">
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Last Name</label>
<input class="full-width" value="Doe">
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Email</label>
<input class="full-width" value="jane.doe@example.com">
</vaadin-form-item>
</vaadin-form-layout>
</script>
</nice-demo-snippet>
<p>
Alternatively, you can customize the responsive steps by using JavaScript
to set the <code>responsiveSteps</code> array property.
</p>
<p>
Responsive steps can optionally set <code>labelsPosition</code> string
option. The following values are supported:
</p>
<dl>
<dt>aside</dt>
<dd>Default value. Labels are positioned aside the input fields.</dd>
<dt>top</dt>
<dd>Labels are positioned above the input fields.</dd>
</dl>
<vaadin-demo-snippet id='form-layout-basic-demos-single-column'>
<template preserve-content>
<vaadin-form-layout class="custom-steps">
<vaadin-form-item>
<label slot="label">First Name</label>
<input class="full-width" value="Jane">
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Last Name</label>
<input class="full-width" value="Doe">
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Email</label>
<input class="full-width" value="jane.doe@example.com">
</vaadin-form-item>
</vaadin-form-layout>
<script>
window.addDemoReadyListener('#form-layout-basic-demos-single-column', function(document) {
var formLayout = document.querySelector('vaadin-form-layout.custom-steps');
formLayout.responsiveSteps = [
{minWidth: 0, columns: 1, labelsPosition: 'top'},
{minWidth: '30em', columns: 1}
];
});
</script>
</template>
</vaadin-demo-snippet>
<h3>Spanning Items on Multiple Columns</h3>
<vaadin-demo-snippet id='form-layout-basic-demos-spanning-items-on-multiple-columns'>
<template preserve-content>
<vaadin-form-layout>
<vaadin-form-item colspan="2">
<label slot="label">Address</label>
<input class="full-width">
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">First Name</label>
<input class="full-width" value="Jane">
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Last Name</label>
<input class="full-width" value="Doe">
</vaadin-form-item>
</vaadin-form-layout>
</template>
</vaadin-demo-snippet>
<h3>Explicit New Row</h3>
<vaadin-demo-snippet id='form-layout-basic-demos-explicit-new-row'>
<template preserve-content>
<vaadin-form-layout>
<vaadin-form-item>
<label slot="label">Email</label>
<input class="full-width" value="jane.doe@example.com">
</vaadin-form-item>
<br>
<vaadin-form-item>
<label slot="label">Confirm Email</label>
<input class="full-width" value="jane.doe@example.com">
</vaadin-form-item>
</vaadin-form-layout>
</template>
</vaadin-demo-snippet>
<h3>Custom CSS Properties</h3>
<p>The following custom CSS properties are supported in <code><vaadin-form-layout></code>:</p>
<table>
<tr>
<th>CSS Property</th>
<th>Description</th>
<th>Default</th>
</tr>
<tr>
<td><code style="white-space: nowrap;">--vaadin-form-layout-column-gap</code></td>
<td>Length of the gap between columns</td>
<td><code>2em</code></td>
</tr>
</table>
<p>Additionaly, <code><vaadin-form-item></code> supports:</p>
<table>
<tr>
<th>CSS Property</th>
<th>Description</th>
<th>Default</th>
</tr>
<tr>
<td><code style="white-space: nowrap;">--vaadin-form-item-label-width</code></td>
<td>Width of the label column when the labels are aside</td>
<td><code>8em</code></td>
</tr>
<tr>
<td><code style="white-space: nowrap;">--vaadin-form-item-label-gap</code></td>
<td>Length of the gap between the label and input columns when the labels are aside</td>
<td><code>1em</code></td>
</tr>
<tr>
<td><code style="white-space: nowrap;">--vaadin-form-item-row-gap</code></td>
<td>Height of the gap between the form item elements</td>
<td><code>1em</code></td>
</tr>
</table>
<vaadin-demo-snippet id='form-layout-basic-demos-custom-css-properties'>
<template preserve-content>
<dom-module id="my-form">
<template preserve-content>
<style>
vaadin-form-layout {
--vaadin-form-layout-column-gap: 4em;
}
vaadin-form-item {
--vaadin-form-item-label-width: 6em;
--vaadin-form-item-label-gap: 1em;
--vaadin-form-item-row-gap: 1.25em;
}
</style>
<vaadin-form-layout>
<vaadin-form-item>
<label slot="label">First Name</label>
<input class="full-width" value="Jane">
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Last Name</label>
<input class="full-width" value="Doe">
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Email</label>
<input class="full-width" value="jane.doe@example.com">
</vaadin-form-item>
</vaadin-form-layout>
</template>
</dom-module>
<script>
window.addDemoReadyListener('#form-layout-basic-demos-custom-css-properties', function(document) {
class MyFormElement extends Polymer.Element {
static get is() {
return 'my-form';
}
}
customElements.define(MyFormElement.is, MyFormElement);
});
</script>
<my-form></my-form>
</template>
</vaadin-demo-snippet>
<h3>Vaadin Text Fields as Form Items</h3>
<p>
<strong>Note:</strong> When not using <code><vaadin-form-item></code>, vertical
gaps between the form rows should be added manually. For example, use CSS to add
vertical margin for the <code><vaadin-text-field></code> child elements:
</p>
<vaadin-demo-snippet id='form-layout-basic-demos-vaadin-text-fields-as-form-items'>
<template preserve-content>
<style>
vaadin-form-layout.with-text-fields > vaadin-text-field {
margin-top: .5em;
margin-bottom: .5em;
}
</style>
<vaadin-form-layout class="with-text-fields">
<vaadin-text-field label="First Name" value="Jane"></vaadin-text-field>
<vaadin-text-field label="Last Name" value="Doe"></vaadin-text-field>
<vaadin-text-field label="Email" value="jane.doe@example.com"></vaadin-text-field>
<br>
<vaadin-text-field label="Confirm Email" value="jane.doe@example.com"></vaadin-text-field>
<vaadin-text-field colspan="2" label="Address"></vaadin-text-field>
</vaadin-form-layout>
</template>
</vaadin-demo-snippet>
<h3>Paper Inputs as Form Items</h3>
<p>
<code><paper-input></code> elements have built-in vertical spacing. Adding margins
with CSS is unnecessary.
</p>
<vaadin-demo-snippet id='form-layout-basic-demos-paper-inputs-as-form-items'>
<template preserve-content>
<vaadin-form-layout>
<paper-input label="First Name" value="Jane"></paper-input>
<paper-input label="Last Name" value="Doe"></paper-input>
<paper-input label="Email" value="jane.doe@example.com"></paper-input>
<br>
<paper-input label="Confirm Email" value="jane.doe@example.com"></paper-input>
<paper-input colspan="2" label="Address"></paper-input>
</vaadin-form-layout>
</template>
</vaadin-demo-snippet>
</div>
</template>
<script>
class FormLayoutBasicDemos extends DemoReadyEventEmitter(FormLayoutDemo(Polymer.Element)) {
static get is() {
return 'form-layout-basic-demos';
}
}
customElements.define(FormLayoutBasicDemos.is, FormLayoutBasicDemos);
</script>
</dom-module>