DocsComposantsAspect ratio

Aspect ratio

Keeps its content at a given ratio.

1 fichier

<div class="w-full max-w-md">
  <pb-ui.aspect-ratio ratio="16 / 9" class="rounded-lg bg-muted">
    <div class="absolute inset-0 grid place-items-center bg-gradient-to-br from-primary/20 to-muted text-sm text-muted-foreground">16 / 9</div>
  </pb-ui.aspect-ratio>
</div>

Installation

pyblade-ui add aspect-ratio

Copiez ce fichier dans votre projet

components/ui/aspect_ratio.html

@props({'ratio': '16 / 9'})
<div data-slot="aspect-ratio" style="aspect-ratio: {{ ratio }}" {{ attributes.cn("relative w-full overflow-hidden") }}>{{ slot }}</div>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

La balise <pb-ui.aspect-ratio> est disponible dans tous vos templates.

<pb-ui.aspect-ratio ratio="16 / 9" class="rounded-lg bg-muted">
  <img src="/photo.jpg" alt="" class="size-full object-cover" />
</pb-ui.aspect-ratio>

Exemples

Carré

<div class="w-40">
  <pb-ui.aspect-ratio ratio="1" class="rounded-lg border bg-muted">
    <div class="absolute inset-0 grid place-items-center text-sm text-muted-foreground">1 / 1</div>
  </pb-ui.aspect-ratio>
</div>

Props

Prop	Défaut
ratio	'16 / 9'

Tout autre attribut (class, id, x-on:click, hx-post…) est transmis à l'élément racine ; vos classes Tailwind l'emportent sur celles du composant.

‹ Progress Scroll area ›