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', name: 'Forms',
components: [ components: [
{name: 'Casual Form'},
{name: 'Multi Column Form'},
{name: 'Login'}, {name: 'Login'},
{name: 'Subscribe'}, {name: 'Subscribe'},
], ],

4
src/components/Master.vue
View file

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