الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

رد فعل Zmage

React-Zmage هو عنصر تحكم في تحجيم الصورة القائم على رد الفعل. يمكن تحجيم الصورة ملفوفة بواسطة علامة ZMage. يمكنك استخدام عنصر التحكم هذا لاستبدال علامة IMG الأصلية وتضمين وظيفة تحجيم الصورة.

يجب أن يكون إصدار React أكبر من V16.6.0

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

متصل

https://zmage.caldis.me

محلي 

git clone https://github.com/Caldis/react-zmage
cd react-zmage
npm i
npm run dev

ثَبَّتَ 

npm i react-zmage --save

يستخدم

1. إدخال المكونات 

 import Zmage from 'react-zmage'

2. استبدل علامة IMG في الصفحة بمكون ZMage 

 < img src = "图片源连接" />
? to ?
< Zmage src = "图片源连接" / >
الآن يمكن توسيع هذه الصور وعرضها!

يمكنك أيضًا استدعاء الصورة من خلال مكالمات الوظائف 

 // Zmage.browsing 函数接受的参数与 <Zmage/> 组件完全一致
< a onClick = { ( ) => Zmage . browsing ( { src : imagePath } ) } >任意元素</ a >

استخدم في typescript 

 import ReactZmage from 'react-zmage' ;

// 在生命周期等方法中使用
public componentDidMount ( ) {
    const zmage = new ReactZmage ( {
        // ...options
    } ) ;
}

// 也支持组件方式使用
public render ( ) : JSX . Element {
    const defaultConfig = {
        src : 'http://zmage.caldis.me/imgSet/childsDream/demo.jpg' ,
        alt : '示例图片' ,
    } ;

    return (
        < ReactZmage
            { ... defaultConfig }
        / >
    ) ;
}

التكوين الأساسي

ابدأ الآن ، يكفي أن تحتاج فقط إلى معرفة المعلمات التالية

للحصول على مثال عبر الإنترنت ، راجع https://zmage.caldis.me

  • خصائص المكالمات الأساسية
عناصر التكوين يكتب القيمة الافتراضية يصف مثال
src خيط "" " عنوان URL للصور ، نفس سمة src لعلامة img مثال
alt خيط "" " نص العنصر النائب للصورة ، نفس سمة alt لعلامة img مثال
set هدف[] [] صور التسلسل ، يمكن تمرير كائنات صور متعددة في set لتقديم صور متعددة في وضع العرض ، أو يمكن استخدامها لتقديم صور عالية الدقة موسعة مثال
defaultPage رقم 0 إذا تم تمرير set لعرض صور متعددة ، فيمكن استخدامها لتحديد الصفحة الافتراضية بعد الفتح مثال

التكوين المتقدم

كما أنه من السهل جدًا استخدامه دون فهم هذه المعلمات ، ولكن إذا كنت بحاجة إلى تخصيص أكثر تفصيلاً ، فيمكنك مراجعة المحتوى التالي
  • التكوين المسبق (بيتا)
عناصر التكوين يكتب القيمة الافتراضية يصف مثال
preset خيط "آلي" auto بتكوين وظائف وأنماط desktop mobile بسهولة مثال على عناصر التكوين المتأثرة
  • خصائص خاضعة للرقابة
عناصر التكوين يكتب القيمة الافتراضية يصف مثال
browsing منطقية فارغ يتحكم في ما إذا كان سيتم إدخال وضع المشاهدة مثال
  • التحكم الوظيفي
عناصر التكوين يكتب القيمة الافتراضية يصف مثال
controller يفحص سطح المكتب | متحرك اضبط عنصرًا محددًا على false لإخفاء عناصر التحكم في العملية في وضع العرض مثال
hotKey يفحص سطح المكتب | متحرك اضبط عنصرًا محددًا على false لتعطيل مفاتيح الاختصار في وضع العرض مثال
animate يفحص سطح المكتب | متحرك تمرير معلمات محددة لتحديد صفحات تحويل الرسوم المتحركة (تصفح الرسوم المتحركة غير قابلة للتكوين حاليًا) قيمة اختيارية مثال
  • نمط الواجهة
