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

13
docs/.vitepress/config.ts
View File

@@ -15,6 +15,13 @@ function buildSidebar() {
...getComponents(),
],
},
{
text: 'Form',
collapsible: true,
items: [
...getFormComponents(),
],
},
{
text: 'Utils',
collapsible: true,
@@ -55,6 +62,12 @@ function getComponents() {
]
}
function getFormComponents() {
return [
{ text: 'Input', link: 'components/input/input.md' },
]
}
function getUtils() {
return [
{ text: 'Flowbite Themable', link: '/components/flowbiteThemable/flowbiteThemable.md' },

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>

112
docs/components/input/input.md Normal file
View File

@@ -0,0 +1,112 @@
<script setup>
import InputExample from './examples/InputExample.vue';
import InputSizeExample from './examples/InputSizeExample.vue';
import InputDisabledExample from './examples/InputDisabledExample.vue';
import InputHelperExample from './examples/InputHelperExample.vue';
import InputPrefixExample from './examples/InputPrefixExample.vue';
import InputSuffixExample from './examples/InputSuffixExample.vue'
</script>
# Input
#### Get started with a collection of input fields built with Tailwind CSS to start accepting data from the user based on multiple sizes, variants, and input types
---
:::tip
Original reference: [https://flowbite.com/docs/forms/input-field/](https://flowbite.com/docs/forms/input-field/)
:::
The input field is an important part of the form element that can be used to create interactive controls to accept data from the user based on multiple input types, such as text, email, number, password, URL, phone number, and more.
On this page you will find all of the input types based on multiple variants, styles, colors, and sizes built with the utility classes from Tailwind CSS and components from Flowbite.
## Default
```vue
<script setup>
import { Input } from 'flowbite-vue'
</script>
<template>
<Input placeholder="enter your first name" label="First name" />
</template>
```
<InputExample />
## Size
```vue
<script setup>
import { Input } from 'flowbite-vue'
</script>
<template>
<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" />
</template>
```
<InputSizeExample />
## Disabled
```vue
<script setup>
import { Input } from 'flowbite-vue'
</script>
<template>
<Input :disabled="true" placeholder="enter your first name" label="First name" />
</template>
```
<InputDisabledExample />
## Slot - Helper
```vue
<script setup>
import { Input } from 'flowbite-vue'
</script>
<template>
<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>
</template>
```
<InputHelperExample />
## Slot - Prefix
```vue
<script setup>
import { Input } from 'flowbite-vue'
</script>
<template>
<Input placeholder="enter your first name" label="First name">
<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>
</template>
```
<InputPrefixExample />
## Slot - Suffix
```vue
<script setup>
import { Input } from 'flowbite-vue'
</script>
<template>
<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>
</template>
```
<InputSuffixExample />