FxOperationsSplitButtonWithDropMenu

The license could not be verified: License Certificate has expired!

How to get FxOperationsSplitButtonWithDropMenu

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

Type: Component

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

# Name Type Description
1. [dropButtonStateOperationData] String

Additional operation data, which will be added to the stepData of the operation as specified in the "dropButtonStateOperationName" prop.

  Default value
{}
2. [dropButtonStateOperationName] String

The name of the registered operation used to determine the state of the drop button rendered in this component. If the operation returns a state that sets "enabled" to be "false" the drop button will be disabled (clicking it won't open the drop).

This operation should represent the state from the contents of the drop.

  Default value
null
3. [focusEditorWhenDone] Boolean

Whether or not the given component should tell the editor (content view) to take back focus after its operation is done executing. By default this is has a value of null and is then determined at render time: its true if the component is placed inside the masthead or statusbar (including when used in drops or popovers triggered from the masthead or statusbar) and false otherwise.

Setting this prop to a value other than null or undefined forces that value for all renders, regardless of where the component is rendered.

  Default value
null
4. [icon] String

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

Use an icon in this component. This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.

  Default value
null
5. [isDisabled] Boolean

Set to true to render this component in a disabled state.

Setting it to false does not (re)enable it if the associated operation(s) are not enabled. This prevents users from executing operations that would cause errors or even break the document.

  Default value
false
6. [isSelected] Boolean

Set to true to render this component in a selected state.

Setting it to false does not force to deselected it if the associated operation(s) are active. This prevents users from getting misleading/inconsistent information from the underlying system.

If you never want to show the UI in a selected state for a particular operation, you can make and use a custom operation instead which ends with a final custom step that sets operationState.active to false. But breaking visual consistency this way with the rest of the editor is strongly discouraged and should only be used as a last resort.

  Default value
false
7. [label] String

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


  Default value
null
8. [onClick] 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.

9. operations Array<OperationSpec>

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


  OperationSpec

Type: Object

An array of operations with properties. Each operation will at least define the operation name. All other properties are there to add or override the original operation.

Properties

Name Type Description
[icon] String

Overrides the icon of the operation.

Use an icon in this component. This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.

[isDisabled] Boolean

Overrides the disabled state of the operation (!operationState.enabled).

Whether or not the component should be rendered in a disabled state.

[isSelected] Boolean

Overrides the selected state of the operation (operationState.active).

Whether or not the component should be rendered in a selected state.

[label] String

Overrides the label of the operation.

[operationData] Object

Additional operation data, which will be added to the stepData of the operation.

operationName String

The name by with the operation was registered. The component will be replaced with a CompactStateMessage if the operation is not found.

[tooltipContent] String

Overrides the tooltip content of the operation (operation.description).

The content of the tooltip that is displayed when hovering over the whole component.

10. [tooltipContent] String

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

The content of the tooltip that is displayed when hovering over the whole component.

  Default value
null
11. [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
null
Was this page helpful?