ContentDialog

Parameter/Property	Value
WrapperClass	CSS Class
ContentClass	CSS Class
FadeInStyle	CSS Class
FadeOutStyle	CSS Class

Methods	Description
void Show()	Show ContentDialog
async Task ShowAsync()	Show ContentDialog and wait for hide
void Hide()	Hide ContentDialog

Code

<button onclick="@ShowContentDialog">
    Show ContentDialog
</button>

<ContentDialog ref="contentDlg">
    <div style="text-align: center;">
        <p>Hello World</p>
        <button onclick="@CloseContentDialog">
            Close
        </button>
    </div>
</ContentDialog>

@functions{
    TWyTec.Blazor.ContentDialog contentDlg;

    void ShowContentDialog()
    {
        contentDlg.Show();
    }

    void CloseContentDialog()
    {
        contentDlg.Hide();
    }
}

Default CSS Classes

.TWyTecContentDlgWrapper {
    background-color: rgba(0,0,0,0.5);
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    right: 0px;
    bottom: 0px;
    left: 0px;
    transition: opacity 0.3s, z-index 0.3s, top 0.3s;
}

.TWyTecContentDlgContent {
    border-radius: 5px;
    border: 1px solid dodgerblue;
    max-width: 600px;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 30px 10px 30px;
    margin-top: 30px;
    margin-bottom: 30px;
    position: relative;
}

Custom ContentDialog

<style>
    .customContentDlgWrapper {
        background-color: rgba(255,255,255,0.5);
        display: block;
        overflow-x: hidden;
        overflow-y: auto;
        position: fixed;
        right: 0px;
        left: 0px;
        top: 0px;
        bottom: 0px;
        transition: opacity 0.5s, z-index 0.5s, transform 0.5s;
        
    }

    .customContentDlgContent {
        border-radius: 5px;
        border: 1px solid dodgerblue;
        max-width: 600px;
        box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
        background-color: whitesmoke;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 30px 10px 30px;
        margin-top: 30px;
        margin-bottom: 30px;
        position: relative;
    }
</style>

<ContentDialog ref="customDlg" 
    ContentClass="customContentDlgContent" 
    WrapperClass="customContentDlgWrapper"
    FadeInStyle="@customFadeIn"
    FadeOutStyle="@customFadeOut">
    <div style="text-align: center;">
        <p>Hello World</p>
        <button onclick="@CloseCustomDlg">
            Close
        </button>
    </div>
</ContentDialog>

@functions{
    TWyTec.Blazor.ContentDialog customDlg;
    string customFadeIn = "opacity: 1; z-index: 1050; transform: scale(1,1);";
    string customFadeOut = "opacity: 0; z-index: -1; transform: scale(0,0);";

    void ShowCustomDlg()
    {
        customDlg.Show();
    }

    void CloseCustomDlg()
    {
        customDlg.Hide();
    }
}