platform-bible-react
    Preparing search index...

    Type Alias TabToolbarProps

    TabToolbarProps: TabToolbarCommonProps & {
        centerAreaChildren?: ReactNode;
        endAreaChildren?: ReactNode;
        onSelectViewInfoMenuItem: SelectMenuItemHandler;
        shrinkStep?: number;
        startAreaChildren?: ReactNode;
        tabViewMenuData?: Localized<MultiColumnMenu>;
    }

    Type declaration

    • OptionalcenterAreaChildren?: ReactNode

      Toolbar children to be put in the center area of the the toolbar. Recommended for tools.

    • OptionalendAreaChildren?: ReactNode

      Toolbar children to be put at the end of the the toolbar before the tab view menu icon (right side in ltr, left side in rtl). Recommended for secondary tools and view options.

    • onSelectViewInfoMenuItem: SelectMenuItemHandler

      The handler to use for toolbar item commands related to the tab view menu. Here is a basic example of how to create this from the hello-rock3 extension:

      const projectMenuCommandHandler: SelectMenuItemHandler = async (selectedMenuItem) => {
      const commandName = selectedMenuItem.command;
      try {
      // Assert the more specific type. Assert the more specific type. The menu data should
      // specify a valid command name here. If not, the error will be caught.
      // eslint-disable-next-line no-type-assertion/no-type-assertion
      await papi.commands.sendCommand(commandName as CommandNames);
      } catch (e) {
      throw new Error(
      `handleMenuCommand error: command: ${commandName}. ${JSON.stringify(e)}`,
      );
      }
      };
    • OptionalshrinkStep?: number

      Overrides the shrink step this toolbar would otherwise measure from its own width, and publishes it to descendants. Higher means narrower.

      For stories and tests: measuring needs a layout engine, which jsdom does not have. In the app, leave it unset and let the toolbar measure itself.

    • OptionalstartAreaChildren?: ReactNode

      Toolbar children to be put at the start of the the toolbar after the project menu icon (left side in ltr, right side in rtl). Recommended for inner navigation.

    • OptionaltabViewMenuData?: Localized<MultiColumnMenu>

      Menu data that is used to populate the Menubar component for the view info menu