iT邦幫忙

storybook相關文章
共有 51 則文章
0 Like 0 留言 1234 瀏覽
鐵人賽 自我挑戰組
用ChatGPT詠唱來完成工作與點亮前後端技能樹 系列 第 35 篇

技術 【Day35】ChatGPT請教教我：UI文件與測試！Storybook！

目前這個系列已挑選ChatGPT、前端&React相關章節出版成書！感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React ＆ 前端技能樹...

一宵三筵 ‧ 2023-10-19
0 Like 0 留言 455 瀏覽
鐵人賽 Modern Web DAY 4
組裝前端開發工具箱，從 NX 入手 系列 第 4 篇

技術 添加 Storybook

現在是把元件從專案中獨立出來了，但還只能從專案上去看到元件所呈現的結果，為了之後開發元件方便，來給元件庫加上 storybook 吧。 可以直接將剛剛建好的...

Jasper ‧ 2023-09-05 ‧團隊我在鐵人賽烙賽、也在外木山裸泳◑ω◐
2 Like 0 留言 3887 瀏覽
鐵人賽 Modern Web
尋覓網站開發的神兵利器 系列 第 40 篇

技術 Extra09 - Storybook - 元件開發框架

隨著 Component Driven 興起，元件化變為不可逆的趨勢，在元件化後的可替換性與重複利用性上有了很大的幫助，但如果直接在系統上開發，則會被其他的元件...

Peter Chen ‧ 2021-10-25 ‧團隊Game Masters
1 Like 1 留言 1614 瀏覽
鐵人賽 Modern Web DAY 15
前端工程師在工作中的各種實戰技能 (Vue 3) 系列 第 15 篇

技術 [Day15] Storybook - Publish Storybook (Static web application & Chromatic)

我們透過前幾天介紹的所有內容 Storybook - 基本介紹 & 安裝 Storybook - What's a story and how...

Mia Yang ‧ 2021-09-30 ‧團隊Outcome First 2.0
1 Like 2 留言 1538 瀏覽
鐵人賽 Modern Web DAY 14
前端工程師在工作中的各種實戰技能 (Vue 3) 系列 第 14 篇

技術 [Day14] Storybook - Colors & Typography

Storybook 除了可以為元件攥寫 Story 以外，也可以攥寫純內容的說明文件，不過純內容的說明文件只能使用上一篇所介紹的 MDX 格式，所以如果還太不熟...

Mia Yang ‧ 2021-09-29 ‧團隊Outcome First 2.0
1 Like 1 留言 1866 瀏覽
鐵人賽 Modern Web DAY 13
前端工程師在工作中的各種實戰技能 (Vue 3) 系列 第 13 篇

技術 [Day13] Storybook - MDX

MDX 是 Storybook 提供的另一種攥寫文件的格式，MDX 結合了 Markdown 和 JSX 的標准文件格式，使我們可以用一些 Markdown 語...

Mia Yang ‧ 2021-09-28 ‧團隊Outcome First 2.0
1 Like 2 留言 1970 瀏覽
鐵人賽 Modern Web DAY 12
前端工程師在工作中的各種實戰技能 (Vue 3) 系列 第 12 篇

技術 [Day12] Storybook - Writing Docs

DocsPage DocsPage 是由 Storybook Docs 所提供的頁面，無需任何的設定自動就會從 Stories 和元件中的 props, emi...

Mia Yang ‧ 2021-09-27 ‧團隊Outcome First 2.0
1 Like 0 留言 1921 瀏覽
鐵人賽 Modern Web DAY 11
前端工程師在工作中的各種實戰技能 (Vue 3) 系列 第 11 篇

技術 [Day11] Storybook - Controls

Storybook 有一個很強大的輔具工具 Controls ，它提供一個 GUI 介面讓我們可以即時的調整元件的參數，必且會立即在 Canvas 中改變元件的...

Mia Yang ‧ 2021-09-26 ‧團隊Outcome First 2.0
0 Like 1 留言 2068 瀏覽
鐵人賽 Modern Web DAY 9
前端工程師在工作中的各種實戰技能 (Vue 3) 系列 第 9 篇

技術 [Day09] Storybook - What's a story and how to write

Story 是元件呈現狀態的描述，開發者可以為每個元件攥寫多個 Story，也就是說元件可能會因為不同的參數組合而有不同的樣貌，而我們可以透過定義 Story...

