FxEditorMasthead

Type: React component

How to get FxEditorMasthead?

JavaScript

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

The main component to configure a masthead with. Use this component to register the toolbar tabs.

The FxEditorMasthead component comes with a few cool feaures, such as being able to show/hide/highlight tabs basd on the cursor position (see also the isHighlightedTabQuery and isVisibleTabQuery properties of objects passed to the tabs, and automatic compatibility with use-embedded-mode.

The FxEditorMasthead component is really just a convenient wrapper around a number of FDS masthead components. This means that you can alternatively create your own masthead component when needed.

Props

  1. clientLogo

    (Optional)

    Type: React.ReactElement

    Use this to show a custom logo in the top right corner of the masthead.

    Default value

  2. mastheadAlignRightContent

    (Optional)

    Type: React.ReactElement

    Use this to place a React component in the right-hand side of the masthead. The component is visible for every toolbar in the masthead.

    Default value

  3. tabs

    (Required)

    Type: Array<FxEditorMastheadTabI>

    The tabs prop defines which toolbar tabs should be shown in the masthead, and is the only required prop of this component. The tabs prop expects an array of objects describing the tabs to be shown.

    Note: The content of this property, should not change during rendering. Note: The following properties have no effect (yet) when the configuration setting 'use-embedded-mode' is true:

    • isHighlightedTab: PropTypes.bool,

    • isHighlightedTabQuery: PropTypes.string,

    In a future release these might become supported as well.

  4. showFontoLogo

    (Optional)

    Type: Boolean

    Determines if the fontoxml logo will be shown in the top left corner of the masthead.

    Default value

  5. quickAccessButtons

    (Optional)

    Type: React.ReactElement

    Use this to add buttons in the top left corner of the masthead next to the Fonto logo. For example a Button or FxOperationButton.

    Default value