홈페이지>웹사이트 구축 리소스>웹사이트 데이터
다운로드

반응-Zmage

React-Zmage는 React 기반 이미지 스케일링 제어입니다. ZMAGE 태그로 포장 된 이미지는 스케일링 될 수 있습니다. 이 컨트롤을 사용하여 기본 IMG 태그를 대체하고 이미지 스케일링 기능을 포함 할 수 있습니다.

React 버전은 v16.6.0보다 크관이어야합니다

데모

온라인

https://zmage.caldis.me

현지의 

git clone https://github.com/Caldis/react-zmage
cd react-zmage
npm i
npm run dev

설치하다 

npm i react-zmage --save

사용

1. 구성 요소를 소개합니다 

 import Zmage from 'react-zmage'

2. 페이지의 IMG 태그를 zmage 구성 요소로 바꾸십시오. 

 < img src = "图片源连接" />
? to ?
< Zmage src = "图片源连接" / >
이제이 사진들은 확대되고 볼 수 있습니다!

기능 통화를 통해 그림을 호출 할 수도 있습니다 

 // Zmage.browsing 函数接受的参数与 <Zmage/> 组件完全一致
< a onClick = { ( ) => Zmage . browsing ( { src : imagePath } ) } >任意元素</ a >

typescript 에서 사용합니다 

 import ReactZmage from 'react-zmage' ;

// 在生命周期等方法中使用
public componentDidMount ( ) {
    const zmage = new ReactZmage ( {
        // ...options
    } ) ;
}

// 也支持组件方式使用
public render ( ) : JSX . Element {
    const defaultConfig = {
        src : 'http://zmage.caldis.me/imgSet/childsDream/demo.jpg' ,
        alt : '示例图片' ,
    } ;

    return (
        < ReactZmage
            { ... defaultConfig }
        / >
    ) ;
}

기본 구성

지금 시작하십시오. 다음 매개 변수를 알아야 만하면 충분합니다.

온라인 예는 https://zmage.caldis.me를 참조하십시오

  • 기본 통화 속성
구성 항목 유형 기본값 설명하다 예
src 끈 "" " img 태그의 src 속성과 동일한 이미지 URL 예
alt 끈 "" " img 태그의 alt 속성과 동일한 이미지 자리 표시 자 텍스트 예
set 물체[] [] 시퀀스 사진, 여러 이미지 객체를 set 하여 여러 이미지를보기 모드로 렌더링하거나 확대 된 고화질 사진을 렌더링하는 데 사용할 수 있습니다. 예
defaultPage 숫자 0 set 전달되어 여러 이미지를 표시하면 열린 후 기본 페이지를 지정하는 데 사용될 수 있습니다. 예

고급 구성

이러한 매개 변수를 이해하지 않고 사용하기가 매우 쉽지만 자세한 사용자 정의가 필요한 경우 다음 내용을 추가로 검토 할 수 있습니다.
  • 사전 설정 구성 (베타)
구성 항목 유형 기본값 설명하다 예
preset 끈 "자동" auto desktop mobile 로 설정할 수있는 인터페이스의 기능과 스타일을 쉽게 구성합니다. 예제 영향을받는 구성 항목
  • 제어 된 특성
구성 항목 유형 기본값 설명하다 예
browsing 부울 비어 있는 시청 모드에 들어갈지 여부를 제어합니다 예
  • 기능 제어
구성 항목 유형 기본값 설명하다 예
controller 확인하다 데스크탑 | 이동하는 뷰 모드에서 조작 컨트롤을 숨기려면 특정 항목을 false 로 설정합니다. 예
hotKey 확인하다 데스크탑 | 이동하는 뷰 모드에서 바로 가기 키를 비활성화하려면 특정 항목을 false 로 설정합니다. 예
animate 확인하다 데스크탑 | 이동하는 페이지 회전 애니메이션을 지정하기 위해 특정 매개 변수를 전달합니다 (현재 구성 가능하지 않음) 선택 사항 값 예
  • 인터페이스 스타일