Mia Yang ‧ 2021-09-24 ‧團隊Outcome First 2.0
1 Like 2 留言 3886 瀏覽
鐵人賽 Modern Web DAY 8
前端工程師在工作中的各種實戰技能 (Vue 3) 系列 第 8 篇

技術 [Day08] Storybook - 基本介紹 & 安裝

Credit: https://www.behance.net/gallery/35988339/Style-guide-e-commerce-web-app...

Mia Yang ‧ 2021-09-23 ‧團隊Outcome First 2.0
1 Like 1 留言 3173 瀏覽
鐵人賽 Modern Web DAY 30
玩轉 Storybook 系列 第 30 篇

技術 玩轉 Storybook: Day 30 總結 & 學習資源

根據研究指出，重用程式碼可以節省42–81％的時間，並提高生產力 40％。易於共享UI元件的Design System在開發團隊中越來越流行。 Design S...

lala_lee_jobs ‧ 2020-10-15
1 Like 0 留言 1762 瀏覽
鐵人賽 Modern Web DAY 29
玩轉 Storybook 系列 第 29 篇

技術 玩轉 Storybook: Day 29 Design System for Developers - Distribute

在整個組織中發佈 Design System 從架構的角度來看，Design System 如同 lodash、moment 一樣，可做為專案開發過程的 dep...

lala_lee_jobs ‧ 2020-10-14
1 Like 0 留言 1772 瀏覽
鐵人賽 Modern Web DAY 28
玩轉 Storybook 系列 第 28 篇

技術 玩轉 Storybook: Day 28 Design System for Developers - Document

通過 Storybook Docs 推動 Design System 的採用 Design System為整個組織的利益相關者服務，因此我們需要教其他人如何從經...

lala_lee_jobs ‧ 2020-10-13
1 Like 0 留言 2100 瀏覽
鐵人賽 Modern Web DAY 27
玩轉 Storybook 系列 第 27 篇

技術 玩轉 Storybook: Day 27 Design System for Developers - Review、Test

