import live-web.dom
import live-web-view.layout
import live-web-view.content

static any[] use = [TabLayout]

TabLayout{
    TabHeader{
        TabButton{ content: [T`Tab 1`] }
        TabButton{ content: [T`Tab 2`] }
        TabButton{ content: [T`Tab 3`] }
    }
    TabContent{
        TabPane{ 
            Content{
                H1`This is tab 1`
            }
        }
        TabPane{ 
            Content{
                H1`This is tab 2`
            }
        }
        TabPane{ 
            Content{
                H1`This is tab 3`
            }
        }
    }
}

import live-web.dom
import live-web-view.overlay
import live-web-view.content

static any[] use = [Dropdown]

TabLayout{
    id: tabLayout
    Array data = [1, 2, 3]
    TabHeader{
        children: tabLayout.data.map(d => {
            return TabButton{
                content: [T.(`Tab ${d}`){}]
            }
        })
    }
    TabContent{
        children: tabLayout.data.map(d => {
            return TabPane{ 
                Content{
                    H1.(`Heading ${d}`){}
                }
            }
        })
    }
}