Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Add subgroups documentation #28

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
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
Add subgroups documentation
  • Loading branch information
johnsusek committed Apr 18, 2020
commit 5409f2b90987b6ebebd0c5163edc86b5c09f8150
139 changes: 137 additions & 2 deletions groups.md
Original file line number Diff line number Diff line change
@@ -32,17 +32,152 @@ would produce (simplified) HTML output something like this:
```html
<fieldset>
<legend>User Details</legend>

<label>Name</label>
<input type="text" />

<label>Age</label>
<input type="number" />
</fieldset>
```

## Tags

### Default

You can change the default `fieldset` tag by passing the `tag` property to the `<vue-form-generator />` component in your markup.

```html
<vue-form-generator tag="div" :model="model" :schema="schema" :options="options"></vue-form-generator>
```

### 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
<fieldset>
<legend>User Details</legend>

<label>Name</label>
<input type="text">

<label>Age</label>
<input type="number">

<fieldset>
<legend>Location</legend>
<label>City</label>
<input type="text">

<label>State</label>
<input type="text">
</fieldset>
</fieldset>
```

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