react content loader
v7.0.2
المكون الذي يعمل بنظام SVG لإنشاء عمليات تحميل نائبة بسهولة (مثل تحميل بطاقات Facebook).
npm i react-content-loader --saveyarn add react-content-loadernpm i react-content-loader react-native-svg --saveyarn add react-content-loader react-native-svgCDN من JSDelivr
هناك طريقتان لاستخدامه:
1. الإعدادات المسبقة ، انظر الأمثلة:
import ContentLoader , { Facebook } from 'react-content-loader'
const MyLoader = ( ) => < ContentLoader />
const MyFacebookLoader = ( ) => < Facebook />2. الوضع المخصص ، انظر الأداة عبر الإنترنت
const MyLoader = ( ) => (
< ContentLoader viewBox = "0 0 380 70" >
{ /* Only SVG shapes */ }
< rect x = "0" y = "0" rx = "5" ry = "5" width = "70" height = "70" />
< rect x = "80" y = "17" rx = "4" ry = "4" width = "300" height = "13" />
< rect x = "80" y = "40" rx = "3" ry = "3" width = "250" height = "10" />
</ ContentLoader >
)لا يزال غير واضح؟ ألقِ نظرة على هذا المثال العام
يمكن استخدام react-content-loader مع React Native بنفس طريقة إصدار الويب بنفس الاستيراد:
1. الإعدادات المسبقة ، انظر الأمثلة:
import ContentLoader , { Facebook } from 'react-content-loader/native'
const MyLoader = ( ) => < ContentLoader />
const MyFacebookLoader = ( ) => < Facebook />2. الوضع المخصص
لإنشاء اللوادر المخصصة ، هناك فرق مهم: نظرًا لأن React Native لا يحتوي على أي وحدة أصلية لمكونات SVG ، فمن الضروري استيراد الأشكال من REACTING-SVG أو استخدام مستقيم ودائرة التصدير المسماة من استورد react-content-loader :
import ContentLoader , { Rect , Circle } from 'react-content-loader/native'
const MyLoader = ( ) => (
< ContentLoader viewBox = "0 0 380 70" >
< Circle cx = "30" cy = "30" r = "30" />
< Rect x = "80" y = "17" rx = "4" ry = "4" width = "300" height = "13" />
< Rect x = "80" y = "40" rx = "3" ry = "3" width = "250" height = "10" />
</ ContentLoader >
) اسم الدعامة والنوع | بيئة | وصف |
|---|---|---|
animate?: booleanالافتراضات إلى true | رد فعل دوم رد فعل مواطن | إلغاء الاشتراك في الرسوم المتحركة مع false |
title?: stringالإعدادات الافتراضية Loading... | رد فعل DOM فقط | يتم استخدامه لوصف العنصر الذي هو عليه. استخدم '' (سلسلة فارغة) لإزالتها. |
baseUrl?: stringالافتراضيات لسلسلة فارغة | رد فعل DOM فقط | مطلوب إذا كنت تستخدم <base url="/" /> مستند <head/> .هذا الدعامة شائع يستخدم على النحو التالي: <ContentLoader baseUrl={window.location.pathname} /> الذي سيملأ سمة SVG بالمسار النسبي. ذات الصلة #93. |
speed?: numberالإعدادات الافتراضية إلى 1.2 | رد فعل دوم رد فعل مواطن | سرعة الرسوم المتحركة في ثوان. |
viewBox?: stringالإعدادات الافتراضية إلى undefined | رد فعل دوم رد فعل مواطن | استخدم props bopbox لتعيين قيمة مخصصة لـ ViewBox ، لمزيد من المعلومات حول كيفية استخدامه ، اقرأ المقال كيفية قياس SVG. |
gradientRatio?: numberالإعدادات الافتراضية إلى 1.2 | رد فعل DOM فقط | عرض التدرج المتحرك كجزء من عرض مربع العرض. |
rtl?: booleanالإعدادات الافتراضية إلى false | رد فعل دوم رد فعل مواطن | محتوى يمين اليسار. |
backgroundColor?: stringالإعدادات الافتراضية إلى #f5f6f7 | رد فعل دوم رد فعل مواطن | تستخدم كخلفية للرسوم المتحركة. |
foregroundColor?: stringالإعدادات الافتراضية إلى #eee | رد فعل دوم رد فعل مواطن | تستخدم كمقدمة للرسوم المتحركة. |
backgroundOpacity?: numberالإعدادات الافتراضية إلى 1 | رد فعل دوم رد فعل مواطن | عتامة الخلفية (0 = شفاف ، 1 = غير شفاف) تستخدم لحل مشكلة في سفاري |
foregroundOpacity?: numberالإعدادات الافتراضية إلى 1 | رد فعل دوم رد فعل مواطن | عتامة الرسوم المتحركة (0 = شفاف ، 1 = غير شفاف) تستخدم لحل مشكلة في سفاري |
style?: React.CSSPropertiesالإعدادات الافتراضية إلى {} | رد فعل DOM فقط | |
uniqueKey?: stringالإعدادات الافتراضية إلى معرف فريد عشوائي | رد فعل DOM فقط | استخدم نفس قيمة مفتاح Prop ، سيؤدي ذلك إلى حل عدم الاتساق على SSR ، انظر المزيد هنا. |
beforeMask?: JSX.Elementالافتراضات إلى NULL | رد فعل دوم رد فعل مواطن | تحديد الأشكال المخصصة قبل المحتوى ، انظر المزيد هنا. |
شاهد جميع الخيارات على الهواء مباشرة
import { Facebook } from 'react-content-loader'
const MyFacebookLoader = ( ) => < Facebook /> 
import { Instagram } from 'react-content-loader'
const MyInstagramLoader = ( ) => < Instagram /> 
import { Code } from 'react-content-loader'
const MyCodeLoader = ( ) => < Code /> 
import { List } from 'react-content-loader'
const MyListLoader = ( ) => < List /> 
import { BulletList } from 'react-content-loader'
const MyBulletListLoader = ( ) => < BulletList /> 
بالنسبة للوضع المخصص ، استخدم الأداة عبر الإنترنت.
const MyLoader = ( ) => (
< ContentLoader
height = { 140 }
speed = { 1 }
backgroundColor = { '#333' }
foregroundColor = { '#999' }
viewBox = "0 0 380 70"
>
{ /* Only SVG shapes */ }
< rect x = "0" y = "0" rx = "5" ry = "5" width = "70" height = "70" />
< rect x = "80" y = "17" rx = "4" ry = "4" width = "300" height = "13" />
< rect x = "80" y = "40" rx = "3" ry = "3" width = "250" height = "10" />
</ ContentLoader >
) 
لتجنب السلوك غير المتوقع ، لا تحتوي الحزمة على إعدادات رأي. لذلك إذا كان من الضروري أن تكون متجاهاً ، فكلها في الاعتبار أن إخراج الحزمة هو SVG منتظم ، لذلك يحتاج فقط إلى نفس السمات لتصبح استجابة SVG منتظمة ، مما يعني:
import { Code } from 'react-content-loader'
const MyCodeLoader = ( ) => (
< Code
width = { 100 }
height = { 100 }
viewBox = "0 0 100 100"
style = { { width : '100%' } }
/>
) نظرًا لأن المكون الرئيسي يولد قيمًا عشوائية لمطابقة معرف عنصر SVG بأسلوب الخلفية ، فقد يواجه أخطاء غير متوقعة وتحذير لا مثيل له على العرض ، بمجرد إنشاء القيمة العشوائية للمعرف مرتين ، في حالة SSR: الخادم والعميل ؛ أو في حالة اختبار اللقطة: في المباراة الأولى وإعادة تشغيل الاختبار.
لإصلاحه ، قم بتعيين prop uniqueKey ، ثم لن يكون المعرف عشوائيًا بعد الآن:
import { Facebook } from 'react-content-loader'
const MyFacebookLoader = ( ) => < Facebook uniqueKey = "my-random-value" /> عند استخدام rgba كألوان backgroundColor أو قيمة foregroundColor ، لا يحترم Safari قناة Alpha ، مما يعني أن اللون سيكون غير شفاف. لمنع ذلك ، بدلاً من استخدام قيمة rgba لألوان backgroundColor / foregroundColor ، استخدم مكافئ rgb ونقل قيمة قناة ألفا إلى الدعائم backgroundOpacity / foregroundOpacity .
{ /* Opaque color in Safari and iOS */ }
< ContentLoader
backgroundColor = "rgba(0,0,0,0.06)"
foregroundColor = "rgba(0,0,0,0.12)" >
{ / _ Semi-transparent color in Safari and iOS _ / }
< ContentLoader
backgroundColor = "rgb(0,0,0)"
foregroundColor = "rgb(0,0,0)"
backgroundOpacity = { 0.06 }
foregroundOpacity = { 0.12 } >
إن استخدام العلامة الأساسية في الصفحة التي تحتوي على عناصر SVG فشل في تقديمها ويبدو أنها مربع أسود. فقط قم بإزالة علامة Base-HREF من <head /> وتم حل المشكلة.
انظر: #93 /109
لا تدعم المتصفحات القديمة الرسوم المتحركة في SVG (قائمة التوافق) ، وإذا كان يجب أن يدعم مشروعك أي أمثلة ، فإليك طريقتان للتأكد من أن المتصفح يدعم SVG تحريك:
window.SVGAnimateElementdocument.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG-Animation", "1.1")مفترق الريبو ثم استنساخه
$ git clone [email protected]:YourUsername/react-content-loader.git && cd react-content-loader
$ npm i : تثبيت التبعيات ؛
$ npm run build : Build to Production ؛
$ npm run dev : قم بتشغيل كتاب القصص لمشاهدة التغييرات الخاصة بك ؛
$ npm run test : قم بتشغيل جميع الاختبارات: فحص النوع ، اختبارات الوحدة على الويب والمواطن ؛
$ npm run test:watch : Watch Unit Tests ؛
نظرًا لأن React Native لا يدعم الروابط الرمزية (لربط الاعتماد على مجلد آخر) وبما أنه لا يوجد ملعب للتحقق من مساهماتك (مثل Storybook) ، فإن هذه الإستراتيجية الموصى بها لتشغيل المشروع محليًا:
yarn add react-content-loader react-native-svgreact-content-loader إلى المشروع تم استنساخه للتو ، مثل: import ContentLoader, { Rect, Circle } from './react-content-loader/native' يجب أن تتبع رسائل الالتزام اتفاقية رسالة الالتزام ، لذلك ، يمكن إنشاء changelogs تلقائيًا بذلك. يتم التحقق من صحة الرسائل الالتزام تلقائيًا عند الالتزام. إذا لم تكن معتادًا على اتفاقية رسالة الالتزام ، فيمكنك استخدام CHANT Commice (أو npm run commit ) بدلاً من GIT Commice ، والذي يوفر CLI تفاعليًا لتوليد رسائل ملزمة مناسبة.
معهد ماساتشوستس للتكنولوجيا
