Skip to main content
All docs
V25.1
  • IBarSpinEdit Interface

    A spin editor on the Rich Text Editor‘s ribbon or toolbar.

    Namespace: DevExpress.Blazor.Office

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public interface IBarSpinEdit :
        IBarItem,
        IBarItemBase

    Remarks

    The following code snippet creates a custom spin editor.

    <DxRichEdit CustomizeToolbar=OnCustomizeToolbar BarMode=BarMode.Toolbar/>
    
    @code {
        void OnCustomizeToolbar(IToolbar toolbar) {
            BarGroupCollection groups = toolbar.Groups;
            groups.Clear();
            AddFormattingGroup(groups);
            // ...
        }
    
        void AddFormattingGroup(BarGroupCollection groups) {
            IBarGroup formattingGroup = groups.AddCustomGroup();
            // ...
    
            // Adds a custom spin editor
            IBarSpinEdit spinEdit = formattingGroup.Items.AddCustomSpinEdit(
                () => currentLeftIndent,
                async (value) => {
                    currentLeftIndent = value;
                    Paragraph paragraph = await GetCurrentParagraph();
                    await paragraph.ChangePropertiesAsync(p => p.LeftIndent = UnitConverter.InchesToTwips((float)value));
                }
            );
            spinEdit.MinValue = -11;
            spinEdit.MaxValue = 22;
            spinEdit.Increment = 0.1m;
            spinEdit.CssClass = "paragraph-left-indent-spinedit";
            spinEdit.Text = "Left indent:";
            spinEdit.Tooltip = "Change the indent of the paragraph under the caret.";
        }    
    }
    

    Add a Custom Spin Editor

    Run Demo: Toolbar Customization

    See Also