initial commit
This commit is contained in:
@@ -0,0 +1,142 @@
|
||||
<script setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref()
|
||||
const password = ref()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="firstName">First Name</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="firstName"
|
||||
v-model="firstName"
|
||||
placeholder="John"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 Email -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="email">Email</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="email"
|
||||
v-model="email"
|
||||
placeholder="johndoe@email.com"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 Mobile -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="mobile">Mobile</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="mobile"
|
||||
v-model="mobile"
|
||||
type="number"
|
||||
placeholder="+1 123 456 7890"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<!-- 👉 Password -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="password">Password</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="············"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Remember me -->
|
||||
<VCol
|
||||
offset-md="3"
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 submit and reset button -->
|
||||
<VCol
|
||||
offset-md="3"
|
||||
cols="12"
|
||||
md="9"
|
||||
class="d-flex gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
type="reset"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
@@ -0,0 +1,146 @@
|
||||
<script setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref()
|
||||
const password = ref()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="firstNameHorizontalIcons">First Name</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="firstNameHorizontalIcons"
|
||||
v-model="firstName"
|
||||
prepend-inner-icon="bx-user"
|
||||
placeholder="John"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Email -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="emailHorizontalIcons">Email</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="emailHorizontalIcons"
|
||||
v-model="email"
|
||||
prepend-inner-icon="bx-envelope"
|
||||
placeholder="johndoe@email.com"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Mobile -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="mobileHorizontalIcons">Mobile</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="mobileHorizontalIcons"
|
||||
v-model="mobile"
|
||||
type="number"
|
||||
prepend-inner-icon="bx-mobile"
|
||||
placeholder="+1 123 456 7890"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Password -->
|
||||
<VCol cols="12">
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<label for="passwordHorizontalIcons">Password</label>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VTextField
|
||||
id="passwordHorizontalIcons"
|
||||
v-model="password"
|
||||
prepend-inner-icon="bx-lock"
|
||||
type="password"
|
||||
placeholder="············"
|
||||
persistent-placeholder
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Checkbox -->
|
||||
<VCol
|
||||
offset-md="3"
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 submit and reset button -->
|
||||
<VCol
|
||||
offset-md="3"
|
||||
cols="12"
|
||||
md="9"
|
||||
class="d-flex gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="secondary"
|
||||
type="reset"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
@@ -0,0 +1,112 @@
|
||||
<script setup>
|
||||
const firstName = ref('')
|
||||
const lastName = ref('')
|
||||
const city = ref('')
|
||||
const country = ref('')
|
||||
const company = ref('')
|
||||
const email = ref('')
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Last Name -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="lastName"
|
||||
label="Last Name"
|
||||
placeholder="Doe"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Email -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="Email"
|
||||
placeholder="johndoe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 City -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="city"
|
||||
label="City"
|
||||
placeholder="New York"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Country -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="country"
|
||||
label="Country"
|
||||
placeholder="United States"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Company -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="company"
|
||||
label="Company"
|
||||
placeholder="Pixinvent"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Remember me -->
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
type="reset"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
@@ -0,0 +1,72 @@
|
||||
<script setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref()
|
||||
const password = ref()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="johndoe@example.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="mobile"
|
||||
label="Mobile"
|
||||
placeholder="+1 123 456 7890"
|
||||
type="number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="············"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex gap-4"
|
||||
>
|
||||
<VBtn type="submit">
|
||||
Submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
type="reset"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
@@ -0,0 +1,76 @@
|
||||
<script setup>
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const mobile = ref()
|
||||
const password = ref()
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm @submit.prevent>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="firstName"
|
||||
prepend-inner-icon="bx-user"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="email"
|
||||
prepend-inner-icon="bx-envelope"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="johndoe@example.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="mobile"
|
||||
prepend-inner-icon="bx-mobile"
|
||||
label="Mobile"
|
||||
placeholder="+1 123 456 7890"
|
||||
type="number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="password"
|
||||
prepend-inner-icon="bx-lock"
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="············"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
label="Remember me"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
class="me-2"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
type="reset"
|
||||
variant="tonal"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
Reference in New Issue
Block a user