storybook ampダウンロード - storybook ampソースコードのダウンロード

storybook amp

サードパーティ製コンポーネント

v3.0.0

ダウンロード

ストーリーブックアンプHTML

AMP用のストーリーブックアドオン（アクセラレーションされたモバイルページ）。 Reactで生成されたストーリーにAMP HTMLコンポーネントを表示できます。

スクリーンショット

特徴
デモ
はじめる
- インストール
- 構成
- 使用法
- 例
ロードマップ
貢献
ライセンス
謝辞
リンク

特徴

各ストーリーで、SSRから生じる出力コード（AMP対応）を配信します。
AMP Webサイト、AMPメール、AMP広告で動作します
リアルタイムアンプの検証。
Addonパネルを追加してストーリー（オンラインAMP Validatorを使用）を検証し、出力コードを表示します。
カスタムレンダリング関数を使用したスタイルのコンポーネントをサポートします

デモ

ストーリーブックアンプ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 >
)

例

反応します

ロードマップ

クロマティックアドオンと互換性があります
アクセシビリティアドオンと互換性のあるものにします
ドキュメントアドオンで使用する場合は、UIの詳細を調整します
AMP広告とAMP電子メールのその他のツール
より多くのサンプルテストを追加します
テストを追加します
CI統合を可能にします

貢献

Storybook Amp HTMLアドオンは、オープンソースプロジェクトです。私たちは完全に透明な開発プロセスに取り組んでおり、あらゆる貢献を高く評価しています。バグの修正、新機能の提案、ドキュメントの改善、言葉の広がりを手伝っているのかにかかわらず、コミュニティの一員としてあなたを迎えたいと思います。

貢献ガイドラインと行動規範を参照してください。