From 5409f2b90987b6ebebd0c5163edc86b5c09f8150 Mon Sep 17 00:00:00 2001 From: John Susek Date: Sat, 18 Apr 2020 14:24:23 -0500 Subject: [PATCH] Add subgroups documentation --- groups.md | 139 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 137 insertions(+), 2 deletions(-) diff --git a/groups.md b/groups.md index f12212d..acd7264 100644 --- a/groups.md +++ b/groups.md @@ -32,17 +32,152 @@ would produce (simplified) HTML output something like this: ```html

User Details - + Name - + Age

``` +## Tags + +### Default + You can change the default `fieldset` tag by passing the `tag` property to the `` component in your markup. ```html ``` + +### Per group + +You can also change the `fieldset` tag per group by adding a tag to the group definition: + +```js +{ + groups: [ + { + tag: "section", + ... + } + ] +} +``` + +## Subgroups + +You can create a subgroup by adding a `groups` definition inside of a top-level `groups` definition. This is useful for grouping sections of large forms. + +```js +{ + groups: [ + { + legend: "User Details", + fields: [ + { + type: "input", + inputType: "text", + label: "Name", + model: "name" + }, + { + type: "input", + inputType: "number", + id: "current_age", + label: "Age", + model: "age" + } + ], + groups: [ + { + legend: "Location", + fields: [ + { + type: "input", + inputType: "text", + label: "City" + }, + { + type: "input", + inputType: "text", + label: "State" + } + ] + } + ] + } + ] +} +``` + +would produce (simplified) HTML output something like this: + +```html +

+ User Details + + Name + + + Age + + +

+ Location + City + + + State + +

+``` + +### Bootstrap Vue Example + +Using custom tags, subgroups, and the `legendAttr` option, forms can be grouped using custom Vue components. The `legendAttr` option will render the legend text into the attribute you specify. The below example uses bootstrap-vue to render subgroups in tabs: + +```js +{ + groups: [ + { + tag: "b-tabs", + legend: "Additional Info", + groups: [ + { + tag: "b-tab", + legend: "Location", + legendAttr: "title", + fields: [ + { + type: "input", + inputType: "text", + label: "City" + }, + { + type: "input", + inputType: "text", + label: "State" + } + ] + }, + { + tag: "b-tab", + legend: "Demographics", + legendAttr: "title", + fields: [ + { + type: "input", + inputType: "number", + label: "Age", + model: "age" + } + ] + } + ] + } + ] +} +``` pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: