宽高比

以期望的宽高比显示内容。

View code

核心特性

通过命令行安装此组件。

$ npm add reka-ui

引入组件。

vue

<script setup>
import { AspectRatio } from 'reka-ui'
</script>

<template>
  <AspectRatio />
</template>

包含需要按指定比例约束的内容。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`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.
`ratio`	`1`	`number` The desired ratio. Eg: 16/9

Slots (default)	Payload
`aspect`	`number` Current aspect ratio (in %)