How to use the @bentley/ui-ninezone.Direction.Bottom function in @bentley/ui-ninezone

constructor(groupItemProps: GroupItemProps, onItemExecuted?: OnItemExecutedFunc) {
    super(groupItemProps, onItemExecuted);

    this.groupId = (groupItemProps.groupId !== undefined) ? groupItemProps.groupId : "";
    if (groupItemProps.groupId)
      this.groupId = groupItemProps.groupId;
    else {
      GroupItemDef._sId++;
      this.groupId = GroupItemDef.groupIdPrefix + GroupItemDef._sId;
    }

    this.directionExplicit = (groupItemProps.direction !== undefined);
    this.direction = (groupItemProps.direction !== undefined) ? groupItemProps.direction : Direction.Bottom;
    this.itemsInColumn = (groupItemProps.itemsInColumn !== undefined) ? groupItemProps.itemsInColumn : 7;
    this._panelLabel = PropsHelper.getStringSpec(groupItemProps.panelLabel, groupItemProps.paneLabelKey); // tslint:disable-line: deprecation
    this.items = groupItemProps.items;
    this.defaultActiveItemId = groupItemProps.defaultActiveItemId;
  }

{UiFramework.translate("tools.AnalysisAnimation.ToolSettings.duration")}
          <input id="animationDuration" value="{(this.state.animationDuration" step="1" max="30" min="1" type="number">
          {UiFramework.translate("tools.AnalysisAnimation.ToolSettings.seconds")}
        
        <div>
          <input checked="{this.state.isLooping}" type="checkbox" id="animationLoop">
          {UiFramework.translate("tools.AnalysisAnimation.ToolSettings.loop")}
        </div>
        <div>
          <input id="animationSlider" value="{this.state.elapsedTime.toString()}" max="{this.state.animationDuration.toString()}" min="0" type="range">
        </div>
        <div>
          
                }
                /&gt;
                }
                /&gt;
</div>

private getNavigationWidget(): React.ReactNode {

    const horizontalToolbar =
      
            
            
             ModalDialogManager.openDialog(this.modalDialog())} />
             ModalDialogManager.openDialog(this.radialMenu())} />
             ModalDialogManager.openDialog(this.testPopup())} />
          
        }
      />;

    const verticalToolbar =

private getNavigationWidget(): React.ReactNode {

    const horizontalToolbar =
      
            
            
            
          
        }
      />;

    const verticalToolbar =

,
              ,
            ]}
          />
        }
      />
    );
  }
}

/** Define a ToolWidget with Buttons to display in the TopLeft zone.
 */
class FrontstageToolWidget extends React.Component {
  private _horizontalToolbar =
    
          
          
          
        
      }
    />;

  private _verticalToolbar =

labelKey: "SampleApp:buttons.switchLayout",
      execute: async () => {
        const activeFrontstageDef = FrontstageManager.activeFrontstageDef;
        if (activeFrontstageDef) {
          const contentLayout = ContentLayoutManager.findLayout("TwoHalvesHorizontal");
          if (contentLayout && activeFrontstageDef.contentGroup) {
            await ContentLayoutManager.setActiveLayout(contentLayout, activeFrontstageDef.contentGroup);
          }
        }
      },
    });
  }

  private _horizontalToolbar =
    
          
          
          
          
          
        
      }
    />;

  private _verticalToolbar =

*/
class FrontstageToolWidget extends React.Component {
  private _horizontalToolbar =
    
          
          
          
          
        
      }
    />;

  private _verticalToolbar =
    
          
          

constructor(def: ToolbarWidgetProps) {
    super(def);

    this.horizontalDirection = (def.horizontalDirection !== undefined) ? def.horizontalDirection : Direction.Bottom;
    this.verticalDirection = (def.verticalDirection !== undefined) ? def.verticalDirection : Direction.Right;

    this.horizontalPanelAlignment = ToolbarPanelAlignment.Start;
    this.verticalPanelAlignment = ToolbarPanelAlignment.Start;

    this.horizontalItems = def.horizontalItems;
    this.verticalItems = def.verticalItems;
  }