Intro 想做這個主題是因為，在翻閱過去的鐵人賽，「單純」只討論 Storybook 的文章並不多，雖然它的基本觀念並不難理解。 若有更多人知道及理解這個好用...
storybook 版本升級 如果有看上一篇的話，會發現上一篇的範例用的是 storybook 3.4.10。因為重新用 webpack4 建立了 Nuxt 2...
上一篇將 vuetify 的 theme 拆成獨立的檔案 (vuetify.config.js)。 這篇會將 vuetify 引入 storybook 中，同步...
前言 首先，這不太算一個 Nuxt 教學文，只是想分享自己用 Nuxt 建立一個 blog。這次參賽的目標是想分享自己學到的知識，並記錄自己的學習過程，所以東西...
嗨 大家好 我是一路爬坡的阿肥 今天是Happy Friday! 也是適合寫鐵人賽文章的好日子喔(疑?) Storybook 簡介 今天阿肥要先插個花，介紹一...
Storybook 簡介 官方 Demo Storybook 方便我們開發 UI 元件，使用 storybook 可以看到 UI 元件在不同狀態下的樣貌。 另外...
上一篇，整合了 Storybook 和 Nuxt，也建立了一個元件為 MyButton。 但如果每次要新增一個元件，就要建立四個檔案如下： index.js...
Install Storybook 安裝 Storybook 只需要在Terminal，切換到現有專案的根目錄後，簡單的執行一行指令 npx sb init...
隨著 Component Driven 興起，元件化變為不可逆的趨勢，在元件化後的可替換性與重複利用性上有了很大的幫助，但如果直接在系統上開發，則會被其他的元件...
預設放置組態檔案的目錄 Storybook集中放置組態設定檔案的目錄預設是.storybook，若需要變更路徑及名稱，要在Storybook的CLI指令做設定。...
Credit: https://www.behance.net/gallery/35988339/Style-guide-e-commerce-web-app...
今天會擴充套件 codemirror 和 vue-codemirror。使我們在部落格中編輯或發佈文章時，輸入的 markdown 是會有高亮的，這篇是為了之後...
根據研究指出，重用程式碼可以節省42–81％的時間，並提高生產力 40％。易於共享UI元件的Design System在開發團隊中越來越流行。 Design S...
前情提要 從開始安裝到完成，檢查專案目錄下變更的檔案結構，會發現Storybook的安裝做了以下的步驟。 安裝需要的相依套件 在Package.json加上建...
Story檔案放置位置 Component對應的Story檔案，通常會放置在Component檔案旁邊。Story只會用於開發時期，在Production的bu...
Template & Args 同一個元件的多個story function，都會重複的指定相同的Template，可以拉出一個共用 template...
用 Storybook 搭配測試方法，從元件開發到完成整個專案，可以增加開發者的信心，不會擔心改A錯B的狀況發生，因為從邏輯面及UI面都能被完整的測試到。 單元...
MDX 若要更詳細的整理 Storybook 文件，可以使用 Markdown 語法搭配 JSX 的格式 - MDX。 有二種使用 MDX 方法 Story...
Controls Addon 提供 Storybook 一個視覺化動態設定元件參數的方式，這樣就不需要寫程式重啟，也能發現元件的變化。 要使用 Control...
Parameter Parameter 是用來定義Stories的靜態metadata(解釋資料的資料)，Parameter能提供給不同的addon去做設定。...
在這個單元我們使用官網的教學搭配Vue的框架，STEP BY STEP的撰寫Component及Stories。 Setup Vue Storybook 官網教...
Decorators Decorator是一種設計模式，把要被裝飾的Story當做參數，傳入裝飾器中，Decorator可以幫Story加上額外的資訊，賦予給S...
以下列出，啟動或是建置 Storybook 時，有哪些可以使用的 CLI Options。 start-storybook 啟動 Storybook Usage...
DocsPage 介紹 Storybook Docs 是預設的 Addons，不需要做設定就可以使用。它可以整合元件裡的Stories、文字描述、程式註解、參數...
Naming components 修改一下Story檔案，對應於Component的Title名稱(default export區塊)，就會發現Sidebar...
經過了前面兩篇新增了 markdown-it 和 highlight.js，今天來開發 TheMarkdown 元件，因為所需要的套件和設定都已經在前兩篇完成，...
今天開發的 FormAddPost 主要功能為 新增/修改 一篇文章的表單。 會用到之前寫的元件: TheMarkdown vue-codemirror Po...
單一真值來源 或 單點故障 Single Source of Truth (SSOT) 單一真值來源 Single Points of Failure (SP...
在這個單元我們使用官網的教學搭配Angular的框架，STEP BY STEP的撰寫Component及Stories。(如果是使用Vue的讀者，可以跳過這個單...
Story 是元件呈現狀態的描述，開發者可以為每個元件攥寫多個 Story，也就是說元件可能會因為不同的參數組合而有不同的樣貌，而我們可以透過定義 Story...
lala_lee_jobs
HunterLiu
Yuri Tsai
Peter Chen
Mia Yang
iThome鐵人賽
看影片追技術