Skip to content

KevinValmo/KV.Blazor.ConditionalRender

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Demo Gif

Conditional Render Blazor Component

It's a simple blazor component that can use different render fragment per condition true or false.

How to use

<ConditionalRender Condition="() => true">
    <TrueCondition>
        <h1>True condition!</h1>
    </TrueCondition>
    <FalseCondition>
        <h1>False condition!</h1>
    </FalseCondition>
</ConditionalRender>

The property Condition is a Func<bool> so you can use lambda expression or a method with return type bool:

public Func<bool> Condition { get; set; }

TrueCondition and FalseCondition tag helpers are properties with same type:

public RenderFragment TrueCondition { get; set; }
public RenderFragment FalseCondition { get; set; }

Each render fragment can be missed:

<ConditionalRender Condition="() => true">
    <TrueCondition>
        <h1>True condition!</h1>
    </TrueCondition>
</ConditionalRender>

or

<ConditionalRender Condition="() => true">
    <FalseCondition>
        <h1>False condition!</h1>
    </FalseCondition>
</ConditionalRender>

Even Condition can be null, in this case it is considered fase.

<ConditionalRender>
    <FalseCondition>
        <h1>False condition!</h1>
    </FalseCondition>
</ConditionalRender>

About

Solution for Conditional Render Blazor Component

Topics

Resources

Stars

Watchers

Forks