FxOperationsSplitButtonWithDropMenu

Type: React component

How to get FxOperationsSplitButtonWithDropMenu?

JavaScript

import FxOperationsSplitButtonWithDropMenu from 'fontoxml-fx/src/FxOperationsSplitButtonWithDropMenu.jsx'

Renders a (split) button that invokes and reflects the state of an operation with a drop menu. Each operation in the operations array stands for one menu item in the drop. The first operation in the operations array, is also used in the button (in the left/main part of the split).

If the open drop button (right/drop part of the split) should be disabled based on an operation, use the dropButtonStateOperationName (and optionally dropButtonStateOperationData) props to do so.

If you want to customize the drop and/or change the operation used in the button (left/main part), you have to use FxOperationSplitButtonWithDrop instead.

If you don't want a split button at all, but just a normal button that opens a drop. And the state of that button should be based on the state of an operation, use a FxOperationStateButtonWithDrop instead. And use its dropButtonStateOperationName (and optionally dropButtonStateOperationData) props.

If the (split) button should not invoke and reflect the state of a operation, use a normal SplitButtonWithDrop or ButtonWithDrop with a Menu with FxOperationMenuItem components inside.

Props

  1. dropButtonStateOperationData

    Default value

  2. dropButtonStateOperationName

    Default value

  3. focusEditorWhenDone

    (Optional)

    Default value

  4. icon

    (Optional)

    Type: FX~Icon

    The icon that is displayed before the label in the button. This overrides the icon provided by the first operation (operation.icon).

    Default value

  5. isDisabled

    (Optional)

    Default value

  6. isSelected

    (Optional)

    Default value

  7. label

    (Optional)

    Type: String

    The label of the button. This overrides the label provided by the first operation (operation.label).

    Default value

  8. onClick

    (Optional)

    Type: Function

    Add additional onClick callback. The callback is called when the user clicks on the left button (the right button toggles the drop menu) just after the operation is executed.

    Default value

  9. operations

    (Required)

    Type: Array<FX~OperationSpec>

    Each operation will get their own menu item in the drop. The first operation in the list is also used in the button.

  10. tooltipContent

    (Optional)

    The tooltip for the button. This overrides the tooltipContent provided by the first operation (operation.description)

    Default value

  11. type

    (Optional)

    Type: String

    Allows you to override the background and border color from its default values (which are based on the context where you use the button; masthead / masthead tab buttons / toolbar) to one of either:

    • 'default'

    • 'primary'

    • 'transparent'

    • 'warning'

    • 'error' Defaults to 'default', which is then interpreted based on the context.

    Please visit the Button playground example for visual examples for each type in each context.

    Default value