https://github.com/anranruye/viewerjsblazor

A blazor wrapper for Viewer.js JavaScript image viewer library
https://github.com/anranruye/viewerjsblazor

blazor component image image-viewer razor viewer viewerjs

Last synced: about 2 months ago
JSON representation

A blazor wrapper for Viewer.js JavaScript image viewer library

• Host: GitHub
• URL: https://github.com/anranruye/viewerjsblazor
• Owner: anranruye
• License: mit
• Created: 2022-02-13T16:43:15.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-03-20T15:38:56.000Z (almost 3 years ago)
• Last Synced: 2024-10-05T05:20:58.612Z (4 months ago)
• Topics: blazor, component, image, image-viewer, razor, viewer, viewerjs
• Language: C#
• Homepage:
• Size: 14.6 KB
• Stars: 3
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ViewerJsBlazor

A blazor wrapper for [Viewer.js](https://github.com/fengyuanchen/viewerjs) JavaScript image viewer library.

## Installation

By Package Manager:

```

Install-Package ViewerJsBlazor -Version 1.0.0

```

By CLI:

```

dotnet add package ViewerJsBlazor --version 1.0.0

```

By PackageReference:

```

```

## Usage

In your `_Host.cshtml` or `index.html` file:

```html

```

In a razor page:

```html

@using ViewerJsBlazor

@*image group*@

    @for (var i = 1; i <= 9; i++)

    {

        


            

        

    }


@*single image*@

@code{

  object options = new { url = "data-original" };

}

```

## API

### `ViewerJsImageGroup`:

The `ViewerJsImageGroup` component will generate a html element as the container of a group of images.

### Properties

razor attributes:

Name | type | description

`ElementType` | `string` | the type of the html element generated by this component, default value is `"div"`

`Options` | `object` | the options of the viewer, you can use an object of anonymous type or a dictionary, see https://github.com/fengyuanchen/viewerjs#options to learn available options

All unmatched attributes will added to the generated html element as html attributes.

### Methods

`void Refresh()` | destory and recreate the viewer

`Task InvokeMethod(string methodName, params object[] paramters)` | invoke a method of the js viewer instance, see https://github.com/fengyuanchen/viewerjs#methods to learn available methods

### `ViewerJsImage`:

The `ViewerJsImage` component will generate an `` element to display an image.

### Properties

razor attributes:

Name | type | description

`Options` | `object` | the options of the viewer, you can use an object of anonymous type or a dictionary, see https://github.com/fengyuanchen/viewerjs#options to learn available options

All unmatched attributes will added to the generated `` element as html attributes.

### Methods

`void Refresh()` | destory and recreate the viewer

`Task InvokeMethod(string methodName, params object[] paramters)` | invoke a method of the js viewer instance, see https://github.com/fengyuanchen/viewerjs#methods to learn available methods