Skip to content

Commit 308c42e

Browse files
D-LiteD-Lite
authored
docs(input): add input documentation
* docs(input): add input documentation * chore: code review fix
1 parent 299bde7 commit 308c42e

File tree

11 files changed

+364
-0
lines changed

11 files changed

+364
-0
lines changed

‎components/content/examples/input/BasicInput.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<c-input placeholder="Basic usage" />
3+
</template>
4+
5+
<script setup>
6+
import { CInput } from '@chakra-ui/vue-next';
7+
</script>

‎components/content/examples/input/InputAddon.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<c-stack spacing="4" w="xl" align-items="center">
3+
<c-input-group>
4+
<c-input-left-addon>+234</c-input-left-addon>
5+
<c-input type="tel" rounded-left="0" placeholder="phone number" />
6+
</c-input-group>
7+
<!-- If you add the size prop to `InputGroup`, it'll pass it to all its children. -->
8+
9+
<c-input-group>
10+
<c-input-left-addon>https://</c-input-left-addon>
11+
<c-input rounded="0" placeholder="mysite" />
12+
<c-input-right-addon>.com</c-input-right-addon>
13+
</c-input-group>
14+
</c-stack>
15+
</template>
16+
17+
<script setup>
18+
import { CInput, CStack, CInputGroup, CInputLeftAddon, CInputRightAddon } from '@chakra-ui/vue-next';
19+
</script>

‎components/content/examples/input/InputAppearance.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<c-stack spacing="3" w="2xl" align-items="center">
3+
<c-input variant='outline' placeholder='Outline' />
4+
<c-input variant='filled' placeholder='Filled' />
5+
<c-input variant='flushed' placeholder='Flushed' />
6+
<c-input variant='unstyled' placeholder='Unstyled' />
7+
</c-stack>
8+
</template>
9+
10+
<script setup>
11+
import { CInput, CStack } from '@chakra-ui/vue-next';
12+
</script>

‎components/content/examples/input/InputDate.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<c-stack spacing="4" w="xl" align-items="center">
3+
<c-input type="datetime-local" placeholder="Select Date and Time" size="md" />
4+
</c-stack>
5+
</template>
6+
7+
<script setup>
8+
import { CInput, CStack } from '@chakra-ui/vue-next';
9+
</script>

‎components/content/examples/input/InputElements.vue

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<c-stack spacing="4" w="xl" align-items="center">
3+
<c-input-group>
4+
<c-input-left-element><c-icon name="phone" color="gray.300" /></c-input-left-element>
5+
<c-input type="phone" placeholder="Phone number" />
6+
</c-input-group>
7+
8+
<c-input-group>
9+
<c-input-left-element color="gray.300" fontSize="1.2em">¥</c-input-left-element>
10+
<c-input placeholder="Enter amount" />
11+
<c-input-right-element><c-icon name="check" color="green.500" /></c-input-right-element>
12+
</c-input-group>
13+
</c-stack>
14+
</template>
15+
16+
<script setup>
17+
import { CInput, CStack, CInputGroup, CInputLeftElement, CIcon, CInputRightElement } from '@chakra-ui/vue-next';
18+
</script>

‎components/content/examples/input/InputFocus.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<c-stack spacing="4" w="xl" align-items="center">
3+
<c-input focus-border-color="lime" placeholder="Here is a sample placeholder" />
4+
<c-input focus-border-color="pink.400" placeholder="Here is a sample placeholder" />
5+
<c-input is-invalid error-border-color="red.300" placeholder="Here is a sample placeholder" />
6+
<c-input is-invalid error-border-color="crimson" placeholder="Here is a sample placeholder" />
7+
</c-stack>
8+
</template>
9+
10+
<script setup>
11+
import { CInput, CStack } from '@chakra-ui/vue-next';
12+
</script>

‎components/content/examples/input/InputHtmlSize.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<c-input html-size="4" width="auto" />
3+
</template>
4+
5+
<script setup>
6+
import { CInput } from '@chakra-ui/vue-next';
7+
</script>

‎components/content/examples/input/InputPassword.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<c-input-group size="md">
3+
<c-input pr="4.5rem" :type="show ? 'text' : 'password'" placeholder="Enter password" v-model="password" />
4+
<c-input-right-element width="4.5rem">
5+
<c-button h="1.75rem" size="sm" @click="show = !show">
6+
{{ show ? 'Hide' : 'Show' }}
7+
</c-button>
8+
</c-input-right-element>
9+
</c-input-group>
10+
</template>
11+
12+
<script setup>
13+
import { CInput, CInputGroup, CInputRightElement } from '@chakra-ui/vue-next';
14+
const show = ref(false);
15+
const password = ref('kurama<3naruto');
16+
</script>

‎components/content/examples/input/InputPlaceholderStyle.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<c-stack spacing="4" w="xl" align-items="center">
3+
<c-input placeholder='default placeholder' />
4+
<c-input placeholder='custom placeholder' :_placeholder="{ opacity: 1, color: 'gray.500' }" />
5+
<c-input color='teal' placeholder='custom placeholder' :_placeholder="{ color: 'inherit' }" />
6+
<c-input color='tomato' placeholder='custom placeholder' :_placeholder="{ opacity: 0.4, color: 'inherit' }" />
7+
</c-stack>
8+
</template>
9+
10+
<script setup>
11+
import { CInput, CStack } from '@chakra-ui/vue-next';
12+
</script>

‎components/content/examples/input/SizeInput.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<c-stack spacing="3" w="2xl" align-items="center">
3+
<c-input placeholder="extra small size" size="xs" />
4+
<c-input placeholder="small size" size="sm" />
5+
<c-input placeholder="medium size" size="md" />
6+
<c-input placeholder="large size" size="lg" />
7+
</c-stack>
8+
</template>
9+
10+
<script setup>
11+
import { CInput, CStack } from '@chakra-ui/vue-next';
12+
</script>

0 commit comments

Comments
 (0)