refactor: 使用原生下拉框

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -17,8 +17,20 @@
                 <input type="text" class="bb-view-scale" @bind="CurrentScaleString" />
                 <div class="bb-view-icon bb-page-plus"><i class="fa-solid fa-plus"></i></div>
                 <div class="bb-view-divider"></div>
-                <div class="bb-view-icon bb-view-fit-page" @onclick="FitToPage"><i class="fa-solid fa-arrows-left-right-to-line fa-rotate-90"></i></div>
-                <div class="bb-view-icon bb-view-fit-width" @onclick="FitToWidth"><i class="fa-solid fa-arrows-left-right-to-line"></i></div>
+                <div class="bb-view-icon btn-group">
+                    <button type="button" class="btn bb-view-fit-page" @onclick="FitToPage"><i class="fa-solid fa-arrows-left-right-to-line fa-rotate-90"></i></button>
+                    <button type="button" class="btn bb-view-fit-width" @onclick="FitToWidth"><i class="fa-solid fa-arrows-left-right-to-line"></i></button>
+                    <button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                        <span class="visually-hidden">Toggle Dropdown</span>
+                    </button>
+                    <div class="dropdown-menu dropdown-menu-end">
+                        <div class="dropdown-item">page-actual</div>
+                        <div class="dropdown-item">page-width</div>
+                        <div class="dropdown-item">page-height</div>
+                        <div class="dropdown-item">page-fit</div>
+                        <div class="dropdown-item">auto</div>
+                    </div>
+                </div>
                 <div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateLeft"><i class="fa-solid fa-rotate-left"></i></div>
                 <div class="bb-view-icon bb-view-fit-rotate" @onclick="RotateRight"><i class="fa-solid fa-rotate-right"></i></div>
             </div>
@@ -28,17 +40,19 @@
                     <div class="bb-view-icon bb-view-download" @onclick="OnDownload"><i class="fa-solid fa-arrow-right-to-bracket fa-rotate-90"></i></div>
                 }
                 <div class="bb-view-icon bb-view-print"><i class="fa-solid fa-print"></i></div>
-                <Dropdown TValue="string" Color="Color.None" SkipValidate="true" ShowLabel="false"
-                          IsPopover="false" MenuAlignment="Alignment.Right" Icon="@MoreButtonIcon">
-                    <ItemsTemplate>
+                <div class="dropdown">
+                    <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
+                        <i class="@MoreButtonIcon"></i>
+                    </button>
+                    <div class="dropdown-menu shadow dropdown-menu-end">
                         @if (ShowTwoPagesOneViewButton)
                         {
                             <div class="dropdown-item dropdown-item-pages" @onclick="OnToggleTwoPagesOneView"><i class="@_twoPagesOneViewIcon"></i><span>Two pages on view</span></div>
                             <Divider></Divider>
                         }
                         <div class="dropdown-item"><i class="fa-solid fa-fw"></i><span>Document properties</span></div>
-                    </ItemsTemplate>
-                </Dropdown>
+                    </div>
+                </div>
             </div>
         </div>
     }

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css

@@ -18,11 +18,11 @@
         visibility: hidden;
     }
 
-    .bb-view-toolbar ::deep .btn {
+    .bb-view-toolbar .btn {
         --bs-btn-color: #fff;
     }
 
-    .bb-view-toolbar ::deep .dropdown-toggle::after {
+    .bb-view-toolbar .bb-view-controls .dropdown-toggle::after {
         content: none;
     }
 
@@ -43,6 +43,20 @@
         color: #6c757d;
     }
 
+    .bb-view-icon .dropdown-toggle-split {
+        padding-left: 0.25rem;
+        padding-right: 0.25rem;
+    }
+
+    .bb-view-icon.btn-group .btn {
+        --bs-btn-padding-x: 0.5rem;
+    }
+
+    .bb-view-icon.btn-group .dropdown-toggle-split {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
 .bb-view-subject {
     white-space: nowrap;
     display: block;
@@ -59,7 +73,6 @@
     flex-wrap: nowrap;
     align-items: center;
     justify-content: center;
-    overflow: hidden;
 }
 
     .bb-view-body.fit-page .bb-view-fit-page {