Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add Input with icon example (#346)

Browse Source
This commit is contained in:
Roman Hrynevych 2024-02-15 15:08:29 +02:00 committed by GitHub
parent 406e4ff8a8
commit 9c015067e3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 44 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/www/__registry__/index.ts
View File

@ -443,6 +443,13 @@ export const Index = {
component: () => import('../src/lib/registry/default/example/InputWithButton.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/InputWithButton.vue'],
},
InputWithIcon: {
name: 'InputWithIcon',
type: 'components:example',
registryDependencies: ['input'],
component: () => import('../src/lib/registry/default/example/InputWithIcon.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/InputWithIcon.vue'],
},
InputWithLabel: {
name: 'InputWithLabel',
type: 'components:example',
@ -1362,6 +1369,13 @@ export const Index = {
component: () => import('../src/lib/registry/new-york/example/InputWithButton.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/InputWithButton.vue'],
},
InputWithIcon: {
name: 'InputWithIcon',
type: 'components:example',
registryDependencies: ['input'],
component: () => import('../src/lib/registry/new-york/example/InputWithIcon.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/InputWithIcon.vue'],
},
InputWithLabel: {
name: 'InputWithLabel',
type: 'components:example',

4
apps/www/src/content/docs/components/input.md
View File

@ -63,6 +63,10 @@ import { Input } from '@/components/ui/input'
<ComponentPreview name="InputWithButton" class="max-w-xs" />
### With Icon
<ComponentPreview name="InputWithIcon" class="max-w-xs" />
### Form
<ComponentPreview name="InputForm" />

13
apps/www/src/lib/registry/default/example/InputWithIcon.vue Normal file
View File

@ -0,0 +1,13 @@
<script setup lang="ts">
import { MagnifyingGlassIcon } from '@radix-icons/vue'
import { Input } from '@/lib/registry/default/ui/input'
</script>
<template>
<div class="relative w-full max-w-sm items-center">
<Input id="search" type="text" placeholder="Search..." class="pl-10" />
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
<MagnifyingGlassIcon class="size-6 text-muted-foreground" />
</span>
</div>
</template>

13
apps/www/src/lib/registry/new-york/example/InputWithIcon.vue Normal file
View File

@ -0,0 +1,13 @@
<script setup lang="ts">
import { MagnifyingGlassIcon } from '@radix-icons/vue'
import { Input } from '@/lib/registry/new-york/ui/input'
</script>
<template>
<div class="relative w-full max-w-sm items-center">
<Input id="search" type="text" placeholder="Search..." class="pl-10" />
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
<MagnifyingGlassIcon class="size-6 text-muted-foreground" />
</span>
</div>
</template>