2020-04-16 16:22:58 +03:00
|
|
|
|
<template>
|
|
|
|
|
<div class="specimens specimens--group">
|
2020-05-17 22:06:55 +03:00
|
|
|
|
<h2>Group classification</h2>
|
|
|
|
|
<div class="specimen">
|
|
|
|
|
<h3>Non-repeatable group</h3>
|
2020-05-09 00:25:52 +03:00
|
|
|
|
<FormulateInput
|
2020-05-17 22:06:55 +03:00
|
|
|
|
type="group"
|
|
|
|
|
>
|
|
|
|
|
<FormulateInput
|
|
|
|
|
label="City"
|
|
|
|
|
type="text"
|
|
|
|
|
name="city"
|
|
|
|
|
/>
|
|
|
|
|
<FormulateInput
|
|
|
|
|
label="State"
|
|
|
|
|
type="select"
|
|
|
|
|
:options="{NE: 'Nebraska', MO: 'Missouri', VA: 'Virginia'}"
|
|
|
|
|
placeholder="Select a state"
|
|
|
|
|
/>
|
|
|
|
|
</FormulateInput>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="specimen">
|
|
|
|
|
<h3>Repeatable group</h3>
|
2020-04-16 16:22:58 +03:00
|
|
|
|
<FormulateInput
|
2020-04-19 21:34:25 +03:00
|
|
|
|
name="users"
|
|
|
|
|
label="Invite some new users"
|
|
|
|
|
type="group"
|
|
|
|
|
placeholder="users"
|
|
|
|
|
help="Fields can be grouped"
|
2020-05-07 06:33:58 +03:00
|
|
|
|
:repeatable="true"
|
2020-04-19 21:34:25 +03:00
|
|
|
|
>
|
|
|
|
|
<FormulateInput
|
|
|
|
|
label="First and last name"
|
|
|
|
|
name="name"
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="User’s name"
|
2020-05-09 00:25:52 +03:00
|
|
|
|
validation="required"
|
2020-04-19 21:34:25 +03:00
|
|
|
|
/>
|
|
|
|
|
<FormulateInput
|
|
|
|
|
name="email"
|
|
|
|
|
label="Email address"
|
|
|
|
|
type="email"
|
|
|
|
|
placeholder="User’s email"
|
|
|
|
|
validation="required|email"
|
|
|
|
|
/>
|
|
|
|
|
</FormulateInput>
|
2020-04-16 16:22:58 +03:00
|
|
|
|
<FormulateInput
|
2020-04-19 21:34:25 +03:00
|
|
|
|
type="submit"
|
2020-04-16 16:22:58 +03:00
|
|
|
|
/>
|
2020-05-17 22:06:55 +03:00
|
|
|
|
</div>
|
2020-04-16 16:22:58 +03:00
|
|
|
|
</div>
|
|
|
|
|
</template>
|
2020-04-19 06:57:43 +03:00
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
}
|
|
|
|
|
</script>
|