Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

chore: add form-layout-auto-responsive dev page #8694

Merged
merged 3 commits into from
Feb 19, 2025
Merged

chore: add form-layout-auto-responsive dev page #8694

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
90b47c5
chore: add form-layout-auto-responsive dev page
vursen Feb 19, 2025
bdddfd1
render examples into light dom
vursen Feb 19, 2025
0e2e196
simplify opening dialogs
vursen Feb 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
275 changes: 275 additions & 0 deletions dev/form-layout-auto-responsive.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,275 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>Form Layout</title>
<script type="module" src="./common.js"></script>

<style>
h1 {
margin-top: 2em;
margin-bottom: 0.5em;

&:first-child {
margin-top: 0;
}
}
</style>
</head>

<body>
<form-layout-examples></form-layout-examples>

<script type="module">
import '@vaadin/dialog';
import '@vaadin/button';
import '@vaadin/tabsheet';
import '@vaadin/form-layout';
import '@vaadin/form-layout/vaadin-form-item.js';
import '@vaadin/text-field';
import '@vaadin/password-field';
import '@vaadin/horizontal-layout';
import { render, html, LitElement } from 'lit';
import { dialogRenderer } from '@vaadin/dialog/lit.js';

class FormLayoutExamples extends LitElement {
createRenderRoot() {
return this;
}

render() {
return html`
<h1>autoResponsive</h1>
<vaadin-form-layout auto-responsive max-columns="2">
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
<vaadin-button>Register</vaadin-button>
</vaadin-form-layout>

<h1>autoResponsive + expandColumns</h1>
<vaadin-form-layout auto-responsive max-columns="2" expand-columns>
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
<vaadin-button>Register</vaadin-button>
</vaadin-form-layout>

<h1>autoResponsive + br</h1>
<vaadin-form-layout auto-responsive max-columns="2">
<vaadin-text-field label="First name"></vaadin-text-field>
<br />
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>

<h1>autoResponsive inside HorizontalLayout + flex:1</h1>
<vaadin-horizontal-layout theme="spacing">
<vaadin-form-layout style="flex: 1;" auto-responsive max-columns="2">
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
<vaadin-form-layout style="flex: 1;" auto-responsive max-columns="2" expand-columns>
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
</vaadin-horizontal-layout>

<h1>autoResponsive inside HorizontalLayout + labels aside</h1>
<vaadin-horizontal-layout theme="spacing">
<vaadin-form-layout style="flex: 1;" auto-responsive max-columns="2" labels-aside>
<vaadin-form-item>
<label slot="label"> First name </label>
<vaadin-text-field></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label"> Last name </label>
<vaadin-text-field></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item colspan="2">
<label slot="label"> Username </label>
<vaadin-text-field colspan="2"></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label"> Password </label>
<vaadin-password-field></vaadin-password-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label"> Confirm </label>
<vaadin-password-field></vaadin-password-field>
</vaadin-form-item>
</vaadin-form-layout>
<vaadin-form-layout style="flex: 1;" auto-responsive max-columns="2" labels-aside expand-columns>
<vaadin-form-item>
<label slot="label"> First name </label>
<vaadin-text-field class="full-width"></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label"> Last name </label>
<vaadin-text-field class="full-width"></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item colspan="2">
<label slot="label"> Username </label>
<vaadin-text-field class="full-width" colspan="2"></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label"> Password </label>
<vaadin-password-field class="full-width"></vaadin-password-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label"> Confirm </label>
<vaadin-password-field class="full-width"></vaadin-password-field>
</vaadin-form-item>
</vaadin-form-layout>
</vaadin-horizontal-layout>

<h1>autoResponsive inside Dialog</h1>
<vaadin-dialog
id="dialog-0"
${dialogRenderer(
(dialog) => html`
<vaadin-form-layout auto-responsive max-columns="2">
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
`,
)}
></vaadin-dialog>
<vaadin-button @click="${() => this.openDialog('#dialog-0')}">Open</vaadin-button>

<h1>autoResponsive inside Dialog + expandColumns</h1>
<vaadin-dialog
id="dialog-1"
${dialogRenderer(
(dialog) => html`
<vaadin-form-layout auto-responsive max-columns="2" expand-columns>
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
`,
)}
></vaadin-dialog>
<vaadin-button @click="${() => this.openDialog('#dialog-1')}">Open</vaadin-button>

<h1>autoResponsive inside Dialog 80%</h1>
<vaadin-dialog
id="dialog-2"
width="80%"
${dialogRenderer(
(dialog) => html`
<vaadin-form-layout auto-responsive max-columns="2">
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
`,
)}
></vaadin-dialog>
<vaadin-button @click="${() => this.openDialog('#dialog-2')}">Open</vaadin-button>

<h1>autoResponsive inside Dialog 80% + expandColumns</h1>
<vaadin-dialog
id="dialog-3"
width="80%"
${dialogRenderer(
(dialog) => html`
<vaadin-form-layout auto-responsive max-columns="2" expand-columns>
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
`,
)}
></vaadin-dialog>
<vaadin-button @click="${() => this.openDialog('#dialog-3')}">Open</vaadin-button>

<h1>autoResponsive inside HorizontalLayout inside Dialog + flex: 1</h1>
<vaadin-dialog
id="dialog-4"
${dialogRenderer(
(dialog) => html`
<vaadin-horizontal-layout theme="spacing">
<vaadin-form-layout auto-responsive max-columns="2" style="flex: 1;">
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
<vaadin-form-layout auto-responsive max-columns="2" style="flex: 1;" expand-columns>
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
</vaadin-horizontal-layout>
`,
)}
></vaadin-dialog>
<vaadin-button @click="${() => this.openDialog('#dialog-4')}">Open</vaadin-button>

<h1>autoResponsive inside Tabsheet inside Dialog</h1>
<vaadin-dialog
id="dialog-5"
${dialogRenderer(
(dialog) => html`
<vaadin-tabsheet>
<vaadin-tabs slot="tabs">
<vaadin-tab id="tab-0">Tab 0</vaadin-tab>
<vaadin-tab id="tab-1">Tab 1</vaadin-tab>
</vaadin-tabs>
<vaadin-form-layout tab="tab-0" auto-responsive max-columns="2">
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
<vaadin-form-layout tab="tab-1" auto-responsive max-columns="2" expand-columns>
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
</vaadin-tabsheet>
`,
)}
></vaadin-dialog>
<vaadin-button @click="${() => this.openDialog('#dialog-5')}">Open</vaadin-button>
`;
}

openDialog(id) {
this.querySelector(id).opened = true;
}
}
customElements.define('form-layout-examples', FormLayoutExamples);
</script>
</body>
</html>
Loading