Installation

pnpm dlx kliping@latest add aspect-ratio

Usage

<script lang="ts">
import { AspectRatio } from '@/components/ui/aspect-ratio'
</script>

<template>
  <AspectRatio :ratio="16 / 9">
    <img src="..." alt="Image" class="rounded-md object-cover">
  </AspectRatio>
</template>

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	reka-ui@^2.10.3
Files	components/ui/aspect-ratio/aspect-ratio.vue components/ui/aspect-ratio/index.ts

API Reference

Prop	Type	Default	Description
ratio?	number	—	The desired ratio. Eg: 16/9
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	{ aspect: number; }

Data attribute	Value
[data-slot]	"aspect-ratio"

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.