feat(ImagePreview): support class/style html attirbute (#7032)

Author: ArgoZhang

src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor

@@ -2,7 +2,7 @@
 @inherits BootstrapModuleComponentBase
 @attribute [BootstrapModuleAutoLoader]
 
-<div tabindex="-1" class="bb-previewer collapse active" id="@Id" style="z-index: @ZIndex;">
+<div attributes="@AdditionalAttributes" id="@Id" tabindex="-1" class="@ClassString" style="@StyleString">
     <div class="bb-viewer-mask"></div>
     <div class="bb-viewer-canvas">
         <img src="@GetFirstImageUrl()" class="bb-viewer-img" style="transform: scale(1) rotate(0deg); margin: 0;" />

src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs

@@ -92,6 +92,15 @@ public partial class ImagePreviewer
 
     private bool ShowButtons => PreviewList.Count > 1;
 
+    private string? ClassString => CssBuilder.Default("bb-previewer collapse active")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    private string? StyleString => CssBuilder.Default()
+        .AddClass($"--bb-viewer-zindex: {ZIndex};", ZIndex > 0)
+        .AddStyleFromAttributes(AdditionalAttributes)
+        .Build();
+
     /// <summary>
     /// 显示图片
     /// </summary>

src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.scss

@@ -8,6 +8,7 @@
     right: 0;
     bottom: 0;
     left: 0;
+    z-index: var(--bb-viewer-zindex, 5);
 
     &.active {
         .bb-viewer-full-screen {