تنزيل image - تنزيل رمز مصدر image

image

شفرة المصدر الأخرى

v7.11.0

تنزيل

RC-IMAGE

رد فعل الصورة.

ميزة

ثَبَّتَ

الاستخدام

npm install
npm start

 import Image from 'rc-image' ;

export default ( ) => (
  < Image src = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" / >
) ;

API

اسم	يكتب	تقصير	وصف
معاينة	منطقية \| المعاينة	حقيقي	ما إذا كان لإظهار المعاينة
البادئة	خيط	RC-IMAGE	بادئة اسم className
عنصر نائب	منطقية \| رد الفعل	-	إذا كان `true` سيقوم بتعيين عنصر نائب افتراضي أو استخدام مجموعة `ReactElement` تخصيص العنصر النائب
احتياطي	خيط	-	فشل تحميل SRC
PreviewPrefixCls	خيط	RC-DISE-PREVIEW	معاينة بادئة اسم classname
onerror	(الحدث: الحدث) => باطل	-	تحميل فاشلة رد الاتصال

المعاينة

اسم	يكتب	تقصير	وصف
مرئي	منطقية	-	سواء كانت المعاينة مفتوحة أم لا
CloseCon	React.ReactNode	-	أيقونة إغلاق مخصصة
SRC	خيط	-	تخصيص معاينة SRC
متحرك	منطقية	حقيقي	تمكين السحب
scalestep	رقم	0.5	العدد الذي يتم فيه زيادة المقياس أو انخفاضه
minscale	رقم	1	مقياس دقيقة
maxscale	رقم	50	أقصى مقياس
الممتد	منطقية	-	قوة عرض معاينة
getContainer	سلسلة \| htmlelement \| (() => htmlelement) \| خطأ شنيع	document.body	إرجاع عقدة جبل للمعاينة
تصوير	(OriginalNode: React.ReactElement ، info: {transfor	-	تخصيص الصورة
أدوات	(OriginalNode: React.ReactElement ، info: حذف <toolbarrenderInfotype ، 'current' \| 'total'>) => React.ReactNode	-	تخصيص شريط الأدوات
onvisiblechange	(مرئي: منطقية ، مسببة: منطقية) => باطلة	-	رد الاتصال عندما يتم تغيير مرئي
ontransform	{transform: transformtype ، الإجراء: TransformAction}	-	رد الاتصال عند تغيير التحويل

Image.PreviewGroup

معاينة SRC المدمجة

 import Image from 'rc-image' ;

export default ( ) => (
  < Image . PreviewGroup >
    < Image src = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" / >
    < Image src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ" / >
  < / Image . PreviewGroup >
) ;

API

اسم	يكتب	تقصير	وصف
معاينة	منطقية \| معاينة GroupType	حقيقي	ما إذا كان لإظهار المعاينة ، الحالي: إذا كانت معاينة فهرس العرض IMG ، افتراضي 0
PreviewPrefixCls	خيط	RC-DISE-PREVIEW	معاينة بادئة اسم classname
أيقونات	{[iconkey]؟: ReactNode}	-	الرموز في شريط التشغيل العلوي ، Iconkey: 'Rotateleft' \| 'Rotateright' \| 'Zoomin' \| 'Zoomout' \| "إغلاق" \| "اليسار" \| 'يمين'
احتياطي	خيط	-	فشل تحميل SRC
أغراض	(String \| {Src: String ، Alt: String ، Crossorigin: String ، ...}) []	-	مجموعة المعاينة

معاينة GroupType

اسم	يكتب	تقصير	وصف
مرئي	منطقية	-	سواء كانت المعاينة مفتوحة أم لا
متحرك	منطقية	حقيقي	تمكين السحب
حاضِر	رقم	-	الفهرس الحالي
CloseCon	React.ReactNode	-	أيقونة إغلاق مخصصة
scalestep	رقم	0.5	العدد الذي يتم فيه زيادة المقياس أو انخفاضه
minscale	رقم	1	مقياس دقيقة
maxscale	رقم	50	أقصى مقياس
الممتد	منطقية	-	قوة عرض معاينة
getContainer	سلسلة \| htmlelement \| (() => htmlelement) \| خطأ شنيع	document.body	إرجاع عقدة جبل للمعاينة
البلد	(الحالي: الرقم ، المجموع: الرقم) => ReactNode	-	تخصيص العد
تصوير	(OriginalNode: React.ReactElement ، info: {transform: transformtype ، current: number}) => React.ReactNode	-	تخصيص الصورة
أدوات	(OriginalNode: React.ReactElement ، معلومات: ToolbarrenderInfotype) => React.ReactNode	-	تخصيص شريط الأدوات
onvisiblechange	(مرئي: منطقية ، مسببة: منطقية ، التيار: رقم) => باطل	-	رد الاتصال عندما يتم تغيير مرئي
ontransform	{transform: transformtype ، الإجراء: TransformAction}	-	رد الاتصال عند تغيير التحويل

TransformType

 {
  x: number ;
  y: number ;
  rotate: number ;
  scale: number ;
  flipX: boolean ;
  flipY: boolean ;
}

تحول

 type TransformAction =
  | 'flipY'
  | 'flipX'
  | 'rotateLeft'
  | 'rotateRight'
  | 'zoomIn'
  | 'zoomOut'
  | 'close'
  | 'prev'
  | 'next'
  | 'wheel'
  | 'doubleClick'
  | 'move'
  | 'dragRebound' ;

ToolbarrenderInfotype

 {
  icons: {
    prevIcon ?: React . ReactNode ;
    nextIcon?: React . ReactNode ;
    flipYIcon: React . ReactNode ;
    flipXIcon: React . ReactNode ;
    rotateLeftIcon: React . ReactNode ;
    rotateRightIcon: React . ReactNode ;
    zoomOutIcon: React . ReactNode ;
    zoomInIcon: React . ReactNode ;
  } ;
  actions: {
    onActive ?: ( offset : number ) => void ;
    onFlipY : ( ) => void ;
    onFlipX : ( ) => void ;
    onRotateLeft : ( ) => void ;
    onRotateRight : ( ) => void ;
    onZoomOut : ( ) = > void ;
    onZoomIn : ( ) = > void ;
    onClose : ( ) = > void ;
    onReset : ( ) = > void ;
  } ;
  transform: {
    x: number ;
    y: number ;
    rotate: number ;
    scale: number ;
    flipX: boolean ;
    flipY: boolean ;
  } ,
  current: number ;
  total: number ;
}