Giter VIP home page Giter VIP logo

ng-picture-viewer's Introduction

ng-picture-viewer

angular image-viewer based on ng-zorro-antd and iv-viewer

NPM version

Example

Live Example

Usage

1. Install

npm install iv-viewer ng-picture-viewer --save

全局添加第三方样式

@import "~iv-viewer/dist/iv-viewer.min.css"

添加 ImgViewerModule 模块到项目中

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { ImgViewerModule } from 'ng-picture-viewer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    HttpClientModule,
    ImgViewerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Global configuration

ImgViewerModule.forRoot有两个参数制定全局通用配置。

参数 说明 类型 默认值
ivViewerType iv-viewer全局配置,见Options IvViewerType -
imageViewerType 功能提示全局配置,见ImgViewerType ImgViewerType -

ImgViewerType

参数 说明 类型 默认值
zoomInToolTip 放大功能提示 string 放大
zoomOutToolTip 缩小功能提示 string 缩小
rotateLeftToolTip 逆时针功能旋转提示 string 逆时针旋转
rotateRightToolTip 顺时针功能提示 string 顺时针旋转
resetToolTip 重置功能提示 string 重置
fullScreenToolTip 全屏功能提示 string 全屏
downloadToolTip 下载功能提示 string 下载

2. Template

<nz-picture-viewer [images]="images"></nz-picture-viewer>
参数 说明 类型 默认值
[imgViewerClass] 外部样式类 string -
[images] 图片路径数组 string[] []
[showOperate] 是否显示所有操作功能 boolean true
[zoom] 是否显示放大缩小功能 boolean true
[rotate] 是否显示旋转功能 boolean true
[reset] 是否显示重置功能 boolean true
[fullscreen] 是否显示全屏功能 boolean true
[download] 是否显示下载功能 boolean true
[defaultName] 图片下载文件前缀 string download
(prevChange) 切换上一张回调函数 EventEmitter<number> -
(nextChange) 切换下一张回调函数 EventEmitter<number> -

License

The MIT License (see the LICENSE file for the full text)

ng-picture-viewer's People

Contributors

lzhd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

ng-picture-viewer's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.