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 - + - +
``` +## 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 + + + + + + + +
+ Location + + + + + +
+
+``` + +### 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" + } + ] + } + ] + } + ] +} +```