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

wip

Browse source
This commit is contained in:
khatabwedaa 2020-06-13 13:06:18 +02:00
parent 7bb69a333e
commit 0389429002
2 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/categories/Forms.vue
View file

@ -2,7 +2,7 @@
<div class="w-full max-w-5xl mx-auto my-10">
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Forms</h1>
<inputs></inputs>
<simple></simple>
<newsletter></newsletter>
<sign-in></sign-in>
<sign-in-with-image></sign-in-with-image>
@ -10,14 +10,14 @@
</template>
<script>
import Inputs from "../ui/Forms/Inputs";
import Simple from "../ui/Forms/Simple";
import Newsletter from "../ui/Forms/Newsletter";
import SignIn from "../ui/Forms/SignIn";
import SignInWithImage from "../ui/Forms/SignInWithImage";
export default {
components: {
Inputs,
Simple,
Newsletter,
SignIn,
SignInWithImage

18
src/components/ui/Forms/Inputs.vue → src/components/ui/Forms/Simple.vue
View file

@ -8,22 +8,22 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
<div>
<label class="text-gray-700" for="username">Username</label>
<input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
<input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div>
<div>
<label class="text-gray-700" for="emailAddress">Email Address</label>
<input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
<input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div>
<div>
<label class="text-gray-700" for="password">Password</label>
<input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
<input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div>
<div>
<label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
<input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
<input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div>
</div>
@ -40,7 +40,7 @@
export default {
data() {
return {
name: 'Inputs',
name: 'Simple',
code: `
<div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
<h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>
@ -49,22 +49,22 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
<div>
<label class="text-gray-700" for="username">Username</label>
<input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
<input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div>
<div>
<label class="text-gray-700" for="emailAddress">Email Address</label>
<input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
<input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div>
<div>
<label class="text-gray-700" for="password">Password</label>
<input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
<input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div>
<div>
<label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
<input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
<input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div>
</div>