typescript、shadcn、framer-motion を使用したアニメーション選択コンポーネント

「展開選択アニメーション」は、ShadCN によって提供される基本コンポーネントを使用して、TypeScript と Framer Motion を使用して構築されたカスタム選択コンポーネントです。このコンポーネントは、下に展開するとオプションが表示され、上に折りたたむとオプションが非表示になる、滑らかで視覚的に魅力的なアニメーションで標準の選択要素を強化します。

デモ

ソースコード

expand-select.tsx

「lucide-react」から { Globe } をインポートします。
import { Select、SelectContent、SelectGroup、SelectItem、SelectTrigger、SelectValue } from "@/components/ui/select";
import { motion, AnimatePresence } from "framer-motion";

エクスポート関数 ExapandSelect() {
  戻る （
    <選択>
      <SelectTrigger className="text-white w-[180px]flex gap-2 bg-[#1a1a1a] hover:bg-[#3e3d3d]ring-none border-none ">
        <グローブ/>
        <SelectValue プレースホルダー = "英語" />
      </SelectTrigger>
      <アニメーションプレゼンス>
        <SelectContent className="bg-[#3e3d3d] text-white border-none p-[1px]">
          




          

            
        <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>

以上がtypescript、shadcn、framer-motion を使用したアニメーション選択コンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。