Применение макетов Blazor

В прошлой части мы создали свой собственный макет для отдельной области приложения. Однако, применять макеты мы можем не только для всей области в целом, но и к отдельным страницам и их частям.

Применение макета к компоненту

Для того, чтобы применить макет к отдельному компоненту, достаточно в коде компонента указать директиву @layout в которой указать название компонента-макета. Например, применим макет AdminLayout.razor, разработанный в прошлой части к компоненту FetchData.razor из шаблонного приложения Blazor Server:

@page "/fetchdata"
@layout AdminLayout

--ТУТ КОД КОМПОНЕНТА--

Теперь можем запустить приложение и убедиться, что макет был применен именно к этому компоненту:

Применение макета к произвольному содержимому

Макет может быть применен также к любой части компонента. Для этого, часть компонента, к которой необходимо применить макет заключается внутрь компонента LayoutView у которого необходимо указать в свойстве Layout требуемый макет. Например, применим наш макет для части компонента Index.razor в которой выводится опрос (компонент SurveyPrompt):

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<LayoutView Layout="@typeof(AdminLayout)">
    <SurveyPrompt Title="How is Blazor working for you?" />
</LayoutView>

Запустим приложение и убедимся, что макет был применен:

Вложенные макеты

Так как макет приложения Blazor — это, по сути, компонент, то и использовать мы его можем точно так же как и компонент. То есть наследовать один макет от другого. Обязательными условиями вложенного макета являются:

1. наследование от LayoutComponentBase
2. наличие директивы @layout с указанием базового макета

Например, мы могли бы наследовать макет для панели администратора от главного макета следующим образом:

@inherits LayoutComponentBase
@layout MainLayout

--тут разметка вложенного макета---

Итого

Макеты в Blazor можно применять не только к отдельным областям приложения, но и к отдельным компонентам и даже частям этих компонентов. Макеты в Blazor поддерживают механизм наследования для создания вложенных макетов.