前言

昨天我們了解到可以呈現程式碼的動畫元件，今天來探討如果需要多個語言或是方式來讓使用者使用的話，可以怎麼做。這時候就需要用到 Code Tabs，使用者可以根據需求，切換到對應的文章類別。

Code Tabs

1. 使用 Shadcn CLI 加入 Code Tabs

   npx shadcn@latest add @animate-ui/components-animate-code-tabs
   

2. Import 元件並將元件放在想要的位置上

   不同的程式碼段落可以依照 const CODES Key-Value 分類

   import { CodeTabs } from '@/components/animate-ui/components/animate/code-tabs';
   
   const CODES = {
     "Java": `Your Java Code Here`,
     "Python": `import A from ABCdE`,
     "C++": `include <iostream>`
   };
   
   <CodeTabs lang="json" codes={CODES} />
   

   

3. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

小結

今天的文章中，我們介紹了 Animate UI Code Tabs，讓教學過程能夠同時呈現多種程式碼範例，提升靈活性與可讀性。接下來在明天的內容中，我們將進一步探討 Code Block，帶你了解如何更專注地展示單一程式碼片段。

Reference

• Animate UI Docs