YouCanInput
Displays a form input field component.
Usage
vue
<script setup lang="ts">
import { ref } from 'vue';
import { Input } from '@youcan/ui-vue3';
const username = ref('');
</script>
<template>
<Input v-model="username" placeholder="Enter Username" />
</template>API Reference
Prefix
Note
The prefix slot for the <Input/> component only takes in <DropdownPrefix/> as a child
Suffix
Icon
Input Group
A component that displays a form input field with a title and description.
Usage
vue
<script setup lang="ts">
import { ref } from 'vue';
import { Input, InputGroup } from '@youcan/ui-vue3';
const username = ref('');
</script>
<template>
<div class="container">
<InputGroup>
<template #label>
New username
</template>
<template #input>
<Input v-model="username" placeholder="Enter username" />
</template>
<template #info>
Please note that you can only change your username once every 30 days
</template>
</InputGroup>
</div>
</template>API Reference
Search
Usage
vue
<script setup lang="ts">
import { SearchInput } from '@youcan/ui-vue3';
const handleSearch = () => {
// Fetch and return your data
};
</script>
<template>
<SearchInput placeholder="Search" :query-handler="handleSearch" :thumbnails="true" />
</template>Query Result
ts
// Represents a specific type of suffix for a query result, particularly for 'rating' type.
interface QueryResultRatingSuffix {
type: 'rating';
score: number;
ceil: number;
}
// Represents the possible suffixes that a query result can have.
// It can be an instance of QueryResultRatingSuffix or null.
type QueryResultSuffix = QueryResultRatingSuffix | null;
// Represents the structure of a query result.
interface QueryResult<T = any> {
value: T;
label: string;
thumbnail?: string;
description?: string;
suffix?: QueryResultSuffix;
}