Community › Forge › Assets list › TopbarJS
topbarjs
Reactive icon

TopbarJS

Stable version 3.0.0 (Compatible with OutSystems 11)
Uploaded
 on 27 Sep
 by 
5.0
 (6 ratings)
topbarjs

TopbarJS

Documentation
3.0.0

Call Topbar_Show to show and Topbar_Hide to hide the progress bar. Before Topbar_Hide is called, the progress bar will move slower and slower but never actually reach 100%. If you navigate from the page, the topbar will hide automatically.

You can also use the AutoTopbar block to have this behavior done automagically! Just provide a query selector like a class or an html tag to attach a listener to those elements that will do the magic for you.

E.g: ".trigger-topbar" will attach the event to all clickable elements with the class "trigger-topbar" and "a" will attach the event to all links.

Be sure to add the AutoTopbar_Hide block to your layout or screen if you want the topbar to disappear after a successful navigation.

Optionally, you can configure your topbar. Use the Topbar_SetConfigs action for that. You can configure:

  • AutoRun (default: true): if false, call topbar.progress() manually to run.
  • BarThickness (default: 3): the progress bar thickness.
  • BarColors: list of gradient color stops used to draw the progress bar (use only 1 element if you want a solid color).
  • ShadowBlur (default: 10): the shadow blur.
  • ShadowColor: the shadow color.
  • ClassName: the CSS class name for the progress bar.


I advise you to only configure the "BarColors" property for better results, but hack away!

For mobile apps:

If you're having trouble displaying the topbar in native mobile apps, it's because the status bar is on top of it. Try adding the following CSS:

.statusbar-overlay canvas.topbar {

    top: var(--status-bar-height) !important;

}


2.0.0

Call Topbar_Show to show and Topbar_Hide to hide the progress bar. Before Topbar_Hide is called, the progress bar will move slower and slower but never actually reach 100%. If you navigate from the page, the topbar will hide automatically.

You can also use the AutoTopbar block to have this behavior done automagically! Just provide a query selector like a class or an html tag to attach a listener to those elements that will do the magic for you.

E.g: ".trigger-topbar" will attach the event to all clickable elements with the class "trigger-topbar" and "a" will attach the event to all links.

Be sure to add the AutoTopbar_Hide block to your layout or screen if you want the topbar to disappear after a successful navigation.

Optionally, you can configure your topbar. Use the Topbar_SetConfigs action for that. You can configure:

  • AutoRun (default: true): if false, call topbar.progress() manually to run.
  • BarThickness (default: 3): the progress bar thickness.
  • BarColors: list of gradient color stops used to draw the progress bar (use only 1 element if you want a solid color).
  • ShadowBlur (default: 10): the shadow blur.
  • ShadowColor: the shadow color.
  • ClassName: the CSS class name for the progress bar.


I advice to configure only the "BarColors" property for better results, but hack away!


1.0.0

Call Topbar_Show to show and Topbar_Hide to hide the progress bar. Before Topbar_Hide is called, the progress bar will move slower and slower but never actually reach 100%. If you navigate from the page, the topbar will hide automatically.

You can also use the AutoTopbar block to have this behavior done automagically! Just provide a query selector like a class or an html tag to attach a listener to those elements that will do the magic for you.

E.g: ".trigger-topbar" will attach the event to all clickable elements with the class "trigger-topbar" and "a" will attach the event to all links.

Optionally, you can configure your topbar. Use the Topbar_SetConfigs action for that. You can configure:

  • AutoRun (default: true): if false, call topbar.progress() manually to run.
  • BarThickness (default: 3): the progress bar thickness.
  • BarColors: list of gradient color stops used to draw the progress bar (use only 1 element if you want a solid color).
  • ShadowBlur (default: 10): the shadow blur.
  • ShadowColor: the shadow color.
  • ClassName: the CSS class name for the progress bar.


I advice to configure only the "BarColors" property for better results, but hack away!