Navs (Bootstrap): Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
 
(13 intermediate revisions by the same user not shown)
Line 6: Line 6:


Provide navigation links with customizable appearance.
Provide navigation links with customizable appearance.
''items'' is a list of the navigation items to show.
''links'' is a list of links for each item. If no link is provided, nothing happens. An internal link has a '#' in front of it, so '#labOne' will scroll the form to control with the is labOne. If you omit the '#', an external link is opened in the browser: for example, 'http://appstudio.dev' will open AppStudio's home page.


== Properties and Methods ==
== Properties and Methods ==
Line 12: Line 16:
{| class="wikitable"
{| class="wikitable"
|-
|-
| clear() || Remove all items. Design Time.
| addItem(''item'', ''active'', ''disabled'') || Add an ''item''. ''active'' and ''disabled'' are true/false. Runtime.
|-
| clear() || Remove all items. Run Time.
|-
|-
| items || Items to show, one per line. Prefix * for disabled, > for selected. Design Time.
| items || Items to show, one per line. Prefix * for disabled, > for selected. Design Time.
Line 18: Line 24:
| justified || How do the items spread to fit? 'justified' or 'fill'.  Design Time.
| justified || How do the items spread to fit? 'justified' or 'fill'.  Design Time.
|-
|-
| Navstyle || How do the Navs look? Navs is an outline, Pills look like buttons.  Design Time.
| links || Internal or external links to jump to. Put # in front of internal links. BootStrap 5. Optional. Design Time.
|-
| tabstyle || How do the Navs look? Navs is an outline, Pills look like buttons.  Design Time.
|-
| value || Gets/sets the selected item. Starts from 0. Returns -1 if none selected. Run Time.
|-
|-
| vertical || If set to true, the items will be arranged vertically.  Design Time
| vertical || If set to true, the items will be arranged vertically.  Design Time
Line 28: Line 38:
Standard [[events|events]] are supported. For this control, the onclick event will be most useful.
Standard [[events|events]] are supported. For this control, the onclick event will be most useful.


== Example (Basic) ==
== Example ==
<pre>
 
<tabber>
JavaScript=
<syntaxhighlight lang="JavaScript">
// JavaScript
Navs1.onclick = function(i) {
  if (typeof i == "object") return;
  NSB.MsgBox("Item clicked: " + Navs1.value);
};
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
' Basic
Function Navs1_onclick(i)
Function Navs1_onclick(i)
   If TypeName(i) = "object" Then Exit Function
   If TypeName(i) = "object" Then Exit Function
   MsgBox "Item clicked: " + Navs1.value
   MsgBox "Item clicked: " & Navs1.value
End Function
End Function
</pre>
</syntaxhighlight>
 
</tabber>
== Example (JavaScript) ==
<pre>
Navs1.onclick = function(i) {
    if (typeof i == "object") return;
    NSB.MsgBox("Item clicked: " + Navs1.value);
};
</pre>


== Output ==
== Output ==

Latest revision as of 18:39, 2 May 2025

This control was added in Bootstrap 4.

Description

Provide navigation links with customizable appearance.

items is a list of the navigation items to show.

links is a list of links for each item. If no link is provided, nothing happens. An internal link has a '#' in front of it, so '#labOne' will scroll the form to control with the is labOne. If you omit the '#', an external link is opened in the browser: for example, 'http://appstudio.dev' will open AppStudio's home page.

Properties and Methods

Standard properties are supported, plus:

addItem(item, active, disabled) Add an item. active and disabled are true/false. Runtime.
clear() Remove all items. Run Time.
items Items to show, one per line. Prefix * for disabled, > for selected. Design Time.
justified How do the items spread to fit? 'justified' or 'fill'. Design Time.
links Internal or external links to jump to. Put # in front of internal links. BootStrap 5. Optional. Design Time.
tabstyle How do the Navs look? Navs is an outline, Pills look like buttons. Design Time.
value Gets/sets the selected item. Starts from 0. Returns -1 if none selected. Run Time.
vertical If set to true, the items will be arranged vertically. Design Time

Events

Standard events are supported. For this control, the onclick event will be most useful.

Example

// JavaScript
Navs1.onclick = function(i) {
  if (typeof i == "object") return;
  NSB.MsgBox("Item clicked: " + Navs1.value);
};

' Basic
Function Navs1_onclick(i)
  If TypeName(i) = "object" Then Exit Function
  MsgBox "Item clicked: " & Navs1.value
End Function

Output