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 किंवा ओढून दूर करणे ते बंद करते; जलद फेकही बंद करते, आणि छोटे ओढणे spring ने परत येते.
यासाठी वापरा
- फोटो ग्रिड.
- उत्पादन गॅलरी.
- ब्लॉग पोस्टमधील प्रतिमा.
Props
| Prop | प्रकार | डीफॉल्ट | वर्णन |
|---|---|---|---|
src | string | जागेवर दाखवलेली प्रतिमा. | |
zoomSrc | string | लोड झाल्यावर दाखवली जाणारी मोठी प्रतिमा; तेच गुणोत्तर ठेवा. | |
margin | number | 24 | झूम झालेल्या प्रतिमेभोवती ठेवलेले अंतर, पिक्सेलमध्ये. |
disabled | boolean | false | झूम बंद करते. |
onZoomChange | (zoomed) => void | झूम झाल्यावर true आणि बंद झाल्यावर false सह चालते. | |
backdropStyle | CSSProperties | बॅकड्रॉपसाठी inline style. | |
transition | Transition | spring | टायमिंग वक्र { duration, easing } किंवा spring { tempo: 'spring', spring }. spring व्यत्यय आल्यावर त्यांची गती राखतात. |
इतर props रेंडर होणाऱ्या एलिमेंटकडे जातात, त्यामुळे className, style आणि इव्हेंट हँडलर नेहमीप्रमाणे चालतात.
वेब आणि React Native
ओव्हरले फक्त झूम असतानाच अस्तित्वात असतो (वेबवर वरच्या थरातील dialog), त्यामुळे प्रतिमा कुठेही, परिच्छेदातही, असू शकते. इतर props img कडे जातात.
React Native वर source आणि zoomSource द्या; ओव्हरले पारदर्शक Modal आहे.