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।