Menampilkan label yang mudah diakses dan terhubung ke sebuah kontrol.
Installation
pnpm dlx kliping@latest add labelPasang dependensi berikut:
pnpm add reka-uiSalin dan tempel kode sumber di GitHub ke project Anda.
Sesuaikan path import dengan struktur project Anda.
Usage
vue
<script setup lang="ts">
import { Label } from '@/components/ui/label'
</script>
<template>
<Label for="email">Your email address</Label>
</template>1
2
3
4
5
6
7
2
3
4
5
6
7
Requirements
Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.
| Requirement | Value |
|---|---|
| Project | Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init |
| npm packages | @vueuse/core@^14.4.0, reka-ui@^2.10.3 |
| Files | components/ui/label/label.vuecomponents/ui/label/index.ts |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
for? | string | — | The id of the element the label is associated with. |
asChild? | boolean | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details. |
as? | AsTag | Component | — | The element or component this component should render as. Can be overwritten by asChild. |
| Slot | Props |
|---|---|
#default | — |
| Data attribute | Value |
|---|---|
[data-slot] | "label" |
Credits
Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.