Function navigationBar

  • navigationBar(props): Element

  • Creates a navigation bar component that can be used to display a set of buttons.

    Parameters

    • props: UiNavigationBarProps

      Configuration object for the navigation bar

    Returns Element

    A JSX element representing the navigation bar component

    Remarks

    • button.text - the text content of the button as a React Node
    • button.value - the value of the button
    • button.disabled - if true, the button will be disabled
    • button.icon - Icon to display on the button. (optional) Available icons:
      • 'add-circle', 'add', 'arrow-back', 'arrow-down', 'arrow-forward', 'arrow-up'
      • 'checkmark-circle-outline', 'checkmark-circle', 'checkmark'
      • 'clipboard', 'close', 'close-circle', 'document', 'download', 'eye'
      • 'folder-open', 'folder', 'gift', 'information-circle-outline', 'information-circle'
      • 'more', 'open', 'remove-circle', 'share', 'thumbs-down', 'thumbs-up'
      • 'trash', 'warning', 'navigate-back', 'copy', 'moon', 'move', 'sunny'
      • 'loading-indicator', 'close-circle-outline', 'play-circle', 'play'
      • 'thumbs-down-tabler', 'thumbs-up-tabler'

    Example

    Basic usage

    navigationBar({
      buttons: [
        {
          text: "Back",
          value: "back"
        },
        {
          text: "Next",
          value: "next",
        }
      ]
    });

    Example

    Usage with icons

    navigationBar({
      buttons: [
        {
          text: "Back",
          value: "back",
          icon: "arrow-back"
        },
        {
          text: "Next",
          value: "next",
          icon: "arrow-forward"
        }
      ]
    });

Settings