Layout

Component 에는 하나의 태그 또는 여러 태그가 있다. 이를 Component Contents 라고 하자.

레이아웃은 Component Contents 를 래핑하는 방법이다. 

각 레이아웃에는 @Body래핑 구성 요소의 자리 표시자인 속성이 있습니다. 

 

https://blazorschool.com/tutorial/blazor-server/dotnet6/website-layout-455367

 

Shared/MyLayout.razor

@inherits LayoutComponentBase
<header>
    <h1>MyLayout</h1>
</header>

<nav>
    <a href="">Home</a>
    <a href="counter">Counter</a>
    <a href="fetchdata">Fetch data</a>
</nav>
@Body
<footer>
    @TrademarkMessage
</footer>

@code {
    public string TrademarkMessage { get; set; } = 
        "It is MyLayout.razor";
}

 

App.razor

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MyLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MyLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

실행

MainLayout Component

앱의 기본 레이아웃 이다. 

위치 : Shared/MainLayout.razor

 

css 격리 기능을 이용해 css 스타일을 MainLayout 에만 적용할 수 있다. 

Component 별 격리 스타일을 정의하려면 Component에 대한 {ComponentName}.razor 파일의 이름과

일치하는 {ComponentName}.razor.css 파일을 같은 폴더에 만든다. 

Shared/MainLayout.razor.css

 

 

Component 에 직접 Layout 적용

@layout 지시문을 사용하여 @page 지시문을 포함하는 라우팅 가능한 Razor Component 에 Layout 을 적용한다.

 

Pages/MyLayoutCounter.razor

@page "/my-layout-counter"
@layout MyLayout

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

 

_Imports.razor 를 이용한 특정 폴더에 레이아웃 적용

앱의 모든 폴더에 이름이 _Imports.razor인 템플릿 파일을 선택적으로 포함할 수 있다.

컴파일러는 imports 파일에 지정된 지시문을 동일한 폴더와

모든 하위 폴더의 모든 Razor 템플릿에 포함한다. 

 

Pages/Lifecycle 폴더를 만들고 razor components 를 만든다.

Pages/Lifecycle/_Imports.razor

@layout MyLayout

 

위와 같이 설정할 경우

AfterRender.razor

InitializeAndDispose.razor

ParameterSet.razor

위 세개의 components 는 Layout 이 MainLayout 에서 MyLayout 으로 변경된다. 

 

중첩된 레이아웃

Layout 에 다른 Layout 을 중첩하여 사용할 수 있다.

 

Shared/NestedLayout.razor

@inherits LayoutComponentBase
@layout MyLayout
<header>
    <h1>NestedLayout</h1>
</header>

<nav>
    <a href="fetchdata">Home</a>
    <a href="error-handling">Error Handle</a>
    <a href="raised-error-razor">Raized Error</a>
</nav>
@Body
<footer>
    It is NestedLayout.razor
</footer>

Pages/NestedLayoutCounter.razor

@page "/nested-layout-counter"
@layout NestedLayout

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

LayoutView 를 이용하여 특정 Layout 적용

 

App.razor

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MyLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

 

관련영상

https://youtu.be/j-V9TdK24Ys