{"author":{"address":null,"user":"https://learnblockchain.cn/people/19478"},"content":{"body":"第一周第二課筆記 - Shadcn UI 簡介\r\n\r\nShadcn UI 的介紹:\r\n在frontend的建構中會用到不同的library，而在課程中，老師提到 shadcn UI，所以就想簡單整理一下相關資訊，也讓大家對它有多一點點認識。\r\n\r\nShadcn 的主要優點:\r\n1. 具可自主性: 它允許開發者可以自己控制不同元件來建構各種功能。\r\n2. 具可訪問性：所有組件在構建時都考慮到了可訪問性的情況，因為它來建構的應用程式都可供所有人使用。\r\n3. 用戶體驗：在官方網站有詳細的文檔和例子，易於使用及學習。\r\n4. 效能：是輕量級和具高效能的，能易於使用及對應用程式效能的影響可大大減少。\r\n\r\n## Shadcn UI 安裝前的環境設置:\r\n背景:\r\n目前是支持7個框架，分別是Next.js, Vite, Remix, Astro, Laravel, Gatsby, Manual。\r\n另外，由於Shadcn UI是用TypeScript，所以在項目中也建議使用TypeScript。當然要是用JavaScript也是可以，官方也提供JavaScript的版本。\r\n\r\n安裝步驟: (假設使用 Next.js)\r\n1. 安裝最新版本(舊一點也是可以)的 Node.js and npm (Node Package Manager) \r\n2. 創建項目 (Next.js的項目) + 安裝 : 如果已創建項目，可以省略這一步。\r\nnpx shadcn@latest init\r\n當執行上面的命令會出現創建項目的選項\r\n![螢幕擷取畫面 2025-01-30 000210.png](https://img.learnblockchain.cn/attachments/2025/01/ghSrMgMR679adf482b030.png)\r\n當選擇了Next.js後，會出現不同的選項，可按照自己需求去選擇。\r\n\r\n![螢幕擷取畫面 2025-01-30 104243.png](https://img.learnblockchain.cn/attachments/2025/01/foA79e62679ae775cd73d.png)\r\n\r\n3. 直接安裝\r\nnpx shadcn@latest \r\n\r\n## Shadcn UI 設置:\r\n1. components.json\r\n\r\n```\r\n{\r\n  \"$schema\": \"https://ui.shadcn.com/schema.json\",\r\n  \"style\": \"new-york\",\r\n  \"rsc\": true,\r\n  \"tsx\": true,\r\n  \"tailwind\": {\r\n    \"config\": \"tailwind.config.ts\",\r\n    \"css\": \"app/globals.css\",\r\n    \"baseColor\": \"neutral\",\r\n    \"cssVariables\": true,\r\n    \"prefix\": \"\"\r\n  },\r\n  \"aliases\": {\r\n    \"components\": \"@/components\",\r\n    \"utils\": \"@/lib/utils\",\r\n    \"ui\": \"@/components/ui\",\r\n    \"lib\": \"@/lib\",\r\n    \"hooks\": \"@/hooks\"\r\n  },\r\n  \"iconLibrary\": \"lucide\"\r\n}\r\n```\r\n跟Shadcn UI 的設置可以在這文檔修改，以上也是預設的內容，一般不用去修改。\r\n\r\n# Shadcn UI 使用:\r\n1. 假設想用Button component, 可以安裝想對應的工具\r\nnpx shadcn@latest add button\r\n\r\n![螢幕擷取畫面 2025-01-30 121828.png](https://img.learnblockchain.cn/attachments/2025/01/OK1OyVeS679afdb3acda0.png)\r\n\r\n2. 在需要使用Button的頁面，import相關路徑\r\n```\r\nimport { Button } from \"@/components/ui/button\"\r\n```\r\n3. 在頁面內，直接使用\r\n```\r\n\u003cButton\u003eDeploy\u003c/Button\u003e\r\n```\r\n\r\n# Shadcn UI 例子演示:\r\n\r\n![螢幕擷取畫面 2025-01-30 121605.png](https://img.learnblockchain.cn/attachments/2025/01/boyX0rii679afe7b99632.png)\r\n\r\n這是一個快速創建token合約的簡單介面，相關代碼如下:\r\n\r\n```\r\nimport * as React from \"react\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/components/ui/card\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@/components/ui/select\"\r\n\r\nexport function CardWithForm() {\r\n  return (\r\n    \u003cCard className=\"w-[350px]\"\u003e\r\n      \u003cCardHeader\u003e\r\n        \u003cCardTitle\u003eCreate Your Token\u003c/CardTitle\u003e\r\n        \u003cCardDescription\u003eDeploy your new token in one-click.\u003c/CardDescription\u003e\r\n      \u003c/CardHeader\u003e\r\n      \u003cCardContent\u003e\r\n        \u003cform\u003e\r\n          \u003cdiv className=\"grid w-full items-center gap-4\"\u003e\r\n            \u003cdiv className=\"flex flex-col space-y-1.5\"\u003e\r\n              \u003cLabel htmlFor=\"name\"\u003eToken Name\u003c/Label\u003e\r\n              \u003cInput id=\"name\" placeholder=\"Name of your token\" /\u003e\r\n            \u003c/div\u003e\r\n            \u003cdiv className=\"flex flex-col space-y-1.5\"\u003e\r\n              \u003cLabel htmlFor=\"name\"\u003eToken Symbol\u003c/Label\u003e\r\n              \u003cInput id=\"name\" placeholder=\"Name of your token symbol\" /\u003e\r\n            \u003c/div\u003e\r\n            \u003cdiv className=\"flex flex-col space-y-1.5\"\u003e\r\n              \u003cLabel htmlFor=\"supply\"\u003eSupply\u003c/Label\u003e\r\n              \u003cInput id=\"name\" placeholder=\"Number of supply\" /\u003e\r\n            \u003c/div\u003e\r\n            \u003cdiv className=\"flex flex-col space-y-1.5\"\u003e\r\n              \u003cLabel htmlFor=\"admin_function\"\u003eAdmin Function\u003c/Label\u003e\r\n              \u003cSelect\u003e\r\n                \u003cSelectTrigger id=\"admin_function\"\u003e\r\n                  \u003cSelectValue placeholder=\"Select\" /\u003e\r\n                \u003c/SelectTrigger\u003e\r\n                \u003cSelectContent position=\"popper\"\u003e\r\n                  \u003cSelectItem value=\"whitelist\"\u003eWhiteList\u003c/SelectItem\u003e\r\n                  \u003cSelectItem value=\"burn\"\u003eBurn Token\u003c/SelectItem\u003e\r\n                  \u003cSelectItem value=\"increase\"\u003eIncrease Token\u003c/SelectItem\u003e\r\n                  \u003cSelectItem value=\"send\"\u003eSend Token\u003c/SelectItem\u003e\r\n                \u003c/SelectContent\u003e\r\n              \u003c/Select\u003e\r\n            \u003c/div\u003e\r\n          \u003c/div\u003e\r\n        \u003c/form\u003e\r\n      \u003c/CardContent\u003e\r\n      \u003cCardFooter className=\"flex justify-between\"\u003e\r\n        \u003cButton variant=\"outline\"\u003eCancel\u003c/Button\u003e\r\n        \u003cButton\u003eDeploy\u003c/Button\u003e\r\n      \u003c/CardFooter\u003e\r\n    \u003c/Card\u003e\r\n  )\r\n}\r\n\r\n```","title":"水分子社區（HOH）前端共學營 - 筆記(2)"},"history":null,"timestamp":1738212661,"version":1}