mirror of https://github.com/cloud-shuttle/leptos-shadcn-ui.git synced 2026-05-16 03:20:40 +00:00

Files

Ubuntu 18c4ddcd05 drover: task-1767764907653950146

Task: Improve API documentation

2026-01-10 05:38:15 +00:00

1.7 KiB

Raw Blame History

Aspect Ratio Component API

A container that maintains a consistent aspect ratio for its content.

Installation

# Cargo.toml
[dependencies]
shadcn-ui-leptos-aspect-ratio = "0.7"

use shadcn_ui_leptos_aspect_ratio::AspectRatio;

Component API

AspectRatio

Prop	Type	Default	Description
`ratio`	`f64`	Required	Aspect ratio (width/height)
`class`	`MaybeProp<String>`	`None`	Additional CSS classes

Usage Examples

Basic Aspect Ratio

use leptos::prelude::*;
use shadcn_ui_leptos_aspect_ratio::AspectRatio;

#[component]
pub fn MyComponent() -> impl IntoView {
    view! {
        <AspectRatio ratio=16.0 / 9.0>
            <img src="/image.jpg" alt="16:9 image" />
        </AspectRatio>
    }
}

Square Container

view! {
    <AspectRatio ratio=1.0>
        <div class="bg-muted">"Square content"</div>
    </AspectRatio>
}

CSS Classes

.aspect-ratio {
    relative w-full
}

.aspect-ratio::before {
    content: ""
    display: block
    padding-bottom: calc(var(--ratio) * 100%)
}

Common Ratios

Ratio	Value	Usage
Square	1:1	`1.0`
Standard	4:3	`1.33`
Widescreen	16:9	`1.78`
Cinematic	21:9	`2.33`

TypeScript API

interface AspectRatioProps {
  ratio: number;
  className?: string;
  children?: React.ReactNode;
}

export const AspectRatio: React.FC<AspectRatioProps>;

Source: packages/leptos/aspect-ratio/src/default.rs

1.7 KiB Raw Blame History