<script>
import { FormWizard, TabContent } from "vue-form-wizard";
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
import appConfig from "@/app.config";
/**
* Form wizard component
*/
export default {
page: {
title: "Form Wizard",
meta: [{ name: "description", content: appConfig.description }]
},
components: { Layout, PageHeader, FormWizard, TabContent },
data() {
return {
title: "Form Wizard",
items: [
{
text: "Forms",
href: "/"
},
{
text: "Form Wizard",
active: true
}
]
};
}
};
</script>
<template>
<Layout>
<PageHeader :title="title" :items="items" />
<div class="row">
<div class="col-xl-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Basic Wizard</h4>
<form-wizard color="#556ee6">
<tab-content icon="mdi mdi-account-circle">
<div class="row">
<div class="col-12">
<div class="form-group row mb-3">
<label class="col-md-3 col-form-label" for="userName">User name</label>
<div class="col-md-9">
<input
id="userName"
type="text"
class="form-control"
name="userName"
value="Themesdesign"
/>
</div>
</div>
<div class="form-group row mb-3">
<label class="col-md-3 col-form-label" for="password">Password</label>
<div class="col-md-9">
<input
id="password"
type="password"
name="password"
class="form-control"
value="123456789"
/>
</div>
</div>
<div class="form-group row mb-3">
<label class="col-md-3 col-form-label" for="confirmpass">Re Password</label>
<div class="col-md-9">
<input
id="confirmpass"
type="password"
name="confirmpass"
class="form-control"
value="123456789"
/>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</tab-content>
<tab-content icon="mdi mdi-face-profile">
<div class="row">
<div class="col-12">
<div class="form-group row mb-3">
<label class="col-md-3 col-form-label" for="name">First name</label>
<div class="col-md-9">
<input type="text" name="name" class="form-control" value="Francis" />
</div>
</div>
<div class="form-group row mb-3">
<label class="col-md-3 col-form-label" for="surname">Last name</label>
<div class="col-md-9">
<input type="text" name="surname" class="form-control" value="Brinkman" />
</div>
</div>
<div class="form-group row mb-3">
<label class="col-md-3 col-form-label" for="email">Email</label>
<div class="col-md-9">
<input
type="email"
name="email"
class="form-control"
value="cory1979@hotmail.com"
/>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</tab-content>
<tab-content icon="mdi mdi-checkbox-marked-circle-outline">
<div class="row">
<div class="col-12">
<div class="text-center">
<h2 class="mt-0">
<i class="mdi mdi-check-all"></i>
</h2>
<h3 class="mt-0">Thank you !</h3>
<p class="w-75 mb-2 mx-auto">
Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam
mattis dictum aliquet.
</p>
<div class="mb-3">
<div class="custom-control custom-checkbox">
<input id="customCheck1" type="checkbox" class="custom-control-input" />
<label
class="custom-control-label"
for="customCheck1"
>I agree with the Terms and Conditions</label>
</div>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</tab-content>
</form-wizard>
</div>
<!-- end card-body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-xl-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Tab Wizard</h4>
<form-wizard shape="tab" color="#556ee6">
<tab-content icon="mdi mdi-account-circle">
<div class="row">
<div class="col-12">
<div class="form-group row mb-3">
<label class="col-md-3 col-form-label" for="name">User name</label>
<div class="col-md-9">
<input id="name" type="text" class="form-control" value="Themesdesign" />
</div>
</div>
<div class="form-group row mb-3">
<label class="col-md-3 col-form-label" for="pwd">Password</label>
<div class="col-md-9">
<input
id="pwd"
type="password"
name="pwd"
class="form-control"
value="123456789"
/>
</div>
</div>
<div class="form-group row mb-3">
<label class="col-md-3 col-form-label" for="confirmpwd">Re Password</label>
<div class="col-md-9">
<input
id="confirmpwd"
type="password"
class="form-control"
value="123456789"
/>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</tab-content>
<tab-content icon="mdi mdi-face-profile">
<div class="row">
<div class="col-12">
<div class="form-group row mb-3">
<label class="col-md-3 col-form-label" for="name">First name</label>
<div class="col-md-9">
<input type="text" name="name" class="form-control" value="Francis" />
</div>
</div>
<div class="form-group row mb-3">
<label class="col-md-3 col-form-label" for="surname">Last name</label>
<div class="col-md-9">
<input type="text" name="surname" class="form-control" value="Brinkman" />
</div>
</div>
<div class="form-group row mb-3">
<label class="col-md-3 col-form-label" for="email">Email</label>
<div class="col-md-9">
<input
type="email"
name="email"
class="form-control"
value="cory1979@hotmail.com"
/>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</tab-content>
<tab-content icon="mdi mdi-checkbox-marked-circle-outline">
<div class="row">
<div class="col-12">
<div class="text-center">
<h2 class="mt-0">
<i class="mdi mdi-check-all"></i>
</h2>
<h3 class="mt-0">Thank you !</h3>
<p class="w-75 mb-2 mx-auto">
Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam
mattis dictum aliquet.
</p>
<div class="mb-3">
<div class="custom-control custom-checkbox">
<input id="customCheck1" type="checkbox" class="custom-control-input" />
<label
class="custom-control-label"
for="customCheck1"
>I agree with the Terms and Conditions</label>
</div>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</tab-content>
</form-wizard>
</div>
<!-- end card-body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>
<!-- end row -->
</Layout>
</template>
