Aspect Ratio

Displays content within a desired ratio.

Usage

Import the component. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
 
const { AspectRatio } = VM.require("uiisnear.near/widget/aspectRatio");
 
if (Tailwind === undefined) return <></>;

<Tailwind>
  <div className="w-96">
    <AspectRatio ratio={16 / 9}>
      <img src="..." alt="Image" className="rounded-md object-cover" />
    </AspectRatio>
  </div>
</Tailwind>

API Reference

AspectRatio

Contains the content you want to constrain to a given ratio.

Prop	Type	Default
ratio	number	1

Alert Dialog Avatar