Tabs

Note: You can check the Avalonia docs for the TabControlarrow-up-right and TabControl APIarrow-up-right if you need more information.

For Avalonia.FuncUI's DSL properties you can check TabControl.fsarrow-up-right

The TabControlarrow-up-right offers you a way to present content inside your application, each tab contains a different set of controls.

Set Tabs

let homePageContent = 
    DockPanel.create [ 
        DockPanel.children [
            TextBox.create [ TextBox.text "Home" ]
        ]
    ]
let aboutPageContent = 
    DockPanel.create [ 
        DockPanel.children [
            TextBox.create [ TextBox.text "About" ]
        ]
    ]

let tabs : IView list = [
    TabItem.create [
        TabItem.header "Home"
        TabItem.content homePageContent
    ]
    TabItem.create [
        TabItem.header "About"
        TabItem.content aboutPageContent
    ]
]

TabControl.create [
    TabControl.tabStripPlacement Dock.Left // Change this property to tell the app where to show the tab bar
    TabControl.viewItems tabs
]

Set HostControl as content

You can also include individual Elmish Controls as the content of your tabs by using the ViewBuilderarrow-up-right. Visit the examplearrow-up-right to see it in action

In the example above the Counter module defines a HostControl to allow that module to work by itself. This means you don't need to nest every view/control inside the main Elmish module of your app, this can help you reduce boilerplate and complexity in the main module of your application

Last updated