https://qiita.com/azarasi1226/items/6108994c4a5e83db05fc
に投降した記事です。
## Step1_ダイアログのテンプレート
“`c#:TemplateDialog.razor
@if (isShow)
{
<div class=”dialog-outer” @onclick=”@(() => this.Close())”>
<div class=”dialog-content” @onclick:stopPropagation=”true”>
@ChildContent
</div>
</div>
}
@code {
[Parameter]
public RenderFragment ChildContent { get; set; } = null!;
private bool isShow;
public void Show()
{
this.isShow = true;
this.StateHasChanged();
}
public void Close()
{
this.isShow = false;
this.StateHasChanged();
}
}
“`
“`css:TemplateDialog.razor.css
.dialog-outer {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background-color: rgba(75, 85, 99, 0.8);
}
.dialog-content{
max-height: 90vh;
max-width: 90vh;
overflow: auto;
background-color: white;
}
“`
## Step2_ダイアログの基底クラス
“`c#:AbstractDialog.cs
public abstract class AbstractDialog : ComponentBase
{
/// <summary>
/// Dialog参照
/// </summary>
protected TemplateDialog TemplateDialog { get; set; } = new TemplateDialog();
/// <summary>
/// ダイアログを開く
/// </summary>
public virtual void Show()
{
TemplateDialog.Show();
}
/// <summary>
/// ダイアログを閉じる
/// </summary>
public virtual void Close()
{
TemplateDialog.Close();
}
}
“`
## Step3_好きなダイアログ作る
“`C#:TemplateDialog.razor
@inherits AbstractDialog
<TemplateDialog @ref=”TemplateDialog”>
<h2>ダイアログサンプル</h2>
<hr />
<hr />
<p>本日は晴天なり本日は晴天なり</p>
<p>あいうえおカキクケコ</p>
@*Close()を呼び出して閉じる*@
<Button @onclick=”()=> this.Close()”>閉じる</Button>
</TemplateDialog>
“`
## Step4_ダイアログを呼び出したい画面に貼り付ける
“`c#:Index.razor
@page “/”
// step2 – ダイアログの参照紐付けて
<TemplateDialog @ref=”_dialog” />
// step3 – 好きなタイミングで.Show()を呼ぶ
<button @onclick=”()=> _dialog.Show()”>開く</button>
@code{
// step1 – ダイアログインスタンス作って
private TemplateDialog _dialog = new TemplateDialog();
}
“`
## 結果
閉じるボタンか背景のグレーをタッチするとダイアログが消えます。
(プロダクトに練りこむときにCSS綺麗に整えてください)
入会申込
ログイン
