ContentDialog

ViewImports

@using TWyTec.Blazor

@addTagHelper *, TWyTec.Blazor.ContentDialog

---

Propertys

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

---

Methodes

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>

<button onclick="@ShowAwaitContentDialog">
    Show ContentDialog await for close.
</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();
    }

    async void ShowAwaitContentDialog()
    {
        await contentDlg.ShowAsync();
        this.StateHasChanged();
    }

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