Browse Source

docs: Add note on form-grid classes

Michael Bromley 2 years ago
parent
commit
cdb801bfca
1 changed files with 13 additions and 0 deletions
  1. 13 0
      docs/docs/guides/extending-the-admin-ui/ui-library/index.md

+ 13 - 0
docs/docs/guides/extending-the-admin-ui/ui-library/index.md

@@ -223,6 +223,19 @@ export function DemoComponent() {
 </TabItem>
 </Tabs>
 
+The `form-grid` class is used to lay out the form fields into a 2-column grid on larger screens, and a single column on smaller screens.
+If you want to force a particular field to always take up the full width (i.e. to span 2 columns at all screen sizes), you can add the
+`form-grid-span` class to that form field.
+
+```html
+<div class="form-grid">
+    // highlight-next-line
+    <vdr-form-field label="Page title" class="form-grid-span">
+        <input type="text" />
+    </vdr-form-field>
+</div>
+```
+
 ## Cards
 
 Cards are used as a general-purpose container for page content, as a way to visually group related sets of components.