Blazor | ComponentOne
Controls / Input Controls / NumericBox / Styling and Appearance
In This Topic
    Styling and Appearance
    In This Topic

    You can change the style and appearance of the numeric box by using the Style property. The image below shows how NumericBox appear after setting the styling properties.

    NumericBox control with different styles

    The following code example demonstrates customized numeric boxes using Style, Format and other properties.

    Razor
    Copy Code
    <label>CustomStyle & Layout</label>
    <div>
        <C1NumericBox Format="##,###.##" Placeholder="Any Text" Style="@_customStyle1" TNumeric="double?"></C1NumericBox> <br /> <br />
        <C1NumericBox Format="##,###.##" Placeholder="Any Text" ButtonDisplayMode="@ButtonDisplayMode.Right" Style="@_customStyle2" TNumeric="double?"></C1NumericBox>  <br /> <br />
        <C1NumericBox Format="##,###.##" Placeholder="Any Text" ButtonDisplayMode="@ButtonDisplayMode.None" Style="@_customStyle3" TNumeric="double?"></C1NumericBox> <br /> <br />
    

    Razor
    Copy Code
    @code{
    
        double? _value;
    
        readonly C1Style _c1Style = new C1Style() { Width = 130 };
    
        readonly C1Style _customStyle1 = new C1Style() { Width = 230, Height = 45, BorderColor = "orange", BorderWidth = 1, };
        readonly C1Style _customStyle2 = new C1Style() { Width = 230, Height = 55, BorderColor = "green", BorderWidth = 3, };
        readonly C1Style _customStyle3 = new C1Style() { Width = 270, Height = 65, BorderColor = "violet", BorderWidth = 5, };
    
    
        private void HandleValueChanged(object sender, C1NumericBoxEventArgs e)
        {
    
            _value = (double?)e.Value;
    
            StateHasChanged();
        }
    
    }