技術 Chakra UI：動畫就搭配Framer motion吧

在前端開發也不乏前端動畫的任務，因為在使用 Chakra UI 使用 style props 做開發。如果還是像過去一樣實做動畫是靠 css animation...

技術 Chakra UI: Utility Hooks

Chakra UI 有提供不少 React hooks 讓我們實作元件更方便 useMediaQuery 這個 hook 幫助我們去偵測 media query...

技術 Chakra UI 排版心得: Stack

Stack Stack 也是我很常用於排版的 UI component 。display 屬性是 Flex ，添加了方便排版的語法糖元件。適合用於群組元件們來安...

技術 Chakra UI 排版心得: Box、Flex、 Center

經過了15天嘗試以 Charkra UI 把設計系統實作出來。有些細節可以根據設計文件去做調整:像是 空間 Space、陰影 Shadow 也可以先規劃好系列的...

技術 Chakra UI 打造設計系統系列11: multipart components, Modal

multipart components 已經介紹完像是 Button 類型的 UI 元件該如何利用 theme 客製化來達成設計稿上的 UI可以持續用相同的方...

技術 Chakra UI 打造設計系統10: Button UI state

已經完成 Button 基本樣式 ，還要設定不同狀態的樣式 補充一下 Chakra UI 原本預設的 UI 元件大部分都有選中狀態(focus)的醒目提示，Bu...

技術 Chakra UI 打造設計系統09: Button

上一篇分析完元件樣式 API ，今天就依照方式來客製化 Button 成設計稿的樣子 Button 設計稿 對照下原本 Default Theme Button...

技術 Chakra UI 打造設計系統07: Semantic Tokens

Semantic Tokens 語意化的 Token 前些日子完成了部分的 Design System 中的顏色而這些顏色有做到部分程度的語意化，像是 blue...

技術 Chakra UI 打造設計系統06: Text Styles

上篇完成 font family 的設定，今天使用 textStyles 來完成設計稿上的 Typography 設計稿 Text Styles textSty...

技術 Chakra UI 打造設計系統05: Fonts

字體在系統化的介面設計中是重要的構成要素之一。取決於 字體家族 fontFamily、字級行高 fontSize LineHeight、字重 fontWeigh...

技術 Chakra UI 打造設計系統系列03: colors, colorScheme

事前準備 上篇已經建立好theme.js，本篇開始把基本的 design token 寫進來。 Figma 連結在此 首先把設計稿上顏色寫進 theme 裡。（...

技術 #28 No-code 之旅 — 客製化 Next.js 的錯誤頁面

嗨！因為最近系列文快要結束了，所以也準備把專案推上去 production 了。Next.js 有列幾個推 production 之前該注意的事項，其中一項就是...

技術 #26 No-code 之旅 — 實作 Dark Mode 和加入 Google Fonts ft. Chakra UI

連假結束了Ｑ 今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看！我們會用 Chakra UI 去實作 dark...

技術 #17 No-code 之旅 — 專案架構

今天先建立專案，還有開始慢慢地定架構，裝 dependencies ～ Setup 這專案想要用 Next.js + TypeScript 寫，所以用下面指令...

技術 #14 No-code 之旅 — 怎麼利用 Chakra UI 去做 React 元件客製化？

繼續昨天的主題，該怎麼用 Chakra UI 做開發呢？現成的元件該怎麼去做客製化？專案有定設計系統 (design system)，那怎麼跟 Chakra U...

技術 #13 No-code 之旅 — 簡單快速開發漂亮的 React 元件 ft. Chakra UI

今天來點不一樣的！來講一個我最近常用的 React UI component library，就是 Chakra UI～ 講到 React，很多人會想到 Mat...