Addon Storybook สำหรับ AMP (หน้ามือถือเร่งความเร็ว) อนุญาตให้แสดงในเรื่องราวของคุณ แอมป์ส่วนประกอบ HTML ที่สร้างขึ้นด้วย React

npm install -D storybook-amp ถัดไปอัปเดต .storybook/main.js ต่อไปนี้:
// .storybook/main.js
module . exports = {
stories : [
// ...
] ,
addons : [
// Other Storybook addons
'storybook-amp' , // ? The addon registered here
] ,
} ; ในการตั้งค่าการตั้งค่าที่กำหนดเองให้ใช้พารามิเตอร์ amp
// .storybook/preview.js
const scripts = '' ;
const styles = '' ;
export const parameters = {
// Other defined parameters
amp : { // ? The addon parameters here
isEnabled : true , // Enable the addon, false by default (boolean)
scripts , // Global scripts to add, empty by default (string)
styles , // Custom css styles, empty by default (string)
} ,
} ; คุณสามารถใช้พารามิเตอร์ amp เพื่อแทนที่การตั้งค่าในแต่ละเรื่องเป็นรายบุคคล:
// Story example
export default {
title : "Components/amp-youtube" ,
parameters : {
amp : {
scripts : // ? Script needed by the story
`<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>` ,
} ,
} ,
} ;
export const Story = ( args ) => (
< amp-youtube
width = "480"
height = "270"
layout = "responsive"
data-videoid = 'lBTCB7yLs8Y'
> </ amp-youtube >
)นิทานแอมป์ HTML Addon เป็นโครงการโอเพ่นซอร์ส เรามุ่งมั่นที่จะกระบวนการพัฒนาที่โปร่งใสอย่างเต็มที่และชื่นชมการมีส่วนร่วมใด ๆ ไม่ว่าคุณจะช่วยเราแก้ไขข้อบกพร่องเสนอคุณสมบัติใหม่ปรับปรุงเอกสารของเราหรือกระจายคำ - เรายินดีที่จะให้คุณเป็นส่วนหนึ่งของชุมชน
โปรดดูแนวทางการบริจาคของเราและจรรยาบรรณ
หนังสือนิทานแอมป์ HTML Addon ได้รับอนุญาตภายใต้ใบอนุญาต MIT - ดูไฟล์ใบอนุญาตสำหรับรายละเอียด
เริ่มแรกสร้างโดย Onwidget และดูแลโดยชุมชนของผู้มีส่วนร่วม