單一真值來源 或 單點故障 Single Source of Truth (SSOT) 單一真值來源 Single Points of Failure (SP...

lala_lee_jobs ‧ 2020-10-12
2 Like 0 留言 2010 瀏覽
鐵人賽 Modern Web DAY 26
玩轉 Storybook 系列 第 26 篇

技術 玩轉 Storybook: Day 26 Design System for Developers - Intro、Architecture、Build

Introduction 目前較具規模的公司，像是 Airbnb / Uber / Microsoft，為了保持旗下不同網站一致的使用者體驗，會遵循著 Desi...

lala_lee_jobs ‧ 2020-10-11
1 Like 0 留言 1441 瀏覽
鐵人賽 Modern Web DAY 25
玩轉 Storybook 系列 第 25 篇

技術 玩轉 Storybook: Day 25 將 Storybook 持續部署

Exporting as a static app 首先要把寫好的Stories相關檔案，都打包成靜態可部署的檔案。 打包的語法如下 // package.js...

lala_lee_jobs ‧ 2020-10-10
1 Like 0 留言 2646 瀏覽
鐵人賽 Modern Web DAY 24
玩轉 Storybook 系列 第 24 篇

技術 玩轉 Storybook: Day 24 MDX

MDX 若要更詳細的整理 Storybook 文件，可以使用 Markdown 語法搭配 JSX 的格式 - MDX。 有二種使用 MDX 方法 Story...

lala_lee_jobs ‧ 2020-10-09
1 Like 0 留言 2399 瀏覽
鐵人賽 Modern Web DAY 23
玩轉 Storybook 系列 第 23 篇

技術 玩轉 Storybook: Day 23 DocsPage and Doc Blocks

DocsPage 介紹 Storybook Docs 是預設的 Addons，不需要做設定就可以使用。它可以整合元件裡的Stories、文字描述、程式註解、參數...

lala_lee_jobs ‧ 2020-10-08
1 Like 0 留言 1117 瀏覽
鐵人賽 Modern Web DAY 22
玩轉 Storybook 系列 第 22 篇

技術 玩轉 Storybook: Day 22 Construct a screen - Angular

在前面的單元，我們已經完成了開發單一元件Task，也完成了複合元件 TaskList，也把 TaskList 拆分為容器型(TaskListComponent)...

lala_lee_jobs ‧ 2020-10-07
1 Like 0 留言 1333 瀏覽
鐵人賽 Modern Web DAY 21
玩轉 Storybook 系列 第 21 篇

技術 玩轉 Storybook: Day 21 Wire in data - Angular & ngxs

Container and Presentational 官網的程式碼架構，會把元件分成二種類型-容器型(Container)及表現型(Presentation...

lala_lee_jobs ‧ 2020-10-06
1 Like 0 留言 1320 瀏覽
鐵人賽 Modern Web DAY 20
玩轉 Storybook 系列 第 20 篇

技術 玩轉 Storybook: Day 20 Construct a screen - Vue

在前面的單元，我們已經完成了開發單一元件Task，也完成了複合元件 TaskList，也把 TaskList 拆分為容器型(TaskList.vue) 及 表現...

lala_lee_jobs ‧ 2020-10-05
1 Like 0 留言 1171 瀏覽
鐵人賽 Modern Web DAY 19
玩轉 Storybook 系列 第 19 篇

技術 玩轉 Storybook: Day 19 Wire in data - Vue & Vuex

Container and Presentational 官網的程式碼架構，會把元件分成二種類型-容器型(Container)及表現型(Presentation...

lala_lee_jobs ‧ 2020-10-04
2 Like 0 留言 1938 瀏覽
鐵人賽 Modern Web DAY 18
玩轉 Storybook 系列 第 18 篇

技術 玩轉 Storybook: Day 18 Automated Visual Testing

視覺回溯測試 做視覺回溯測試的目的是要檢查每次修改元件UI的變化，當專案越來越大時，或是接近上線時期，修改元件的部分，有時會影響到整個專案。人工去檢視一定會有疏...

lala_lee_jobs ‧ 2020-10-03
1 Like 0 留言 2715 瀏覽
鐵人賽 Modern Web DAY 17
玩轉 Storybook 系列 第 17 篇

技術 玩轉 Storybook: Day 17 Unit Test with JEST

用 Storybook 搭配測試方法，從元件開發到完成整個專案，可以增加開發者的信心，不會擔心改A錯B的狀況發生，因為從邏輯面及UI面都能被完整的測試到。 單元...

lala_lee_jobs ‧ 2020-10-02
1 Like 0 留言 1779 瀏覽
鐵人賽 Modern Web DAY 16
玩轉 Storybook 系列 第 16 篇

技術 玩轉 Storybook: Day 16 Addons - Viewport/Accessibility

Viewport https://storybook.js.org/docs/vue/essentials/viewport Viewport 也是預設安裝好的...

lala_lee_jobs ‧ 2020-10-01
1 Like 0 留言 2600 瀏覽
鐵人賽 Modern Web DAY 15
玩轉 Storybook 系列 第 15 篇

技術 玩轉 Storybook: Day 15 Addons - Controls

Controls Addon 提供 Storybook 一個視覺化動態設定元件參數的方式，這樣就不需要寫程式重啟，也能發現元件的變化。 要使用 Control...

lala_lee_jobs ‧ 2020-09-30
1 Like 0 留言 1984 瀏覽
鐵人賽 Modern Web DAY 14
玩轉 Storybook 系列 第 14 篇

技術 玩轉 Storybook: Day 14 Addons - Essential / Actions

Storybook的另一個主要的功能就是Addons 在使用Storybook做元件開發設計時搭配Addon功能更加強大 接下來就來好好體驗感受他的威力吧 寫在...

lala_lee_jobs ‧ 2020-09-29
1 Like 0 留言 2337 瀏覽
鐵人賽 Modern Web DAY 13
玩轉 Storybook 系列 第 13 篇

技術 玩轉 Storybook: Day 13 Simple and Composite - Angular

在這個單元我們使用官網的教學搭配Angular的框架，STEP BY STEP的撰寫Component及Stories。(如果是使用Vue的讀者，可以跳過這個單...

lala_lee_jobs ‧ 2020-09-28
1 Like 0 留言 1488 瀏覽
鐵人賽 Modern Web DAY 12
玩轉 Storybook 系列 第 12 篇

技術 玩轉 Storybook: Day 12 Composite component - Vue

接下來就來把Task元件組裝成TaskList吧 TaskList 可以把TaskList規劃成四種狀態 Default - 當 Task 都是 defu...

lala_lee_jobs ‧ 2020-09-27
1 Like 0 留言 2650 瀏覽
鐵人賽 Modern Web DAY 11
玩轉 Storybook 系列 第 11 篇

技術 玩轉 Storybook: Day 11 Simple component - Vue

在這個單元我們使用官網的教學搭配Vue的框架，STEP BY STEP的撰寫Component及Stories。 Setup Vue Storybook 官網教...

lala_lee_jobs ‧ 2020-09-26
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