구성 항목 유형 기본값 설명하다 예
backdrop 끈 "#ffffff" 확대 된 사진 후에 배경색을 제어하십시오 예
zIndex 숫자 1000 다른 요소에 의해 가려지는 것을 방지하기 위해 외부 컨테이너의 z-index 제어합니다. 예
radius 숫자 데스크탑 | 이동하는 보기 모드에서 그림의 둥근 모서리 제어 예
edge 숫자 데스크탑 | 이동하는 보기 모드에서 화면 가장자리에서 거리를 제어합니다. 예
  • 수명주기
구성 항목 유형 기본값 설명하다 예
onBrowsing func (브라우징) => {} 표시/숨길 때 호출되는 수명주기 방법은 디스플레이 상태를 반환합니다. 예
onZooming func (축소) => {} 확대/출력시 호출되는 수명주기 방법은 줌 상태로 반환됩니다. 예
onSwitching func (페이징) => {} 사진을 전환 할 때 호출되는 수명주기 방법은 페이지 번호를 반환합니다. 예
onRotating func (deg) => {} 그림을 회전 할 때 호출되는 수명주기 방법은 각도를 반환합니다. 예

src

 "http://zmage.caldis.me/imgSet/childsDream/demo.jpg"

alt

 "图片的占位文字，作为图片的标题, 请尽量保持简短"

set

 // 如果设置了 Set, 则进入查看模式后第一张图片将会是 set 的首图, 而不是 src
// 如果你需要在查看模式中呈现高精度图片, 可以将其设置为 set 的首图, 或使用 defaultPage 指定
set = { [
    {
        // 图片 Url
        src : "http://zmage.caldis.me/imgSet/childsDream/1.jpg" ,
        // 图片占位文字
        alt : "图片的占位文字，作为图片的标题, 请尽量保持简短" ,
        // 图片样式
        style : { borderRadius : 30 } ,
        // 图片类名
        className : 'testClassName'
    } ,
    {
        // 另一个图片 Url
        src : "http://zmage.caldis.me/imgSet/childsDream/2.jpg" ,
        // 另一段图片占位文字
        alt : "图片的占位文字，作为图片的标题, 请尽量保持简短" ,
    }
] }

defaultPage

set: [
    {
        // 图片 Url
        src : "http://zmage.caldis.me/imgSet/childsDream/1.jpg" ,
        // 图片占位文字
        alt : "图片的占位文字，尽量保持简短，描述图片作用" ,
    }
]

browsing

 browsing = { this . state . contrlledZmageState }

controller

 controller = { {
    // 关闭按钮
    close : true ,
    // 缩放按钮
    zoom : true ,
    // 下载按钮
    download : true ,
    // 旋转按钮
    rotate : true ,
    // 翻页按钮
    flip : true ,
    // 多页指示
    pagination : true ,
} }

hotKey

 hotKey = { {
    // 关闭（ESC）
    close : true ,
    // 缩放（空格）
    zoom : true ,
    // 翻页（左右）
    flip : true ,
} }

animate

 animate = { {
    flip : 'fade' ,
} }

backdrop

 backdrop = "linear-gradient(90deg, rgba(0,212,255,1) 0%, rgba(26,94,215,1) 100%)"

zIndex

 zIndex = { 19260817 }

radius

 radius = { 5 }

edge

 edge = { 20 }

onBrowsing

 onBrowsing = { state => {
    console . info ( "Browsing State: " , state )
} }

onZooming

 onZooming = { state => {
    console . info ( "Zooming State: " , state )
} }

onSwitching

 onSwitching = { page => {
    console . info ( "Switching page: " , page )
} }

onRotating

 onRotating = { deg => {
    console . info ( "Rotating State: " , deg , "deg" )
} }

기여하다

우리는 항상 코드를 개선하는 데 도움이되는 PR을 출시 할 수 있습니다. 문제가있는 경우 귀하의 의견에 대한 피드백을 제공하기 위해 문제를 시작할 수 있습니다.

인용하다

- [재료 아이콘] (https://material.io/tools/icons/)

자격증

React-Zmage는 MIT 라이센스를 기반으로합니다

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체