image

RC-Image

Reaksi gambar.

Fitur

• Placeholder
• Pratinjau
• Memutar
• Zoom
• Membalik
• Fallback
• Beberapa pratinjau

memasang

Penggunaan

npm install
npm start

 import Image from 'rc-image' ;

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

API

Nama	Jenis	Bawaan	Keterangan
pratinjau	Boolean | Pratinjau	BENAR	Apakah akan menampilkan pratinjau
awalan	rangkaian	RC-Image	Awalan classname
placeholder	Boolean | Reactelement	-	Jika true akan menetapkan placeholder default atau menggunakan ReactElement himpunan penyesuaian placeholder
Fallback	rangkaian	-	Load Gagal SRC
PreviewPrefixcls	rangkaian	RC-Image-Preview	Pratinjau Prefix ClassName
Onerror	(acara: acara) => void	-	Muat panggilan balik yang gagal

Pratinjau

Nama	Jenis	Bawaan	Keterangan
bisa dilihat	Boolean	-	Apakah pratinjau terbuka atau tidak
closeicon	React.reactnode	-	Ikon Tutup Kustom
SRC	rangkaian	-	Kustomisasi Pratinjau SRC
bergerak	Boolean	BENAR	Aktifkan drag
Scalestep	nomor	0,5	Jumlah skala meningkat atau menurun
MinScale	nomor	1	Skala min
MaxScale	nomor	50	Skala maksimal
Forcerender	Boolean	-	Pratinjau Render Force
GetContainer	String | Htmlelement | (() => Htmlelement) | PALSU	Document.Body	Kembalikan node mount untuk pratinjau
imagerender	(OriginalNode: react.reactElement, info: {transform: transformType}) => react.reactNode	-	Kustomisasi gambar
Toolbarrender	(OriginalNode: react.reactelement, info: oMit <toolbarrenderInfotype, 'saat ini' | 'total'>) => react.reactnode	-	Kustomisasi toolbar
Onvisiblechange	(Visible: Boolean, PrevVisible: Boolean) => void	-	Panggilan balik saat terlihat diubah
Ontransform	{Transform: TransformType, Action: Transformaction}	-	Panggilan balik saat transformasi diubah

Image.PreviewGroup

Pratinjau SRC yang digabungkan

 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

Nama	Jenis	Bawaan	Keterangan
pratinjau	Boolean | PreviewGrouptype	BENAR	Apakah akan menampilkan pratinjau, Saat ini: Jika Pratinjau SHOW IMG INDEX, DEFAULT 0
PreviewPrefixcls	rangkaian	RC-Image-Preview	Pratinjau Prefix ClassName
ikon	{[iconkey]?: reactnode}	-	Ikon di bilah operasi teratas, ikonkey: 'rotateleft' | 'Rotateright' | 'Zoomin' | 'Zoomout' | 'Tutup' | 'Kiri' | 'Kanan'
Fallback	rangkaian	-	Load Gagal SRC
item	(String | {src: string, alt: string, crossorigin: string, ...}) []	-	grup pratinjau

PreviewGrouptype

Nama	Jenis	Bawaan	Keterangan
bisa dilihat	Boolean	-	Apakah pratinjau terbuka atau tidak
bergerak	Boolean	BENAR	Aktifkan drag
saat ini	nomor	-	Indeks saat ini
closeicon	React.reactnode	-	Ikon Tutup Kustom
Scalestep	nomor	0,5	Jumlah skala meningkat atau menurun
MinScale	nomor	1	Skala min
MaxScale	nomor	50	Skala maksimal
Forcerender	Boolean	-	Pratinjau Render Force
GetContainer	String | Htmlelement | (() => Htmlelement) | PALSU	Document.Body	Kembalikan node mount untuk pratinjau
countrender	(saat ini: angka, total: angka) => reactnode	-	Kustomisasi Hitungan
imagerender	(OriginalNode: react.reactElement, info: {transform: transformType, current: number}) => react.reactnode	-	Kustomisasi gambar
Toolbarrender	(OriginalNode: react.reactElement, info: toolbarrenderInfotype) => react.reactnode	-	Kustomisasi toolbar
Onvisiblechange	(Visible: Boolean, PrevVisible: Boolean, saat ini: angka) => void	-	Panggilan balik saat terlihat diubah
Ontransform	{Transform: TransformType, Action: Transformaction}	-	Panggilan balik saat transformasi diubah

TransformType

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

Transformaksi

 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 ;
} 

Contoh

http: // localhost: 8003/contoh/

Uji kasus

 npm test

Cakupan

 npm run coverage

Lisensi

RC-Image dirilis di bawah lisensi MIT.