一般社団法人 全国個人事業主支援協会

COLUMN コラム

  • Blazorでダイアログを出したい

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();
}
“`

## 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456434/5ccc8ade-5930-720e-384c-82926be5919e.png)

閉じるボタンか背景のグレーをタッチするとダイアログが消えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456434/2c49b572-4abf-be6f-78d1-55871181bd63.png)

(プロダクトに練りこむときにCSS綺麗に整えてください)

The following two tabs change content below.

安藤 和樹

最新記事 by 安藤 和樹 (全て見る)

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア