Blazor / Syncfusion RadioButton 선택 시 display:none 이벤트

div로 묶어서 RadioButton 설정

<div class="radio_btn">
	<SfRadioButton Label="레디오1" Value="r1" @bind-Checked="rChecked"></SfRadioButton>
	<SfRadioButton Label="레디오2" Value="r2" @bind-Checked="rChecked"></SfRadioButton>
	<SfRadioButton Label="레디오3" Value="r3" @bind-Checked="rChecked"></SfRadioButton>
</div>

 

blazor @code{}안에 선언

@code{
	
    private string rChecked = "r1";

	private string getCssVisibility(string checkedValue, string targetValue)
	{
		return checkedValue == targetValue ? "" : "d-none"; 
	}

}

//d-done은 css을 담을 이름
//"r1"은 Chcked된 옵션

 

blazor <style></style> 안에 선언

<style>
	.d-none {
		display:none;
	}
</style>

 

각 RadioButton에 사용 할 div들 선언

<div class="@getCssVisibility(rChecked,"r1")">
	//해당 RadioButton의 보여 줄 컴포넌트나 소스 작성
</div>

 

전체 소스

<div>
	<div class="radio_btn">
		<SfRadioButton Label="레디오1" Value="r1" @bind-Checked="rChecked"></SfRadioButton>
		<SfRadioButton Label="레디오2" Value="r2" @bind-Checked="rChecked"></SfRadioButton>
		<SfRadioButton Label="레디오3" Value="r3" @bind-Checked="rChecked"></SfRadioButton>
	</div>
    <div class="@getCssVisibility(rChecked,"r1")">
		//해당 RadioButton의 보여 줄 컴포넌트나 소스 작성
	</div>
    <div class="@getCssVisibility(rChecked,"r2")">
		//해당 RadioButton의 보여 줄 컴포넌트나 소스 작성
	</div>
    <div class="@getCssVisibility(rChecked,"r3")">
		//해당 RadioButton의 보여 줄 컴포넌트나 소스 작성
	</div>
</div>
@code{
	
    private string rChecked = "r1";

	private string getCssVisibility(string checkedValue, string targetValue)
	{
		return checkedValue == targetValue ? "" : "d-none"; 
	}

}
<style>
	.d-none {
		display:none;
	}
</style>