storybook amp下載 - storybook amp源代碼下載

storybook amp

三方組件

v3.0.0

下載

Storybook amp html·

Storybook addon for amp（加速移動頁面）。允許在您的故事中顯示用React生成的HTML組件。

螢幕截圖

特徵
演示
入門
- 安裝
- 配置
- 用法
- 例子
路線圖
貢獻
執照
致謝
鏈接

特徵

在每個故事中交付由SSR產生的輸出代碼（AMP準備）。
與AMP網站，AMP電子郵件和AMP廣告合作
實時AMP驗證。
添加插件面板還可以驗證故事（使用在線AMP驗證器）並查看輸出代碼。
使用自定義渲染功能支持樣式的組件

演示

故事書AMP HTML演示

入門

安裝

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 >
)