add more examples

vaadin · Feb 17, 2025 · 3656f4e · 3656f4e
1 parent 39de5f5
commit 3656f4e
Showing 1 changed file with 43 additions and 1 deletion.
diff --git a/dev/form-layout-auto-responsive.html b/dev/form-layout-auto-responsive.html
@@ -26,6 +26,7 @@
     <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';
@@ -65,7 +66,6 @@ <h1>autoResponsive + br</h1>
               <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>
-              <br />
               <vaadin-password-field label="Confirm"></vaadin-password-field>
             </vaadin-form-layout>
 
@@ -264,6 +264,48 @@ <h1>autoResponsive inside HorizontalLayout inside Dialog + flex: 1</h1>
                 Open
               </vaadin-button>
             </div>
+
+            <div>
+              <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.shadowRoot.querySelector('#dialog-5').opened = true;
+                }}"
+              >
+                Open
+              </vaadin-button>
+            </div>
           `;
         }
       }