Day 11 - Animate UI Code Tabs

前言

#

昨天我們了解到可以呈現程式碼的動畫元件，今天來探討如果需要多個語言或是方式來讓使用者使用的話，可以怎麼做。這時候就需要用到 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. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

   參數	參數型態	說明
   codes	Record<string, string>	要展示的程式碼 Sets，可參考步驟二依照 const CODES Key-Value 分類
   lang?	string	預設程式語言，讓程式碼可以根據不同的語言 highlight。預設為 bash
   themes?	{ light: string; dark: string }	程式碼在淺色 / 深色模式下主題
   className?	string	自訂 CSS 類別名稱，方便套用額外樣式
   defaultValue?	string	預設顯示的分頁，可透過 const CODES Key 進行選擇
   onValueChange	(value: string) => void	當分頁切換時觸發的事件
   copyButton	boolean	是否顯示「複製」按鈕，預設為 true
   onCopiedChange	(copied: boolean) => void	當使用者複製程式碼時觸發的事件

小結

#

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

Reference

#

• Animate UI Docs