beenull/merakiui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Adding form layouts

Browse source
This commit is contained in:
Mosab Ibrahim 2020-05-06 17:19:29 +02:00
parent e9683a33e2
commit 799c105715
4 changed files with 105 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/Models/data.js
View file

@ -27,6 +27,8 @@ export default [
{
name: 'Forms',
components: [
{name: 'Casual Form'},
{name: 'Multi Column Form'},
{name: 'Login'},
{name: 'Subscribe'},
],

4
src/components/Master.vue
View file

@ -50,6 +50,8 @@
import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage";
import Product from "./UI/Cards/Product";
import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
import MultiColumnForm from "./UI/Forms/MultiColumnForm";
import CasualForm from "./UI/Forms/CasualForm";
import Login from "./UI/Forms/Login";
import Subscribe from "./UI/Forms/Subscribe";
import HeroWithPattern from "./UI/Heroes/HeroWithPattern";
@ -68,6 +70,8 @@
ArticleCardWithImage,
Product,
ProductEvaluation,
MultiColumnForm,
CasualForm,
Login,
Subscribe,
HeroWithPattern,

48
src/components/UI/Forms/CasualForm.vue Normal file
View file

@ -0,0 +1,48 @@
<template>
<div :id="name | toId">
<div class="bg-white p-6 rounded shadow">
<h2 class="text-lg text-gray-700 font-semibold">Account settings</h2>
<div class="mt-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<label class="block">
<span class="text-gray-700">Username</span>
<input type="text"
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
</label>
<label class="block">
<span class="text-gray-700">Email Address</span>
<input type="email"
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
</label>
<label class="block">
<span class="text-gray-700">Password</span>
<input type="password"
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
</label>
<label class="block">
<span class="text-gray-700">Password Confirmation</span>
<input type="password"
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
</label>
</div>
<div class="flex justify-end mt-4">
<button class="px-4 py-2 bg-gray-800 text-gray-200 rounded">Save</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Casual Form'
}
}
}
</script>
<style scoped>
</style>

51
src/components/UI/Forms/MultiColumnForm.vue Normal file
View file

@ -0,0 +1,51 @@
<template>
<div :id="name | toId">
<div class="bg-white p-6 rounded shadow">
<h2 class="text-lg text-gray-700 font-semibold">Account settings</h2>
<div class="flex flex-col sm:flex-row py-8">
<div class="sm:w-1/4">
<h2 class="text-xl text-gray-700">Profile</h2>
</div>
<div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
<label class="block">
<span class="text-gray-700">Username</span>
<input type="text"
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
</label>
<label class="block">
<span class="text-gray-700">Email Address</span>
<input type="email"
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
</label>
<label class="block">
<span class="text-gray-700">Password</span>
<input type="password"
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
</label>
<label class="block">
<span class="text-gray-700">Password Confirmation</span>
<input type="password"
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
</label>
</div>
</div>
<div class="flex justify-end mt-4">
<button class="px-4 py-2 bg-gray-800 text-gray-200 rounded">Save</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Multi Column Form'
}
}
}
</script>
<style scoped>
</style>