Téléchargement storybook amp - Téléchargement du code source de storybook amp

storybook amp

Composants tiers

v3.0.0

Télécharger

Ample de contes HTML ·

Addon de livre de contes pour AMP (pages mobiles accélérées). Permet d'afficher dans vos histoires les composants HTML ampli générés avec React.

Capture d'écran

Table des matières

Caractéristiques
Démo
Commencer
- Installation
- Configuration
- Usage
- Exemples
Feuille de route
Contributif
Licence
Remerciements
Links

Caractéristiques

Livré dans chaque histoire le code de sortie (AMP prêt) résultant du SSR.
Fonctionne avec des sites Web AMP, des e-mails AMP et des annonces AMP
Validation AMP en temps réel.
Ajoute un panneau Addon pour valider également l'histoire (en utilisant le validateur AMP en ligne) et afficher le code de sortie.
Prise en charge des composants stylisés à l'aide d'une fonction de rendu personnalisée

Démo

Demo HTML Amp HTML

Commencer

Installation

npm install -D storybook-amp

Configuration

Ensuite, mettez à jour .storybook/main.js à ce qui suit:

 // .storybook/main.js

module . exports = {
  stories : [
    // ...
  ] ,
  addons : [
    // Other Storybook addons

    'storybook-amp' , // ? The addon registered here
  ] ,
} ;

Usage

Pour définir les paramètres personnalisés, utilisez le paramètre 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)
  } ,
} ;

Vous pouvez utiliser le paramètre amp pour remplacer individuellement les paramètres de chaque histoire:

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

Exemples

Réagir

Feuille de route

Rendez-le compatible avec l' addon chromatique
Rendez-le compatible avec l' addon d'accessibilité
Réglez les détails de l'interface utilisateur lorsqu'il est utilisé avec Docs Addon
Plus d'outils pour les publicités AMP et les e-mails AMP
Ajouter plus d'exemples de tests
Ajouter des tests
Rendre l'intégration CI possible

Contributif

L'addon HTML AMP HTML est un projet open-source. Nous nous engageons dans un processus de développement pleinement transparent et apprécions fortement toutes les contributions. Que vous nous aidiez à corriger les bogues, à proposer de nouvelles fonctionnalités, à améliorer notre documentation ou à passer le mot - nous serions ravis de vous avoir dans le cadre de la communauté.

Veuillez vous référer à nos directives de contribution et au code de conduite.