今天來點不一樣的!來講一個我最近常用的 React UI component library,就是 Chakra UI~ 講到 React,很多人會想到 Mat...
嗨!因為最近系列文快要結束了,所以也準備把專案推上去 production 了。Next.js 有列幾個推 production 之前該注意的事項,其中一項就是...
繼續昨天的主題,該怎麼用 Chakra UI 做開發呢?現成的元件該怎麼去做客製化?專案有定設計系統 (design system),那怎麼跟 Chakra U...
連假結束了Q 今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看!我們會用 Chakra UI 去實作 dark...
字體在系統化的介面設計中是重要的構成要素之一。取決於 字體家族 fontFamily、字級行高 fontSize LineHeight、字重 fontWeigh...
在前端開發也不乏前端動畫的任務,因為在使用 Chakra UI 使用 style props 做開發。如果還是像過去一樣實做動畫是靠 css animation...
事前準備 上篇已經建立好theme.js,本篇開始把基本的 design token 寫進來。 Figma 連結在此 首先把設計稿上顏色寫進 theme 裡。(...
Stack Stack 也是我很常用於排版的 UI component 。display 屬性是 Flex ,添加了方便排版的語法糖元件。適合用於群組元件們來安...
Semantic Tokens 語意化的 Token 前些日子完成了部分的 Design System 中的顏色而這些顏色有做到部分程度的語意化,像是 blue...
今天先建立專案,還有開始慢慢地定架構,裝 dependencies ~ Setup 這專案想要用 Next.js + TypeScript 寫,所以用下面指令...
上篇完成 font family 的設定,今天使用 textStyles 來完成設計稿上的 Typography 設計稿 Text Styles textSty...
經過了15天嘗試以 Charkra UI 把設計系統實作出來。有些細節可以根據設計文件去做調整:像是 空間 Space、陰影 Shadow 也可以先規劃好系列的...
已經完成 Button 基本樣式 ,還要設定不同狀態的樣式 補充一下 Chakra UI 原本預設的 UI 元件大部分都有選中狀態(focus)的醒目提示,Bu...
上一篇分析完元件樣式 API ,今天就依照方式來客製化 Button 成設計稿的樣子 Button 設計稿 對照下原本 Default Theme Button...
multipart components 已經介紹完像是 Button 類型的 UI 元件該如何利用 theme 客製化來達成設計稿上的 UI可以持續用相同的方...
Chakra UI 有提供不少 React hooks 讓我們實作元件更方便 useMediaQuery 這個 hook 幫助我們去偵測 media query...