Displays content within a desired ratio.
use leptos::*;
use radix_leptos_aspect_ratio::*;
#[component]
pub fn AspectRatioDemo() -> impl IntoView {
view! {
<div class="shadow-blackA4 w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px]">
<AspectRatio ratio=16.0 / 9.0>
<img
class="h-full w-full object-cover"
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
alt="Landscape photograph by Tobias Tullius"
/>
</AspectRatio>
</div>
}
}
use radix_yew_aspect_ratio::*;
use yew::prelude::*;
#[function_component]
pub fn AspectRatioDemo() -> Html {
html! {
<div class="shadow-blackA4 w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px]">
<AspectRatio ratio={16.0 / 9.0}>
<img
class="h-full w-full object-cover"
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
alt="Landscape photograph by Tobias Tullius"
/>
</AspectRatio>
</div>
}
}
- Accepts any custom ratio.
Install the component from your command line.
cargo add radix-leptos-aspect-ratio
cargo add radix-yew-aspect-ratio
Import the component.
use leptos::*;
use radix_leptos_aspect_ratio::*;
#[component]
fn Anatomy() -> impl IntoView {
view! {
<AspectRatio />
}
}
use radix_yew_aspect_ratio::*;
use yew::prelude::::*;
#[function_component]
fn Anatomy() -> Html {
html! {
<AspectRatio />
}
}
Contains the content you want to constrain to a given ratio.
| Prop | Type | Default |
|---|
as_child | MaybeProp<bool> | false |
ratio | MaybeProp<f64> | 1.0 |
| Prop | Type | Default |
|---|
as_child | Option<Callback<AspectRatioChildProps, Html>> | - |
ratio | f64 | 1.0 |