topcat 姍舞之間的極度凝聚

緣起

AdminLTE是一套免費的Bootstrap的Theme，之前小喵的MVC是套用這個Theme來開發內部的應用系統。既然Blazor也是透過Bootstrap來設計UI介面，當然就不免俗的也來套用一下。

下載AdminLTE

這套Bootstrap佈景，在小喵使用的這一刻，是免費的。相關的資訊小喵提供如下：

• 官方網站：https://adminlte.io/
• 線上示範預覽：https://adminlte.io/themes/AdminLTE/index2.html
• 下載：https://github.com/ColorlibHQ/AdminLTE/releases

點選下載頁面後，找到正式釋出的版本，下載並解壓縮，就可以得到相關的範例html與其他相關檔案。

套用過程

套用過程有點繁複，不容易用文字說明，因此小喵把過程錄製下來，有需要的朋友直接看影片，有必要就暫停觀看。

影片網址：https://youtu.be/JMkwRfaJQcU

render-mode=Server導致Menu展開收合失效的問題

由於小喵的權限控管是使用自訂的驗證授權機制，有興趣的朋友可以到小喵這一篇看【[Blazor][筆記][權限] Blazor 自訂驗證與授權】，其中render-mode必須使用【Server】而非預設的【ServerPrerendered】，所以在套用成功後，小喵自然要把render-mode改為【Server】，不過這一改就發現一個糟糕的問題，就是左邊的Menu部分，他的展開收和失效了。相關情況請參考以下的影片

不過這個部分，小喵後來改成用 component 來產生，所以展開收合的部分就由該 component 處理，這部分，小喵會另外寫一篇文章來說明，文章連結如下。

[Blazor][筆記]透過 component 來實現無限層的左方Menu列表

末記

相關的套用，小喵在網路上也有看到有一個影片也有類似的操作示範，影片連結如下：

https://youtu.be/8BIseB-qK_8

另外，小喵也在搜尋資料過程中，發現有人把AdminLTE的內容寫成一個個的component來使用。小喵沒有仔細研究，提供給有興趣的朋友去參考看看，相關網址如下：

https://github.com/sjefvanleeuwen/blazor-adminlte

 

 

 

---

以下是簽名：

• 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
• 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
  • http://converter.telerik.com/
  • http://www.carlosag.net/tools/codetranslator/
  • http://www.developerfusion.com/tools/convert/vb-to-csharp/

---

Microsoft MVP Visual Studio and Development Technologies (2005~2019/6)

topcat Blog:http://www.dotblogs.com.tw/topcat