تنزيل storybook amp - تنزيل رمز المصدر storybook amp

storybook amp

مكونات الطرف الثالث

v3.0.0

تنزيل

قصص amp html ·

Storybook Addon لـ AMP (صفحات الهاتف المحمول المتسارعة). يسمح بعرض مكونات AMP HTML في القصص التي تم إنشاؤها باستخدام React.

لقطة شاشة

جدول المحتويات

سمات
العرض التوضيحي
ابدء
- تثبيت
- إعدادات
- الاستخدام
- أمثلة
خريطة الطريق
المساهمة
رخصة
شكر وتقدير
الروابط

سمات

تسليم في كل قصة رمز الإخراج (AMP جاهز) الناتج عن SSR.
يعمل مع مواقع AMP و AMP البريد الإلكتروني وإعلانات AMP
التحقق من صحة أمبير الحقيقي.
يضيف لوحة Addon للتحقق من صحة القصة (باستخدام مصلحة AMP عبر الإنترنت) وعرض رمز الإخراج.
دعم المكونات المصممة باستخدام وظيفة عرض مخصص

العرض التوضيحي

قصص amp html demo

ابدء

تثبيت

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

أمثلة

رد فعل

خريطة الطريق

اجعله متوافقًا مع الملحق اللوني
اجعله متوافقًا مع ملحق إمكانية الوصول
اضبط تفاصيل واجهة المستخدم عند استخدامها مع مستندات Addon
المزيد من الأدوات لإعلانات AMP و AMP البريد الإلكتروني
أضف المزيد من اختبارات المثال
إضافة الاختبارات
اجعل تكامل CI ممكنًا

المساهمة

Storybook AMP HTML Addon هو مشروع مفتوح المصدر. نحن ملتزمون بعملية تنمية شفافة تمامًا ونقدر أي مساهمات للغاية. سواء كنت تساعدنا في إصلاح الأخطاء ، أو اقتراح ميزات جديدة ، أو تحسين وثائقنا أو نشر الكلمة - نود أن نكون لك كجزء من المجتمع.

يرجى الرجوع إلى إرشادات المساهمة لدينا وقواعد السلوك.