PopupExample1.razor

@namespace MudExtensions.Docs.Examples
@using MudBlazor.Extensions

@if (_childContent)
{
    <MudPopup @ref="_popup" Open="_open" Color="Color.Secondary" Text="@_popupText" Icon="@_icon" PopupPosition="_popupPosition" Padding="_padding" EnableAnimation="_enableAnimation">
        <ChildContent>
            <MudStack Class="mud-width-full">
                <div class="d-flex align-center">
                    <MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Primary" />
                    <MudSpacer />
                    <MudIconButton Icon="@Icons.Material.Filled.Close" Color="Color.Primary" OnClick="@(() => _open = false)" />
                </div>
                <MudText Typo="Typo.h6" Color="Color.Primary">Follow Us</MudText>
                <MudText>And get the latest news.</MudText>
                <MudTextField T="string" Variant="Variant.Outlined" Label="Email" />
                <MudButton Variant="Variant.Filled" OnClick="@(() => _open = false)">Accept and Send</MudButton>
            </MudStack>
        </ChildContent>
    </MudPopup>
}
else
{
    <MudPopup @ref="_popup" Open="_open" Color="Color.Secondary" Text="@_popupText" Icon="@_icon" PopupPosition="_popupPosition" Padding="_padding" EnableAnimation="_enableAnimation">
        <LinkContent>
            <MudLink Typo="Typo.body2">@_linkText</MudLink>
        </LinkContent>
        <ActionContent>
            <div>
                <MudButton Variant="Variant.Filled" OnClick="@(() => _open = false)">Accept</MudButton>
            </div>
        </ActionContent>
    </MudPopup>
}

<MudGrid>
    <MudItem xs="12" sm="8">
        <MudStack Spacing="4">
            <MudStack Row="true" Spacing="4">
                <MudButton Variant="Variant.Outlined" Color="Color.Primary" OnClick="SetGdprContent">GDPR Content</MudButton>
                <MudButton Variant="Variant.Outlined" Color="Color.Primary" OnClick="SetSubscribeContent">Subscribe Content</MudButton>
            </MudStack>
            <MudRadioGroup @bind-Value="_icon">
                <MudRadio Value="@Icons.Custom.Brands.MudBlazor"><MudIcon Icon="@Icons.Custom.Brands.MudBlazor" /></MudRadio>
                <MudRadio Value="@Icons.Material.Filled.Info"><MudIcon Icon="@Icons.Material.Filled.Info" /></MudRadio>
            </MudRadioGroup>
            <MudTextField @bind-Value="_popupText" Label="Text" />
            <MudTextField @bind-Value="_linkText" Label="Link Text" />
        </MudStack>
    </MudItem>

    <MudItem xs="12" sm="4">
        <MudStack Spacing="4">
            <MudSelect @bind-Value="_popupPosition" Variant="Variant.Outlined" Label="Popup Position">
                @foreach (PopupPosition item in Enum.GetValues<PopupPosition>())
                {
                    <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                }
            </MudSelect>
            <MudNumericField @bind-Value="_padding" Min="0" Max="300" Variant="Variant.Outlined" Label="Padding" />
            <MudSwitchM3 @bind-Value="_enableAnimation" Color="Color.Secondary" Label="Enable Animation" />
            <MudButton OnClick="@(() => _open = true)">Show Popup</MudButton>
        </MudStack>
    </MudItem>
</MudGrid>

@code {
    MudPopup? _popup;
    PopupPosition _popupPosition;
    bool _open = true;
    int _padding;
    bool _childContent = false;
    bool _enableAnimation = true;

    string _popupText = "This website using cookies to improve your experience and security.";
    string _linkText = "Privacy Policy";
    string _icon = @Icons.Custom.Brands.MudBlazor;

    private void SetGdprContent()
    {
        _popupText = "This website using cookies to improve your experience and security.";
        _linkText = "Privacy Policy";
        _icon = @Icons.Custom.Brands.MudBlazor;
        _childContent = false;
    }

    private void SetSubscribeContent()
    {
        _popupText = "This website using cookies to improve your experience and security.";
        _linkText = "Privacy Policy";
        _icon = @Icons.Custom.Brands.MudBlazor;
        _childContent = true;
    }
}