Brickslab.Tools

@brickslab./ui-web

Composant d'image avec contrôle du redimensionnement (objectFit), du rayon de bordure et des dimensions. Adapté aux vignettes, bannières, avatars et galeries.

Aperçu

objectFit

objectFit="cover" Démonstration objectFit cover

objectFit="contain" Démonstration objectFit contain

objectFit="fill" Démonstration objectFit fill

borderRadius

borderRadius="var(--radius-md)" (défaut) Coins arrondis medium

borderRadius="var(--radius-xl)" Coins très arrondis

borderRadius="50%" Image circulaire

Props

Prop	Type	Défaut	Requis	Description
`src`	`string`	—	✓	URL de l'image à afficher.
`alt`	`string`	—	✓	Texte alternatif pour l'accessibilité (attribut alt).
`width`	`number \| string`	—	—	Largeur de l'image. Accepte une valeur en pixels (number) ou une valeur CSS (string).
`height`	`number \| string`	—	—	Hauteur de l'image. Accepte une valeur en pixels (number) ou une valeur CSS (string).
`objectFit`	`"cover" \| "contain" \| "fill" \| "none"`	`"cover"`	—	Mode de redimensionnement de l'image dans son conteneur.
`borderRadius`	`string`	`"var(--radius-md)"`	—	Rayon de bordure de l'image. Accepte toute valeur CSS valide.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  src="..."
  alt="..."
  width="..."
  height="..."
  objectFit="cover"
  borderRadius="var(--radius-md)"
/>

srcaltwidthheightobjectFitborderRadius

Utilisation

tsx

import { MediaImage } from "@brickslab./ui-web";

// Image simple
<MediaImage
  src="https://picsum.photos/400/300"
  alt="Image de démonstration"
  width={400}
  height={300}
/>

// objectFit: contain (pour logos ou images avec fond transparent)
<MediaImage
  src="https://picsum.photos/400/300?random=2"
  alt="Image en contain"
  width={400}
  height={200}
  objectFit="contain"
/>

// Coins arrondis personnalisés
<MediaImage
  src="https://picsum.photos/400/300?random=3"
  alt="Image avec coins ronds"
  width={400}
  height={300}
  borderRadius="var(--radius-xl)"
/>

// Image pleine largeur
<MediaImage
  src="https://picsum.photos/800/400?random=4"
  alt="Bannière"
  width="100%"
  height={200}
  objectFit="cover"
/>