Doggo Storybook 0.9.0

Frame

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

Read more Read less

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 circle>
  <img src="image.png" alt="An example image illustrating the usage." />
</.frame>
Ratio Open in playground
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway. 
<.frame ratio={nil}>
  <img
    src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
    alt="A dog wearing a colorful poncho walks down a fashion show runway."
  />
</.frame>
<.frame ratio="1-by-1">
  <img
    src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
    alt="A dog wearing a colorful poncho walks down a fashion show runway."
  />
</.frame>
<.frame ratio="3-by-2">
  <img
    src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
    alt="A dog wearing a colorful poncho walks down a fashion show runway."
  />
</.frame>
<.frame ratio="2-by-3">
  <img
    src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
    alt="A dog wearing a colorful poncho walks down a fashion show runway."
  />
</.frame>
<.frame ratio="4-by-3">
  <img
    src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
    alt="A dog wearing a colorful poncho walks down a fashion show runway."
  />
</.frame>
<.frame ratio="3-by-4">
  <img
    src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
    alt="A dog wearing a colorful poncho walks down a fashion show runway."
  />
</.frame>
<.frame ratio="5-by-4">
  <img
    src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
    alt="A dog wearing a colorful poncho walks down a fashion show runway."
  />
</.frame>
<.frame ratio="4-by-5">
  <img
    src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
    alt="A dog wearing a colorful poncho walks down a fashion show runway."
  />
</.frame>
<.frame ratio="16-by-9">
  <img
    src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
    alt="A dog wearing a colorful poncho walks down a fashion show runway."
  />
</.frame>
<.frame ratio="9-by-16">
  <img
    src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
    alt="A dog wearing a colorful poncho walks down a fashion show runway."
  />
</.frame>
Shape Open in playground
A dog wearing a colorful poncho walks down a fashion show runway.
A dog wearing a colorful poncho walks down a fashion show runway. 
<.frame shape={nil}>
  <img
    src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
    alt="A dog wearing a colorful poncho walks down a fashion show runway."
  />
</.frame>
<.frame shape="circle">
  <img
    src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
    alt="A dog wearing a colorful poncho walks down a fashion show runway."
  />
</.frame>