MotionZoom
தன் இடத்திலிருந்து முழுத் திரைக்கு zoom ஆகும் படம்; மூட அதை இழுத்து விலக்குங்கள்.
வலைReact NativeOverlay-கள்
முயன்று பாருங்கள்
எடுத்துக்காட்டு தயாராகிறது…
மிகச் சுருக்கமான பயன்பாடு
<MotionZoom
src={photo.thumb}
zoomSrc={photo.full}
width={240}
height={160}
style={{ objectFit: 'cover', borderRadius: 12 }}
/>;இது உங்களுக்காகக் கையாள்வது
- கிளிக், Enter அல்லது Space படத்தை அது இருக்கும் இடத்திலிருந்து
margin-க்குள் திரையை நிரப்ப zoom செய்கிறது. - Zoom ஆன நகல் thumbnail தோற்றத்திலேயே, அதன்
object-fitவெட்டுதல், மூலை ஆரத்துடன் சரியாகத் தொடங்குகிறது. zoomSrcஏற்றப்பட்டதும் மங்கித் தோன்றுகிறது.- கிளிக், Escape அல்லது இழுத்து விலக்குதல் அதை மூடுகிறது; விரைவான வீச்சும் மூடுகிறது, சிறிய இழுத்தல் spring மூலம் திரும்புகிறது.
இதற்குப் பயன்படுத்துங்கள்
- புகைப்பட grid.
- தயாரிப்புக் கேலரி.
- வலைப்பதிவுக் கட்டுரையில் உள்ள படங்கள்.
Props
| Prop | வகை | இயல்புநிலை | விளக்கம் |
|---|---|---|---|
src | string | இடத்தில் காட்டப்படும் படம். | |
zoomSrc | string | ஏற்றப்பட்டதும் காட்டப்படும் பெரிய படம்; அதே விகிதத்தை வையுங்கள். | |
margin | number | 24 | Zoom ஆன படத்தைச் சுற்றி வைக்கப்படும் இடைவெளி, பிக்சல்களில். |
disabled | boolean | false | Zoom-ஐ அணைக்கிறது. |
onZoomChange | (zoomed) => void | Zoom ஆனதும் true, மூடியதும் false உடன் இயங்குகிறது. | |
backdropStyle | CSSProperties | Backdrop-க்கான inline style. | |
transition | Transition | spring | நேர வளைவு { duration, easing } அல்லது spring { tempo: 'spring', spring }. spring-கள் இடைமறிக்கப்படும்போது தங்கள் உந்தத்தை வைத்திருக்கின்றன. |
மற்ற props ரெண்டர் ஆகும் உறுப்புக்குச் செல்கின்றன; அதனால் className, style, நிகழ்வுக் கையாளிகள் வழக்கம்போல் இயங்குகின்றன.
வலையும் React Native-உம்
Overlay zoom ஆகியிருக்கும்போது மட்டுமே இருக்கிறது (வலையில் மேல் அடுக்கு dialog); அதனால் படம் எங்கும், பத்திக்குள்ளும் இருக்கலாம். மற்ற props img-க்குச் செல்கின்றன.
React Native-இல் source, zoomSource கொடுங்கள்; overlay ஒளிபுகும் Modal.