PlaceHolder Component Samples

The PlaceHolder component is a container that renders its child content without adding any HTML markup of its own. It's useful for conditionally showing/hiding content.

Basic PlaceHolder

This content is inside a PlaceHolder.

Note: No extra wrapper element is rendered around this content.

<PlaceHolder>
    <p>This content is inside a PlaceHolder.</p>
    <p>No extra wrapper element is rendered.</p>
</PlaceHolder>

PlaceHolder with Visible=true (default)

<PlaceHolder Visible="true">
    <div>This PlaceHolder is visible.</div>
</PlaceHolder>

PlaceHolder with Visible=false

(The PlaceHolder above has Visible=false, so nothing is rendered)

<PlaceHolder Visible="false">
    <div>This content should NOT be visible.</div>
</PlaceHolder>

Dynamic Visibility Toggle

<PlaceHolder Visible="@showContent">
    <div>Dynamic content is visible!</div>
</PlaceHolder>
<button @onclick="ToggleContent">Toggle</button>

@code {
    private bool showContent = true;
    private void ToggleContent() => showContent = !showContent;
}

Conditional Content (Login State Example)

Status: Logged Out

<PlaceHolder Visible="@isLoggedIn">
    <div>Welcome, logged in user!</div>
</PlaceHolder>
<PlaceHolder Visible="@(!isLoggedIn)">
    <div>Please log in to see content.</div>
</PlaceHolder>

@code {
    private bool isLoggedIn = false;
    private void ToggleLogin() => isLoggedIn = !isLoggedIn;
}

Empty PlaceHolder

Before empty PlaceHolder:

After empty PlaceHolder (nothing between these paragraphs).

<p>Before empty PlaceHolder:</p>
<PlaceHolder></PlaceHolder>
<p>After empty PlaceHolder.</p>