iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
1
Modern Web

大內魔術 Blazor - 誰說前端一定要寫JS系列 第 19

魔術技巧 - 版型配置

  • 分享至 

  • xImage
  •  

今天要來介紹元件的版面配置,透過版面配置元件來設置元件的版型,例如版型中的排版只有頁首(公司的名稱、LOGO 等等訊息)、頁尾(關於我們、聯絡我們等等訊息)、跟中間兩欄(一欄導覽列、一欄內容),或者其他常見的版型都可以透過此方法,來使真正差異部分(通常是內容)以外的地方能夠重複利用。


建立一個版面配置元件最重要的地方,就是當有元件需要使用版面配置元件時,其內容應該顯示在什麼位置,而在 Blazor WebAssembly 中只需要繼承 LayoutComponentBase 並藉由其 Body 屬性即可,這個屬性用於取得在版面配置內被渲染的內容,也就是使用這個版面配置元件的元件。

簡單說要建立版面配置元件只需要:

@* CustomLayout.razor *@
@inherits LayoutComponentBase

<p>CustomLayout</p>
@Body

這樣就完成了,是不是很簡單呀?而如果要使用版面配置元件,只需要透過 @layout 指示詞來指定版型配置元件,就能將內容渲染在 @Body 位置上。

@layout CustomLayout

使用版型配置元件也是可以巢狀疊加使用的:

@* CustomLayout2 *@
@inherits LayoutComponentBase
@layout CustomLayout

<p>CustomLayout2</p>

@Body

使用 CustomLayout2 作為版型配置時,就將元件放置到 CustomLayout2Body 裡面,然後再放置到 CustomLayoutBody 裡面,就是這麼簡單!

除了在元件上使用 @layout 來指定版型配置,也別忘了在介紹路由時有提到,使用路由元件時也能夠設置預設的版面配置元件。

但如果你接手前人的專案,發現元件本身與路由元件都沒有設置版型配置,而畫面卻渲染出版型配置,別忘了一開始提到的 _imports.razor 檔案,在該元件的目錄下的 _imports.razor 檔案裡面有沒有使用 @layout 來指定版面配置元件。

這邊提一下 _imports.razor,其實我們可以在每一個資料夾中增加此檔案,除了根目錄下的 _imports.razor 代表全域外, _imports.razor 只作用於該資料夾的 razor 檔案,所以我們一個專案是可以有多個 _imports.razor 檔案的,也就是每一個功能資料夾下,都有一份屬於該功能範圍的共用內容檔案,並不用全部都放到全域裡。

而上面說只找該元件目錄下的 _imports.razor 即可是因為,如果在全域中使用 @layout 指示詞,則會發生版型配置元件使用了自己的版型配置,產生循環參考這個錯誤,所以在使用 _imports.razor 來宣告該功能的所有畫面的版面配置時,也需要避免使用了自家的版面配置。


以上就是版型配置元件的介紹,對於版型配置來說,主要成分都是 HTML 與 CSS,所以如果想知道更多,建議去找別人的版型文章閱讀,而我今天的範例程式碼 - day19,是依照一開始的介紹文刻了一個對應的版型,也可以去看看。

這邊再提一點,雖然現在還無法使用,但我看 PR 上討論還滿熱烈的,搞不好以後會有獨立的 CSS 區塊如:

@css {
  body {
    // ...
  }
}

甚至是抽離出來當成 xxx.razor.css 檔案,讓 css 的管理更加容易,大家一起拭目以待吧!

感謝大家的閱讀,我們明天見。

參考資料
ASP.NET Core Blazor 版面配置
CSS Isolation in Blazor Components #10170


上一篇
魔術技巧 - 取得元件參考
下一篇
相依性注入魔術
系列文
大內魔術 Blazor - 誰說前端一定要寫JS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言