iT邦幫忙

storybook相關文章
共有 49 則文章
鐵人賽 Modern Web

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

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

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 14

技術 [Day14] Storybook - Colors & Typography

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

鐵人賽 Modern Web DAY 13

技術 [Day13] Storybook - MDX

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

鐵人賽 Modern Web DAY 12

技術 [Day12] Storybook - Writing Docs

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

鐵人賽 Modern Web DAY 11

技術 [Day11] Storybook - Controls

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 30
玩轉 Storybook 系列 第 30

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

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

鐵人賽 Modern Web DAY 29
玩轉 Storybook 系列 第 29

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

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

鐵人賽 Modern Web DAY 28
玩轉 Storybook 系列 第 28

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

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

鐵人賽 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...

鐵人賽 Modern Web DAY 26
玩轉 Storybook 系列 第 26

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

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

鐵人賽 Modern Web DAY 25
玩轉 Storybook 系列 第 25

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

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

鐵人賽 Modern Web DAY 24
玩轉 Storybook 系列 第 24

技術 玩轉 Storybook: Day 24 MDX

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

鐵人賽 Modern Web DAY 23
玩轉 Storybook 系列 第 23

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

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

鐵人賽 Modern Web DAY 22
玩轉 Storybook 系列 第 22

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

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

鐵人賽 Modern Web DAY 21
玩轉 Storybook 系列 第 21

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

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

鐵人賽 Modern Web DAY 20
玩轉 Storybook 系列 第 20

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

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

鐵人賽 Modern Web DAY 19
玩轉 Storybook 系列 第 19

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

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

鐵人賽 Modern Web DAY 18
玩轉 Storybook 系列 第 18

技術 玩轉 Storybook: Day 18 Automated Visual Testing

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

鐵人賽 Modern Web DAY 17
玩轉 Storybook 系列 第 17

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

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

鐵人賽 Modern Web DAY 16
玩轉 Storybook 系列 第 16

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

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

鐵人賽 Modern Web DAY 15
玩轉 Storybook 系列 第 15

技術 玩轉 Storybook: Day 15 Addons - Controls

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

鐵人賽 Modern Web DAY 14
玩轉 Storybook 系列 第 14

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

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

鐵人賽 Modern Web DAY 13
玩轉 Storybook 系列 第 13

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

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

鐵人賽 Modern Web DAY 12
玩轉 Storybook 系列 第 12

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

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

鐵人賽 Modern Web DAY 11
玩轉 Storybook 系列 第 11

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

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

鐵人賽 Modern Web DAY 10
玩轉 Storybook 系列 第 10

技術 玩轉 Storybook: Day 10 Naming components and hierarchy

Naming components 修改一下Story檔案,對應於Component的Title名稱(default export區塊),就會發現Sidebar...

鐵人賽 Modern Web DAY 9
玩轉 Storybook 系列 第 9

技術 玩轉 Storybook: Day 09 Decorators

Decorators Decorator是一種設計模式,把要被裝飾的Story當做參數,傳入裝飾器中,Decorator可以幫Story加上額外的資訊,賦予給S...