Frame

Renders a frame with an aspect ratio for images or videos.

Read more Read less

Maturity: Developing

Usage

Rendering an image with the aspect ratio 4:3.

<.frame ratio="4:3">
  <img src="image.png" alt="An example image illustrating the usage." />
</.frame>

Rendering an image as a circle.

<.frame shape="circle">
  <img src="image.png" alt="An example image illustrating the usage." />
</.frame>
A gray-muzzled dog in a camouflage coat and harness.
Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.

ratio :string

The aspect ratio, rendered as data-numerator and data-denominator.

Read more Read less
"1:1"
rest :global

Any additional HTML attributes.

shape :string
inner_block :slot
<img
  src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
  alt="A gray-muzzled dog in a camouflage coat and harness."
/>