BootstrapBlazor.Viewer
8.0.1
Prefix Reserved
dotnet add package BootstrapBlazor.Viewer --version 8.0.1
NuGet\Install-Package BootstrapBlazor.Viewer -Version 8.0.1
<PackageReference Include="BootstrapBlazor.Viewer" Version="8.0.1" />
paket add BootstrapBlazor.Viewer --version 8.0.1
#r "nuget: BootstrapBlazor.Viewer, 8.0.1"
// Install BootstrapBlazor.Viewer as a Cake Addin #addin nuget:?package=BootstrapBlazor.Viewer&version=8.0.1 // Install BootstrapBlazor.Viewer as a Cake Tool #tool nuget:?package=BootstrapBlazor.Viewer&version=8.0.1
Blazor Viewer 图片浏览器 组件
封装Viewer.js库
示例:
使用方法:
1.nuget包
BootstrapBlazor.Viewer
2._Imports.razor 文件 或者页面添加 添加组件库引用
@using BootstrapBlazor.Components
3.razor页面
Demo
<Viewerjs />
多图片
<Viewerjs Images='new List<string>() { "photo-2.jpg","photo-1.jpg","photo-3.jpg"}' />
单图片
<Viewerjs Src="@_srcPhoto" Width="600px" Height="300px" />
单图片+简化工具条
<Viewerjs Src="@_srcPhoto" Width="600px" Height="300px" toolbarlite="true" />
多图片+简化工具条
<Viewerjs Images='new List<string>() { "photo-2.jpg","photo-1.jpg","photo-3.jpg"}' toolbarlite="true" />
单图片流
<Viewer SrcStream="imagesStreamList[1]" />
多图片流
<Viewer ImagesStream="imagesStreamList" />
本地单图片,组件流读取
<Viewer Src='@(@"F:\images\objects.jpg")' LocalFileToStream />
4.参数说明
| 类型 | 参数 | 说明 | 默认值 | 备注 |
|---|---|---|---|---|
| bool | UseBuiltinImageDiv | 使用内置图片DIV | true | |
| List<string> | Images | 图片列表DIV | ||
| string | Src | 单图片 | ||
| List<string> | Alts | 图片名称列表 | ||
| bool | toolbarlite | 简化版工具条 | false | |
| string | Height | 高 | 400px | |
| string | Width | 宽 | 400px | |
| string | ID | 组件ID | ||
| List<Stream> | ImagesStream | 图片流列表 | ||
| Stream | SrcStream | 单图片流 | ||
| bool | LocalFileToStream | 使用流读取本地图片 | false |
更新历史
v7.0.2
- 支持流转图片(ImageFromStream), 用于本地项目例如 MAUI Blazor,Blazor hybrid,因为chorome不支持file:///xx 方式显示本地图片
- 添加 ImagesStream : 图片流列表
- SrcStream : 单图片流
- LocalFileToStream : 使用流读取本地图片
Blazor 组件
AlexChow
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net6.0
- Microsoft.AspNetCore.Components.Web (>= 6.0.0)
-
net7.0
- Microsoft.AspNetCore.Components.Web (>= 7.0.0)
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.0)
NuGet packages (2)
Showing the top 2 NuGet packages that depend on BootstrapBlazor.Viewer:
| Package | Downloads |
|---|---|
|
BlazorShared
BlazorMaui , 整合Blazor,BootstrapBlazor UI组件库,Maui的共享跨平台工程示例共享库 |
|
|
BootstrapBlazor.Densen.All
Blazor 组件懒人包 |
GitHub repositories (2)
Showing the top 2 popular GitHub repositories that depend on BootstrapBlazor.Viewer:
| Repository | Stars |
|---|---|
|
densen2014/BlazorMaui
用 c # 和 Razor 创建本机移动应用和桌面应用。使用 Blazor.BB.Maui，可以快速开发共享代码库运行于 Windows (Winforms/WPF/UWP)、Android、iOS、macOS 的应用。
|
|
|
densen2014/BlazorHybrid
关于BlazorHybrid的一切研究. 用 c # 和 Razor 创建本机移动应用和桌面应用。快速开发共享代码库运行于 Windows (Winforms/WPF/UWP)、Android、iOS、macOS、Linux 的应用。
|