durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-12 15:22:53 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source 
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
library/prefabs/tab-bar/README.md Normal file
View File

@@ -0,0 +1,58 @@
---
title: Tab Bar
hide_title: true
---
# Tab Bar
This prefab contains a tab bar component that you can use to create tab style navigation.
<div className="ndl-image-with-background l">
![](/library/prefabs/tab-bar/tab-bar.png)
</div>
The simple way to use it is to drag it into your project and specify the tabs using the **Items** input.
```javascript
[
{
Label:"Tab 1",
Value:"1"
},
{
Label:"Tab 2",
Value:"2"
},
{
Label:"Tab 3",
Value:"3"
},
]
```
You simply provide a **Label** and a **Value** for each tab. The output **Selected Tab** will contain the value of the currently selected tab, and you can use it to mount / unount the different tab pages.
<div className="ndl-image-with-background l">
![](/library/prefabs/tab-bar/tab-bar-nodes-1.png)
</div>
The example above uses a simple function node to create mount / unmount switches for each of the pages.
```javascript
Outputs.Tab1 = Inputs.SelectedTab==="1"
Outputs.Tab2 = Inputs.SelectedTab==="2"
Outputs.Tab3 = Inputs.SelectedTab==="3"
```
You can change the appearance of the tab bar by editing the child component **Tab Bar Item**.
<div className="ndl-image-with-background m">
![](/library/prefabs/tab-bar/tab-bar-item.png)
</div>