今天要來介紹元件的版面配置,透過版面配置元件來設置元件的版型,例如版型中的排版只有頁首(公司的名稱、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
作為版型配置時,就將元件放置到 CustomLayout2
的 Body
裡面,然後再放置到 CustomLayout
的 Body
裡面,就是這麼簡單!
除了在元件上使用 @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