storybook amp 다운로드 - storybook amp 소스 코드 다운로드

storybook amp

타사 구성 요소

v3.0.0

다운로드

스토리 북 amp html ·

AMP 용 스토리 북 애드온 (가속 모바일 페이지). react로 생성 된 이야기 AMP HTML 구성 요소에 표시 할 수 있습니다.

스크린 샷

특징
데모
시작하기
- 설치
- 구성
- 용법
- 예
로드맵
기여
특허
감사의 말
모래밭

특징

각 스토리에서 SSR에서 발생하는 출력 코드 (AMP Ready)를 전달하십시오.
AMP 웹 사이트, AMP 이메일 및 AMP 광고와 함께 작동합니다
실시간 AMP 검증.
Addon 패널을 추가하여 스토리를 검증하고 (온라인 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 >
)

예

반응

로드맵

색채 애드온 과 호환되도록하십시오
접근성 애드온 과 호환되도록하십시오
Docs Addon 과 함께 사용될 때 UI 세부 사항을 조정하십시오
AMP 광고 및 AMP 이메일을 위한 더 많은 도구
더 많은 예제 테스트를 추가하십시오
테스트 추가
CI 통합을 가능하게하십시오

기여

스토리 북 amp html addon은 오픈 소스 프로젝트입니다. 우리는 완전히 투명한 개발 프로세스에 전념하고 있으며 모든 기여에 감사합니다. 버그 수정을 돕거나 새로운 기능 제안, 문서 개선 또는 단어를 전파하는 데 도움이 되든 커뮤니티의 일부로 귀하를 데려오고 싶습니다.

기여 지침 및 행동 강령을 참조하십시오.