MotionZoom
ऐसी छवि जो अपनी जगह से पूरी स्क्रीन तक ज़ूम होती है; बंद करने के लिए उसे दूर खींचें।
वेबReact Nativeओवरले
आज़माएँ
उदाहरण तैयार हो रहा है…
सबसे छोटा इस्तेमाल
<MotionZoom
src={photo.thumb}
zoomSrc={photo.full}
width={240}
height={160}
style={{ objectFit: 'cover', borderRadius: 12 }}
/>;यह आपके लिए क्या संभालता है
- क्लिक, Enter या Space छवि को उसकी जगह से
marginके भीतर स्क्रीन भरने तक ज़ूम करता है। - ज़ूम की गई प्रति ठीक थंबनेल जैसी शुरू होती है, उसके
object-fitक्रॉप और कोनों की गोलाई के साथ। zoomSrcलोड होने पर उभरता है।- क्लिक, Escape या दूर खींचना उसे बंद करता है; तेज़ फेंकना भी बंद करता है, और छोटा खिंचाव स्प्रिंग से लौट आता है।
इसके लिए इस्तेमाल करें
- फ़ोटो ग्रिड।
- उत्पाद गैलरी।
- ब्लॉग पोस्ट में छवियाँ।
Props
| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
src | string | अपनी जगह पर दिखने वाली छवि। | |
zoomSrc | string | लोड होने पर दिखने वाली बड़ी छवि; वही पहलू अनुपात रखें। | |
margin | number | 24 | ज़ूम की गई छवि के चारों ओर पिक्सेल में जगह। |
disabled | boolean | false | ज़ूम बंद करता है। |
onZoomChange | (zoomed) => void | ज़ूम होने पर true और बंद होने पर false के साथ चलता है। | |
backdropStyle | CSSProperties | बैकड्रॉप की inline स्टाइल। | |
transition | Transition | spring | timing वक्र { duration, easing } या स्प्रिंग { tempo: 'spring', spring }। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं। |
बाक़ी props रेंडर होने वाले एलिमेंट को जाते हैं, इसलिए className, style और इवेंट हैंडलर सामान्य रूप से काम करते हैं।
वेब और React Native
ओवरले सिर्फ़ ज़ूम रहते मौजूद होता है (वेब पर टॉप लेयर डायलॉग), इसलिए छवि कहीं भी हो सकती है, पैराग्राफ़ के भीतर भी। बाक़ी props img को जाते हैं।
React Native में source और zoomSource दें; ओवरले पारदर्शी Modal है।