Day-9 專案演練 - UI 建置(上) charkra UI & tailwind CSS

14th鐵人賽 react junior front-end

aoigj100

2022-09-23 17:08:39

1105 瀏覽

分享至

Day-9 專案演練 - UI 建置(上) charkra UI & tailwind CSS

終於要開始做 UI 了，專案的開發也終於有種要啟程的感覺呢！在第九天會開始，會先拿之前畫的很陽春的設計稿，安裝 tailwindCss 來切版，沒辦法，我沒有設計師的神手協助Q.Q，然後利用 chakra UI 來節省一點點力氣，總之盡早開始吧~

分析設計稿

先看 TodoPage。

雖然做得很慢，但我其實有用到 figma 中的 Auto Layout，這是個神奇的東西，使用的邏輯很接近切版，讓我可以在設計稿中直接寫 margin 跟 padding。

畫面的最上方是 header ，包含一個 Menu 導航欄，導航裡面有一個標題字 MyNote 點選會回首頁，按鈕分別對應兩個模組，Dashboard 導向儀錶板，可以看到櫃子跟冰箱的狀態，Todos 就是大家最熟悉的待辦清單。

在 header 的下面有一個新增待辦，我給它一整行的空間，雖然現在可能空空的，但以後新增功能就可以放在這個空位，我工作上的開發，如果設計稿沒有畫明確，我通常會這樣做。

新增待辦工具區的底下是一個跟表格有連結的分頁工具，顯示頁碼，當前頁數，總共多少頁等等資訊，裡面的資料根表格有連動，所以設計稿沒明確聲明時，通常會把它放的離表格比較近。

最後一個元件就是表格，每一行都是一個 todo，都有自己的標題、詳情，個別的操作按鈕，做改變狀態、修改與刪除。

安裝 tailwind

參考官方文件為 react CRA 專案安裝 tailwind。

安裝套件

npm 的部分可以依造自己的狀況改成 yarn 或者 pnpm :

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

我在 macbook 中使用的指令，用 pnpm，如果是用 mac 的朋友可以參考:

npx pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

初始化 tailwind.config.js

指令 npx tailwindcss init -p 之後會自動產生一個 tailwind.config.js 檔案，按造官方網站的範例將預設的內容取代掉:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加 tailwind 進入 index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

tip:如果覺得 index.css 中的黃色波浪線很煩，可以幫 vscode 安裝一個叫做 postCSS Language 的套件，波浪就會不見了。

加入測試用的內容進去 app.tsx 的 jsx 裡面看看

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

成功的話會看的到又大又粗的 h1 跟你說 Hello world!，不過我總覺得不夠明顯，會在 className 在多加個
bg-[#333] text-red-500 之類的，這樣就有又紅又大又粗，背景還很凸顯的 Hello world! 感覺這 h1 就老練許多。

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline bg-[#333] text-red-500">
      Hello world!
    </h1>
  )
}

附上一個 tailwind 的遊樂場，可以進去玩一下，記得使用原生的 HTML(把 className 改成 class 就是了)。

安裝 chakra UI

同上，依舊按造官方文件的指示，為 CRA 專案安裝 charkra UI :

安裝核心與依賴項

按造自己的狀況選擇套件管理工具，官網預設的示範式 npm 跟 yarn。

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

or

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

設置 Provider

打開 src 目錄的 index.tsx，添加 <ChakraProvider>:

import * as React from 'react'

// 1. 引入 ChakraProvider
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  // 2. 安裝 ChakraProvider
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}

在這個步驟之後，已經可以開始使用 chakra UI 裡面提供的元件、功能、樣式，後面的可選項，可以依造需求閱讀。