Content Projection

공통 논리를 처리하고 특정 논리를 해당 Component 의 사용자에게 맡길 수 있습니다.

 

단일 슬롯 콘텐츠 프로젝션

 

https://blazorschool.com/tutorial/blazor-server/dotnet6/content-projection-135511

 

RenderFragment? 형태로 정의된 Property 에 content (HTML or Razor element) 를 전달 할 수 있다. 

Parent 에서는 이 RenderFragment 에 element 를 전달하여 유연한 contents 를 구성할 수 있다.

(vue 개발자가 있다면 slot 과 비슷한 개념으로 생각하면 된다.)

 

Pages/Child.razor

<div>
    <h3>Child</h3>
    <div>
        <h1>@ChildContent</h1>
    </div>
</div>
@code {

    [Parameter]
    public RenderFragment? ChildContent { get; set; }
    
}

Pages/Parent.razor

@page "/interaction/content-projection"
<h3>Parent</h3>
<Child>
    <span> 내 마음대로 가능해</span>
</Child>

<Child>
    <span> 이건 다른걸 해야지</span>
</Child>


@code { 
}

 

실행

 

 

 

 

다중 슬롯 콘텐츠 프로젝션

 

https://blazorschool.com/tutorial/blazor-server/dotnet6/content-projection-135511

 

RenderFragment 에 이름을 이용하여 여러개의 RenderFragment 를 사용할 수 있다.

아래 예제는 header, body, footer 형태로 content를 분리하여

Layout 형태로 parent 를 구성할수 있게 하였다. 

 

Pages/Child.razor

<div>
    <h3>MultipleChild</h3>
    <header>
        <h1 style="color:red"><b>@HeaderContent</b></h1>
    </header>
    <div>
        <h1 style="color:blue">@BodyContent</h1>
    </div>
    <footer>
        <h3 style="color:yellow">@FooterContent</h3>
    </footer>
</div>
@code {

    [Parameter]
    public RenderFragment? HeaderContent { get; set; }
    [Parameter]
    public RenderFragment? BodyContent { get; set; }
    [Parameter]
    public RenderFragment? FooterContent { get; set; }
    
    
}

 

Pages/Parent.razor

@page "/interaction/content-multi-projection"
<h3>Parent</h3>
<MultipleSlotChild>
    <HeaderContent>짜잔</HeaderContent>
    <BodyContent>!몸통!</BodyContent>
    <FooterContent>끝</FooterContent>
</MultipleSlotChild>

@code { 
}

 

실행

 

 

 

관련영상

https://youtu.be/TmbhbVN2-0k