Composant de sélection animé utilisant TypeScript, Shadcn et Framer-motion

Le "Expand Select Animation" est un composant de sélection personnalisé construit à l'aide de TypeScript et Framer Motion, avec le composant de base fourni par ShadCN. Ce composant améliore l'élément de sélection standard avec une animation fluide et visuellement attrayante qui se développe vers le bas pour révéler les options et se réduit vers le haut pour les masquer.

Démo

Code source

expand-select.tsx

importer { Globe } depuis "lucide-react" ;
importer { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } depuis "@/components/ui/select" ;
importer { motion, AnimatePresence } depuis "framer-motion" ;

fonction d'exportation ExapandSelect() {
  retour (
    <Sélectionner>
      <SelectTrigger className="text-white w-[180px]flex gap-2 bg-[#1a1a1a] hover:bg-[#3e3d3d] ring-none border-none ">
        <Globe />
        <SelectValue placeholder="Anglais" />
      </SélectionnerDéclencheur>
      <AnimatePresence>
        <SelectContent className="bg-[#3e3d3d] texte-bordure blanche-aucun p-[1px]">
          <motion.div
            initial={{ opacité : 0, hauteur : 0, échelle : 0,95 }}
            animer={{
              opacité : 1,
              hauteur : "auto",
              échelle: 1,
              transition: {
                tapez : "ressort",
                rigidité : 300,
                amortissement : 30,
              },
            }}
            sortie={{
              opacité : 0,
              hauteur: 0,
              échelle : 0,95,
              transition: {
                durée : 0,2,
              },
            }}
           >




          

            
        <script>
  // Detect dark theme
  var iframe = document.getElementById('tweet-1878086086502887693-992');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1878086086502887693&theme=dark"
  }

</script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!