Expander

Note: You can check the Avalonia docs for the Expander and Expander API if you need more information.
For Avalonia.FuncUI's DSL properties you can check Expander.fs​
The Expander (known as accordion as well) is a control that allows a user to show or hide content to make more room for relevant information or to show detailed information about the current view
Usage
Set Label
Expander.create [
    Expander.header "Check Logs"
    // the Logs property may be an extremely long text that's why we use an expander
    // hide the logs unless you want to see them
    Expander.content (TextBlock.create [ TextBlock.text state.Logs ])
]
Change Expand Direction you can set in which direction the content should flow
Expander.create [
    Expander.groupName "newsletter"
    Expander.content expanderContent
    // ExpandDirection.Up
    // ExpandDirection.Down
    // ExpandDirection.Left
    // ExpandDirection.Right
    Expander.expandDirection ExpandDirection.Up
]
Use Different Transitions
Expander.create [
    Expander.groupName "newsletter"
    Expander.content expanderContent
    // supply an IPageTransition
    // Expander.contentTransition (PageSlide(TimeSpan.FromSeconds(3.5), PageSlide.SlideAxis.Horizontal) :> IPageTransition)
    Expander.contentTransition (CrossFade(TimeSpan.FromSeconds(2.5)) :> IPageTransition)
]
Use Multiple Expanders you can use multiple expanders and open them programatically via their isExpanded property
Expander.create [
    Expander.header "Profile"
    Expander.isExpanded (state.CurrentSection = Sections.Profile)
    Expander.content (TextBlock.create [ TextBlock.text state.Logs ])
    Expander.onIsExpandedChanged(
        (fun isExpanded -> 
            if isExpanded then
            dispatch (SetCurrentSection (Sections.Profile))
        ), OnChangeOf(state.CurrentSection))
]
Expander.create [
    Expander.header "Preferences"
    Expander.isExpanded (state.CurrentSection = Sections.Preferences)
    Expander.content (TextBlock.create [ TextBlock.text state.Logs ])
    Expander.onIsExpandedChanged(
        (fun isExpanded -> 
            if isExpanded then
            dispatch (SetCurrentSection (Sections.Preferences))
        ), OnChangeOf(state.CurrentSection))
]
Expander.create [
    Expander.header "Misc. Information"
    Expander.isExpanded (state.CurrentSection = Sections.Preferences)
    Expander.content (TextBlock.create [ TextBlock.text state.Logs ])
    Expander.onIsExpandedChanged(
        (fun isExpanded -> 
            if isExpanded then
            dispatch (SetCurrentSection (Sections.Preferences))
        ), OnChangeOf(state.CurrentSection))
]
Last modified 10mo ago