Skip to main content

IBarSpinEdit Interface

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

Namespace: DevExpress.Blazor.Office

Assembly: DevExpress.Blazor.v24.2.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