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 >
)ยังไม่ชัดเจน? ลองดูตัวอย่างการทำงานนี้ที่ codesandbox.io หรือลองใช้ส่วนประกอบตัวอย่างที่แก้ไขได้และติดตั้งจาก bit.dev
react-content-loader สามารถใช้กับ React Native ในลักษณะเดียวกับเวอร์ชันเว็บที่มีการนำเข้าเดียวกัน:
1. สถานที่ตั้งค่าล่วงหน้าดูตัวอย่าง:
import ContentLoader , { Facebook } from 'react-content-loader/native'
const MyLoader = ( ) => < ContentLoader />
const MyFacebookLoader = ( ) => < Facebook />2. โหมดกำหนดเอง
ในการสร้างตัวโหลดที่กำหนดเองมีความแตกต่างที่สำคัญ: เนื่องจาก React Native ไม่มีโมดูลดั้งเดิมสำหรับส่วนประกอบ react-content-loader จึงจำเป็นต้องนำเข้ารูปร่างจาก React-Native-SVG หรือใช้การส่งออกที่มีชื่อ
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 | ตอบสนอง DOM ตอบสนองพื้นเมือง | การไม่เข้าร่วมภาพเคลื่อนไหวด้วย false |
title?: stringค่าเริ่มต้นใน Loading... | ตอบสนอง DOM เท่านั้น | มันถูกใช้เพื่ออธิบายองค์ประกอบคืออะไร ใช้ '' (สตริงว่าง) เพื่อลบ |
baseUrl?: stringค่าเริ่มต้นเป็นสตริงเปล่า | ตอบสนอง DOM เท่านั้น | จำเป็นหากคุณใช้ <base url="/" /> เอกสาร <head/>เสานี้ใช้กันทั่วไปเป็น: <ContentLoader baseUrl={window.location.pathname} /> ซึ่งจะเติมแอตทริบิวต์ SVG ด้วยเส้นทางสัมพัทธ์ ที่เกี่ยวข้อง #93. |
speed?: numberค่าเริ่มต้นเป็น 1.2 | ตอบสนอง DOM ตอบสนองพื้นเมือง | ความเร็วภาพเคลื่อนไหวในไม่กี่วินาที |
viewBox?: stringค่าเริ่มต้นเป็น undefined | ตอบสนอง DOM ตอบสนองพื้นเมือง | ใช้อุปกรณ์ประกอบฉากวิวบ็อกซ์เพื่อตั้งค่า viewbox ที่กำหนดเอง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการใช้งาน อ่านบทความวิธีการปรับขนาด SVG |
gradientRatio?: numberค่าเริ่มต้นเป็น 1.2 | ตอบสนอง DOM เท่านั้น | ความกว้างของการไล่ระดับสีอนิเมชั่นเป็นเศษเสี้ยวของความกว้างของกล่องมุมมอง |
rtl?: booleanค่าเริ่มต้นเป็น false | ตอบสนอง DOM ตอบสนองพื้นเมือง | เนื้อหาขวาไปซ้าย |
backgroundColor?: stringค่าเริ่มต้นเป็น #f5f6f7 | ตอบสนอง DOM ตอบสนองพื้นเมือง | ใช้เป็นพื้นหลังของแอนิเมชั่น |
foregroundColor?: stringค่าเริ่มต้นเป็น #eee | ตอบสนอง DOM ตอบสนองพื้นเมือง | ใช้เป็นเบื้องหน้าของแอนิเมชั่น |
backgroundOpacity?: numberค่าเริ่มต้นเป็น 1 | ตอบสนอง DOM ตอบสนองพื้นเมือง | พื้นหลังความทึบ (0 = โปร่งใส, 1 = ทึบแสง) ใช้ในการแก้ปัญหาใน Safari |
foregroundOpacity?: numberค่าเริ่มต้นเป็น 1 | ตอบสนอง DOM ตอบสนองพื้นเมือง | ความทึบของภาพเคลื่อนไหว (0 = โปร่งใส, 1 = ทึบแสง) ใช้ในการแก้ปัญหาใน Safari |
style?: React.CSSPropertiesค่าเริ่มต้นเป็น {} | ตอบสนอง DOM เท่านั้น | |
uniqueKey?: stringค่าเริ่มต้นเป็น ID ที่ไม่ซ้ำกันแบบสุ่ม | ตอบสนอง DOM เท่านั้น | ใช้ค่าคีย์ Prop เดียวกัน ที่จะแก้ปัญหาความไม่สอดคล้องกันของ SSR ดูเพิ่มเติมที่นี่ |
beforeMask?: JSX.Elementค่าเริ่มต้นเป็น null | ตอบสนอง DOM ตอบสนองพื้นเมือง | กำหนดรูปร่างที่กำหนดเองก่อนเนื้อหา ดูเพิ่มเติมที่นี่ |
ดูตัวเลือกทั้งหมดสด
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%' } }
/>
) เนื่องจากองค์ประกอบหลักสร้างค่าสุ่มเพื่อให้ตรงกับ ID ขององค์ประกอบ SVG ที่มีสไตล์พื้นหลังมันสามารถพบข้อผิดพลาดที่ไม่คาดคิดและคำเตือนที่ไม่ตรงกันเกี่ยวกับการเรนเดอร์เมื่อค่าสุ่มของ ID จะถูกสร้างขึ้นสองครั้งในกรณีของ SSR: เซิร์ฟเวอร์และไคลเอนต์; หรือในกรณีของการทดสอบสแน็ปช็อต: ในนัดแรกและทำการทดสอบอีกครั้ง
ในการแก้ไขให้ตั้งค่า prop uniqueKey จากนั้น ID จะไม่สุ่มอีกต่อไป:
import { Facebook } from 'react-content-loader'
const MyFacebookLoader = ( ) => < Facebook uniqueKey = "my-random-value" /> เมื่อใช้ rgba เป็นค่า backgroundColor หรือค่า foregroundColor ค่า Safari ไม่เคารพช่องอัลฟ่าซึ่งหมายความว่าสีจะทึบ เพื่อป้องกันสิ่งนี้แทนที่จะใช้ค่า 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 ไม่สามารถแสดงผลได้และดูเหมือนกล่องดำ เพียงลบแท็ก ฐาน HREF ออกจาก <head /> และปัญหาได้รับการแก้ไขแล้ว
ดู: #93/109
เบราว์เซอร์เก่าไม่สนับสนุนแอนิเมชั่นใน SVG (รายการความเข้ากันได้) และหากโครงการของคุณต้องสนับสนุน IE ตัวอย่างนี่คือสองวิธีเพื่อให้แน่ใจว่าเบราว์เซอร์รองรับ SVG Animate:
window.SVGAnimateElementdocument.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG-Animation", "1.1")แยก repo แล้วโคลนมัน
$ git clone [email protected]:YourUsername/react-content-loader.git && cd react-content-loader
$ npm i : ติดตั้งการพึ่งพา;
$ npm run build : สร้างสู่การผลิต;
$ npm run dev : เรียกใช้หนังสือนิทานเพื่อดูการเปลี่ยนแปลงของคุณ;
$ npm run test : เรียกใช้การทดสอบทั้งหมด: การตรวจสอบประเภท, การทดสอบหน่วยบนเว็บและดั้งเดิม;
$ npm run test:watch : การทดสอบหน่วยดู;
เนื่องจาก React Native ไม่สนับสนุนลิงก์สัญลักษณ์ (เพื่อเชื่อมโยงการพึ่งพากับโฟลเดอร์อื่น) และเนื่องจากไม่มีสนามเด็กเล่นเพื่อตรวจสอบการมีส่วนร่วมของคุณ (เช่นนิทาน) นี่เป็นกลยุทธ์ที่แนะนำให้เรียกใช้โครงการในพื้นที่:
yarn add react-content-loader react-native-svgreact-content-loader ไปยังโครงการที่เพิ่งโคลนเช่น: import ContentLoader, { Rect, Circle } from './react-content-loader/native' ข้อความควรปฏิบัติตามอนุสัญญาข้อความ commit ดังนั้นการเปลี่ยนแปลงสามารถสร้างขึ้นได้โดยอัตโนมัติ ข้อความที่กระทำจะได้รับการตรวจสอบโดยอัตโนมัติเมื่อ commit หากคุณไม่คุ้นเคยกับการประชุมข้อความที่กระทำคุณสามารถใช้การกระทำของเส้นด้าย (หรือ npm run commit ) แทนการกระทำ GIT ซึ่งให้ CLI แบบโต้ตอบสำหรับการสร้างข้อความที่เหมาะสม
มิกซ์
