![]()
![]()
หลังจากที่
Storybook 3.2 นั้นสนับสนุน Vue.js ไปแล้ว
ถึงคิวของ Angular บ้างสำหรับ Storybook 3.3 (ตอนนี้ไปถึง 3.3.3 แล้ว)
แต่ใช้ได้กับ Angular version 4 ขึ้นไปเท่านั้น
โดยมีการ addons ต่าง ๆ เพิ่มมานิดหน่อย เช่น
- Viewport ทำให้สามารถจำลองการทำงานบน device ขนาดต่าง ๆ
- Jest สำหรับการแสดงผลการทดสอบ
- Story panel
- Storyshot ของแต่ละ story
- สนับสนุน Markdown ใน story
ดูเพิ่มเติมได้ที่
Storybook Release
สิ่งที่ขอแนะนำคือ สนับสนุน Angular นั่นเอง
น่าจะเป็นสิ่งที่ชาว Angular รอคอยอยู่มั้ง
แต่ใช้ได้กับ version 4 ขึ้นไปเท่านั้น
สามารถใช้งานง่าย ๆ ด้วยการติดตั้ง Storybook ก่อน
[code]
$npm i -g @storybook/cli
[/code]
เข้าไปยัง angular project จากนั้นเริ่มใช้งาน
[code]
$getstorybook
$yarn run storybook
[/code]
หรือทำการสร้าง Angular project ใหม่ก็ได้
[code]
$ng new hello
$cd hello
$getstorybook
$yarn run storybook
[/code]
แสดงผลการทำงานของ Storybook ดังนี้
![]()
ลองติดตั้ง View port add-on นิดหน่อยสิ
[code]
npm i --save-dev @storybook/addon-viewport
[/code]
มีให้เลือกทั้ง iPhone 5, 6, iPad และ Android phone แสดงดังรูป
![]()
ในตอนนี้ Storybook สนับสนุน JavaScript framework หลักทั้ง 3 ตัวแล้วนะ
คือ React, Vue และ Angular
วันนี้ใครยังไม่ใช้ Storybook บ้าง ?
หลังจากที่ Storybook 3.2 นั้นสนับสนุน Vue.js ไปแล้ว
ถึงคิวของ Angular บ้างสำหรับ Storybook 3.3 (ตอนนี้ไปถึง 3.3.3 แล้ว)
แต่ใช้ได้กับ Angular version 4 ขึ้นไปเท่านั้น
โดยมีการ addons ต่าง ๆ เพิ่มมานิดหน่อย เช่น
