SignaturePadExample1.razor

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

<MudGrid>
    <MudItem xs="12" sm="8">
        <MudSignaturePad @bind-Value="_value" @bind-Value:after="@(() =>BytesChanged(_value))"
                         Options="_options"
                         ShowDownload="_showDownload"
                         ShowClear="_showClear"
                         ShowLineWidth="_showLineWidth"
                         ShowStrokeStyle="_showStrokeStyle"
                         ShowLineCapStyle="_showLineCapStyle"
                         ShowLineJoinStyle="_showLineJoinStyle"
                         LocalizedStrings="_localizedStrings"
                         Variant="@_variant"
                         Color="@_color"
                         Dense="@_dense"
                         Elevation="@_elevation">
        </MudSignaturePad>
    </MudItem>
    <MudItem xs="12" sm="4">
        <MudStack Spacing="2">
            <MudSwitchM3 T="bool" @bind-Value="_showDownload" Label="Show Download" Color="Color.Secondary" />
            <MudSwitchM3 T="bool" @bind-Value="_showClear" Label="Show Clear" Color="Color.Secondary" />
            <MudSwitchM3 T="bool" @bind-Value="_showLineWidth" Label="Show Line Width" Color="Color.Secondary" />
            <MudSwitchM3 T="bool" @bind-Value="_showStrokeStyle" Label="Show Stroke Color" Color="Color.Secondary" />
            <MudSwitchM3 T="bool" @bind-Value="_showLineCapStyle" Label="Show Line Cap Style" Color="Color.Secondary" />
            <MudSwitchM3 T="bool" @bind-Value="_showLineJoinStyle" Label="Show Line Join Style" Color="Color.Secondary" />
            <MudSwitchM3 T="bool" @bind-Value="_dense" Label="Dense" Color="Color.Secondary" />
            <MudSelectExtended @bind-Value="@_variant" ItemCollection="@(Enum.GetValues<Variant>())" Label="Variant" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" />
            <MudSelectExtended @bind-Value="@_color" ItemCollection="@(Enum.GetValues<Color>())" Label="Color" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" />
            <MudNumericField @bind-Value="@_elevation" Min="0" Max="25" Label="Elevation" Variant="Variant.Outlined" Margin="Margin.Dense" />
        </MudStack>
    </MudItem>
</MudGrid>

@code {
    bool _showDownload = true;
    bool _showClear = true;
    bool _showLineWidth = true;
    bool _showStrokeStyle = true;
    bool _showLineCapStyle = true;
    bool _showLineJoinStyle = true;
    bool _dense;
    Variant _variant;
    Color _color;
    int _elevation = 4;

    SignaturePadLocalizedStrings _localizedStrings = new SignaturePadLocalizedStrings();

    SignaturePadOptions _options = new SignaturePadOptions()
        {
            LineWidth = 4,
            LineCapStyle = LineCapTypes.Round,
            LineJoinStyle = LineJoinTypes.Round,
            StrokeStyle = new MudColor("#000000")
        };

    byte[] _value = Array.Empty<byte>();

    void BytesChanged(byte[] bytes)
    {
        _value = bytes;
    }
}