FxOperationSplitButtonWithDrop

Type: React component

How to get FxOperationSplitButtonWithDrop?

JavaScript

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

Renders a (split) button that invokes and reflects the state of a given operation(Name) with a drop. The contents of the drop are up to you using the renderDrop prop.

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 render a Menu with a list of FxOperationMenuItems, consider using the FxOperationsSplitButtonWithDropMenu. Note however, using that component you can no longer specifify what the operation for the left/main part of the split button should be, it is always the first operation of the list of operations as described in FxOperationsSplitButtonWithDropMenu.

If you don't want a split button at all, but just a normal button that opens a drop whose state is 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

    (Optional)

    Default value

  2. dropButtonStateOperationName

    (Optional)

    Default value

  3. focusEditorWhenDone

    (Optional)

    Type: Boolean

    Default value

  4. icon

    (Optional)

    Type: String

    Default value

  5. isDisabled

    (Optional)

    Type: Boolean

    Default value

  6. isSelected

    (Optional)

    Type: Boolean

    Default value

  7. label

    (Optional)

    Type: String

    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.

    Returns

    Default value

  9. operationName

    (Required)

    The operation name.

  10. operationData

    (Optional)

    The operation data to evaluate the operation with.

    Default value

  11. renderDrop

    (Required)

    Type: Function

    A callback that is called at every render of this component. Expects a valid React component instance of the desired drop and its contents to be returned.

    Arguments

  12. tooltipContent

    (Optional)

    Type: String

    Default value

  13. 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