عناصر التكوين يكتب القيمة الافتراضية يصف مثال
backdrop خيط "#ffffff" تحكم في لون الخلفية بعد الصورة الموسعة مثال
zIndex رقم 1000 تحكم z-index للحاوية الخارجية لمنعها من الحجب بواسطة عناصر أخرى مثال
radius رقم سطح المكتب | متحرك تحكم في الزوايا المستديرة للصورة في وضع العرض مثال
edge رقم سطح المكتب | متحرك يتحكم في المسافة من حافة الشاشة في وضع العرض مثال
  • دورة الحياة
عناصر التكوين يكتب القيمة الافتراضية يصف مثال
onBrowsing Func (التصفح) => {} طريقة دورة الحياة ، والتي تسمى عند عرضها/إخفاءها ، ستعود إلى حالة العرض مثال
onZooming Func (التكبير) => {} سيتم إعادة طريقة دورة الحياة ، والتي تسمى عند التكبير/خارج ، إلى حالة التكبير مثال
onSwitching Func (الترحيل) => {} طريقة دورة الحياة ، والتي تسمى عند تبديل الصور ، ستعيد رقم الصفحة مثال
onRotating Func (DEG) => {} طريقة دورة الحياة ، التي تسمى عند تدوير الصورة ، ستعيد الزاوية مثال

src

 "http://zmage.caldis.me/imgSet/childsDream/demo.jpg"

alt

 "图片的占位文字，作为图片的标题, 请尽量保持简短"

set

 // 如果设置了 Set, 则进入查看模式后第一张图片将会是 set 的首图, 而不是 src
// 如果你需要在查看模式中呈现高精度图片, 可以将其设置为 set 的首图, 或使用 defaultPage 指定
set = { [
    {
        // 图片 Url
        src : "http://zmage.caldis.me/imgSet/childsDream/1.jpg" ,
        // 图片占位文字
        alt : "图片的占位文字，作为图片的标题, 请尽量保持简短" ,
        // 图片样式
        style : { borderRadius : 30 } ,
        // 图片类名
        className : 'testClassName'
    } ,
    {
        // 另一个图片 Url
        src : "http://zmage.caldis.me/imgSet/childsDream/2.jpg" ,
        // 另一段图片占位文字
        alt : "图片的占位文字，作为图片的标题, 请尽量保持简短" ,
    }
] }

defaultPage

set: [
    {
        // 图片 Url
        src : "http://zmage.caldis.me/imgSet/childsDream/1.jpg" ,
        // 图片占位文字
        alt : "图片的占位文字，尽量保持简短，描述图片作用" ,
    }
]

browsing

 browsing = { this . state . contrlledZmageState }

controller

 controller = { {
    // 关闭按钮
    close : true ,
    // 缩放按钮
    zoom : true ,
    // 下载按钮
    download : true ,
    // 旋转按钮
    rotate : true ,
    // 翻页按钮
    flip : true ,
    // 多页指示
    pagination : true ,
} }

hotKey

 hotKey = { {
    // 关闭（ESC）
    close : true ,
    // 缩放（空格）
    zoom : true ,
    // 翻页（左右）
    flip : true ,
} }

animate

 animate = { {
    flip : 'fade' ,
} }

backdrop

 backdrop = "linear-gradient(90deg, rgba(0,212,255,1) 0%, rgba(26,94,215,1) 100%)"

zIndex

 zIndex = { 19260817 }

radius

 radius = { 5 }

edge

 edge = { 20 }

onBrowsing

 onBrowsing = { state => {
    console . info ( "Browsing State: " , state )
} }

onZooming

 onZooming = { state => {
    console . info ( "Zooming State: " , state )
} }

onSwitching

 onSwitching = { page => {
    console . info ( "Switching page: " , page )
} }

onRotating

 onRotating = { deg => {
    console . info ( "Rotating State: " , deg , "deg" )
} }

يساهم

نرحب دائمًا بإطلاق العلاقات العامة لمساعدتنا على تحسين الرمز. إذا وجدت أي مشاكل ، فنحن نرحب أيضًا بإطلاق مشكلة لتقديم ملاحظات حول آرائك.

يقتبس

- [أيقونات المواد] (https://material.io/tools/icons/)

شهادة

يعتمد React-Zmage على معهد ماساتشوستس للتكنولوجيا المرخصة

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل