iT邦幫忙

chakraui相關文章
共有 16 則文章
鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 22

技術 Chakra UI: Utility Hooks

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

鐵人賽 Modern Web DAY 19

技術 Chakra UI 排版心得: Stack

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 13

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

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