jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add input component

Browse Source
This commit is contained in:
Alexandr
2022-08-03 14:55:16 +03:00
parent 96036c27e8
commit d3921ad9df
18 changed files with 590 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/components/input/examples/InputDisabledExample.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<Input :disabled="true" placeholder="enter your first name" label="First name" />
</template>
<script lang="ts" setup>
import { Input } from '../../../../src/index'
</script>

6
docs/components/input/examples/InputExample.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<Input placeholder="enter your first name" label="First name" />
</template>
<script lang="ts" setup>
import { Input } from '../../../../src/index'
</script>

12
docs/components/input/examples/InputHelperExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="vp-raw">
<Input placeholder="enter your first name" label="First name">
<template #helper>
We’ll never share your details. Read our <a href="#" class="font-medium text-blue-600 hover:underline dark:text-blue-500">Privacy Policy</a>.
</template>
</Input>
</div>
</template>
<script lang="ts" setup>
import { Input } from '../../../../src/index'
</script>

12
docs/components/input/examples/InputPrefixExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="vp-raw">
<Input placeholder="enter your search query" label="Search">
<template #prefix>
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</template>
</Input>
</div>
</template>
<script lang="ts" setup>
import { Input } from '../../../../src/index'
</script>

10
docs/components/input/examples/InputSizeExample.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<div class="vp-raw flex flex-col align-center gap-2 flex-wrap">
<Input size="sm" placeholder="enter your first name" label="Small" />
<Input size="md" placeholder="enter your last name" label="Medium" />
<Input size="lg" placeholder="enter your second name" label="Large" />
</div>
</template>
<script lang="ts" setup>
import { Input } from '../../../../src/index'
</script>

15
docs/components/input/examples/InputSuffixExample.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="vp-raw">
<Input size="lg" placeholder="enter your search query" label="Search">
<template #prefix>
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</template>
<template #suffix>
<Button>Search</Button>
</template>
</Input>
</div>
</template>
<script lang="ts" setup>
import { Input, Button } from '../../../../src/index'
</script>