FxEditorMasthead

How to get FxEditorMasthead

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

Type: Component

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

Note: this component automatically changes the UI of the masthead based on the use-embedded-mode configuration setting. Check its API docs for more detailed information.

Props

# Name Type Description
1. [clientLogo] React:element

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


  Default value
null
2. [mastheadAlignRightContent] React:element

Use this to right align a React component in the toolbars.


  Default value
null
3. tabs Array<Tab>

Register the toolbar tabs in an array of objects.

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.


  Tab

Type: Object

Properties

Name Type Description
content ReactElement

The react component that contains the MastheadToolbar for this tab.

id String | Number

Each tab should get an unique indentifier.

[isHighlightedTab] Boolean

Determines if this tab should be highlighted (if it is visible).

[isHighlightedTabQuery] XPathQuery

Determines when this tab should be highlighted (if it is visible). The query will be started from the selected element and should return a boolean.

[isVisibleTabQuery] XPathQuery

Determines when this tab should be visible. The query will be started from the selected element and should return a boolean.

label String

The name of the tab that will be displayed above the toolbar.

4. [showFontoLogo] Boolean

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


  Default value
true
5. [quickAccessButtons] React:element

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
null
Was this page helpful?