EN
Tous les modèles

Comparer deux styles

Faites glisser le séparateur sur Vancouver pour comparer les styles base et outdoor, avec une seule caméra pour les deux cartes.

Deux cartes + séparateur · Vancouver
Exemple

Aucune donnée de démonstration : l'exemple fonctionne avec la carte seule. L'aperçu utilise la clé de démonstration d'unmap.

Ajoutez-le avec la CLI unmap

Installe le composant, ses éventuelles données de démonstration et les composants shadcn qu'il utilise. Projets React seulement ; dans un projet Vue, la commande s'arrête avant de modifier quoi que ce soit.

npx @unmap/cli add map-compare-01

Ajouter à votre application React

npx shadcn@latest add https://registry.unmap.dev/r/map-compare-01.json

Pour les applications React où shadcn et Base UI sont déjà configurés. La CLI ajoute les composants et paquets nécessaires.

Afficher le composant

import { MapCompare } from "@/components/unmap-map-compare"

<MapCompare apiKey="um_live_..." lang="fr" />

Ce qu'il comprend

  • Construit avec compare-swipe
  • Aucune donnée requise

Exemple

Un élément du registre, sur un vrai lieu canadien, prêt à copier dans une application React.

Lire le guide du composantÉlément du registre (JSON)