react zmage

React-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に基づいています