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