image

RC-Image

Реагировать изображение.

Особенность

• Заполнитель
• Предварительный просмотр
• Повернуть
• Зум
• Подбросить
• Отступать
• Несколько предварительного просмотра

установить

Использование

npm install
npm start

 import Image from 'rc-image' ;

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

API

Имя	Тип	По умолчанию	Описание
предварительный просмотр	логический | Предварительный просмотр	истинный	Показать предварительный просмотр
Prefixcls	нить	RC-Image	Префикс класса
заполнитель	логический | Реагирование	-	Если true установит заполнителя по умолчанию или использует настройку ReactElement настройка заполнителя
отступать	нить	-	Нагрузка не удалась SRC
previewprefixcls	нить	RC-Image-Preview	Предварительный просмотр префикс класса
Onerror	(событие: событие) => void	-	Неудачный обратный вызов загрузки

Предварительный просмотр

Имя	Тип	По умолчанию	Описание
видимый	логический	-	Открыт ли предварительный просмотр или нет
Closeicon	React.ReactNode	-	Пользовательский значок закрытия
SRC	нить	-	Настроить предварительный просмотр SRC
подвижный	логический	истинный	Включить перетаскивание
Scalestep	число	0,5	Число, до которого масштаб увеличивается или уменьшается
Minscale	число	1	Мин шкала
MAXSCALE	число	50	Максимальная шкала
пожизненный	логический	-	Предварительный просмотр силового рендеринга
GetContainer	строка | Htmlelement | (() => Htmlelement) | ЛОЖЬ	Документ.body	Вернуть узел Mount для предварительного просмотра
Imagerender	(OriginalNode: React.ReactElement, Info: {Transform: TransformType}) => React.ReactNode	-	Настроить изображение
инструментальный бордер	(OriginalNode: React.ReactElement, Info: omit <toolBarrenderInfotype, 'current' | 'total'>) => React.ReactNode	-	Настройте панель инструментов
onvisiblechange	(Видимо: логический, предварительный: логический) => void	-	Обратный вызов, когда видимый изменяется
ontransform	{Transform: TransfortType, Action: 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

Имя	Тип	По умолчанию	Описание
предварительный просмотр	логический | PreviewGrouptype	истинный	Показать предварительный просмотр, Текущий: если просмотрите Show Img Index, по умолчанию 0
previewprefixcls	нить	RC-Image-Preview	Предварительный просмотр префикс класса
значки	{[Iconkey]?: ReactNode}	-	Значки в верхней операции, иконе: 'rotateleft' | 'utateright' | 'Zoomin' | 'Zoomout' | 'Close' | 'Left' | 'верно'
отступать	нить	-	Нагрузка не удалась SRC
предметы	(String | {src: String, alt: String, Crossorigin: String, ...}) []	-	Предварительная группа

PreviewGrouptype

Имя	Тип	По умолчанию	Описание
видимый	логический	-	Открыт ли предварительный просмотр или нет
подвижный	логический	истинный	Включить перетаскивание
текущий	число	-	Текущий индекс
Closeicon	React.ReactNode	-	Пользовательский значок закрытия
Scalestep	число	0,5	Число, до которого масштаб увеличивается или уменьшается
Minscale	число	1	Мин шкала
MAXSCALE	число	50	Максимальная шкала
пожизненный	логический	-	Предварительный просмотр силового рендеринга
GetContainer	строка | Htmlelement | (() => Htmlelement) | ЛОЖЬ	Документ.body	Вернуть узел Mount для предварительного просмотра
сельская местность	(Current: число, общее: число) => ReactNode	-	Настраивать счет
Imagerender	(OriginalNode: React.ReactElement, Info: {Transform: TransformType, Current: Number}) => React.ReactNode	-	Настроить изображение
инструментальный бордер	(OriginalNode: React.ReactElement, Info: ToolBarrenderInfotype) => React.ReactNode	-	Настройте панель инструментов
onvisiblechange	(Видимо: логический, превизимый: логический, ток: число) => void	-	Обратный вызов, когда видимый изменяется
ontransform	{Transform: TransfortType, Action: 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 ;
} 

Пример

http: // localhost: 8003/примеры/

Тестовый случай

 npm test

Покрытие

 npm run coverage

Лицензия

RC-Image выпускается по лицензии MIT.