image

image

Anderer Quellcode

v7.11.0

Herunterladen

RC-Image

Bild reagieren.

Besonderheit

installieren

Verwendung

npm install
npm start

 import Image from 'rc-image' ;

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

API

Name	Typ	Standard	Beschreibung
Vorschau	boolean \| VorschauType	WAHR	Ob Sie Vorschau anzeigen möchten
Präfixcls	Saite	RC-Image	Klassenname Präfix
Platzhalter	boolean \| Reaktelung	- -	Wenn `true` Standard -Platzhalter festlegt oder den Platzhalter `ReactElement` -Set -Anpassung verwendet
zurückgreifen	Saite	- -	Last fehlgeschlagen Src
PreviewPrefixcls	Saite	RC-Image-Präview	Vorschau -Klassenname Präfix
onError	(Ereignis: Ereignis) => void	- -	Load fehlgeschlagener Rückruf

VorschauType

Name	Typ	Standard	Beschreibung
sichtbar	boolean	- -	Ob die Vorschau geöffnet ist oder nicht
Closeicon	React.Reactnode	- -	Benutzerdefiniertes Schließen -Symbol
src	Saite	- -	Passen Sie die Vorschau SRC an
beweglich	boolean	WAHR	Drag aktivieren
Skalestep	Nummer	0,5	Die Zahl, zu der die Skala erhöht oder verringert wird
Minscale	Nummer	1	Min -Skala
Maxscale	Nummer	50	Maximale Skala
Forcerender	boolean	- -	Force Render Preview
GetContainer	String \| Htmlelement \| (() => Htmlelement) \| FALSCH	Dokument.body	Geben Sie den Mountknoten für die Vorschau zurück
Imagator	(Originalnode: React.Reactelement, Info: {Transformation: TransformType}) => react.reactnode	- -	Bild anpassen
ToolBarrender	(Originalnode: React.Reactelement, Info: weglassen <ToolBarrenderInfotype, 'Strom' \| 'Gesamt'>) => react.reactnode	- -	Die Symbolleiste anpassen
Onvissiblechange	(sichtbar: boolean, vorsichtig: boolean) => void	- -	Rückruf, wenn sichtbar geändert wird
Ontransform	{Transformation: TransformType, Aktion: TransformAction}	- -	Rückruf, wenn die Transformation geändert wird

Image.PreviewGroup

Vorschau des zusammengeführten 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

Name	Typ	Standard	Beschreibung
Vorschau	boolean \| PreviewgroupType	WAHR	Ob Vorschau anzeigen, Aktueller: Wenn Vorschau des IMG -Index anzeigen, Standard 0
PreviewPrefixcls	Saite	RC-Image-Präview	Vorschau -Klassenname Präfix
Ikonen	{[iconkey] ?: reactnode}	- -	Symbole in der oberen Operationsleiste, Iconkey: 'Rotateleft' \| 'Rotheright' \| 'zoomin' \| 'Zoomout' \| 'Close' \| 'links' \| 'Rechts'
zurückgreifen	Saite	- -	Last fehlgeschlagen Src
Artikel	(String \| {Src: String, Alt: String, Crossorigin: String, ...}) []	- -	Vorschau -Gruppe

PreviewgroupType

Name	Typ	Standard	Beschreibung
sichtbar	boolean	- -	Ob die Vorschau geöffnet ist oder nicht
beweglich	boolean	WAHR	Drag aktivieren
aktuell	Nummer	- -	Aktueller Index
Closeicon	React.Reactnode	- -	Benutzerdefiniertes Schließen -Symbol
Skalestep	Nummer	0,5	Die Zahl, zu der die Skala erhöht oder verringert wird
Minscale	Nummer	1	Min -Skala
Maxscale	Nummer	50	Maximale Skala
Forcerender	boolean	- -	Force Render Preview
GetContainer	String \| Htmlelement \| (() => Htmlelement) \| FALSCH	Dokument.body	Geben Sie den Mountknoten für die Vorschau zurück
Country	(Strom: Zahl, Gesamt: Zahl) => ReactNode	- -	Zählung anpassen
Imagator	(Originalnode: React.Reactelement, Info: {Transform: TransformType, Strom: Nummer}) => react.reactnode	- -	Bild anpassen
ToolBarrender	(Originalnode: React.Reactelement, Info: ToolBarrenderInfotyp) => react.reactnode	- -	Die Symbolleiste anpassen
Onvissiblechange	(sichtbar: boolean, vorsichtig: boolean, Strom: Nummer) => void	- -	Rückruf, wenn sichtbar geändert wird
Ontransform	{Transformation: TransformType, Aktion: TransformAction}	- -	Rückruf, wenn die Transformation geändert wird

TransformType

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

Transformaktion

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