How to specify where html goes in a Blazor Component-CodePudding

Let's say I have a file called component1.razor and in that file I have the following code:

<div >
    <div  > </div>
    <div  > </div>
</div>

now in another file use that component like this:

<component1> 
    <!-- I add more html here -->
    <h3>Text</h3>
    <p>more text</p>
</component1>

which div is the content inside the component put in, item1 or item2? and how can I specify which to use?

CodePudding user response：

You must define parameters in your component.
Component1.razor

<div >
    <div >@Item1</div>
    <div >@Item2</div>
</div>

@code {

    [Parameter]
    public RenderFragment Item1 { get; set; }

    [Parameter]
    public RenderFragment Item2 { get; set; }
}

And use it like this:

<Component1>
    <Item1><h3>Text</h3></Item1>
    <Item2><p>more text</p></Item2>
</Component1>

See: Build reusable UI components with Blazor