How to make an ExpandableListView?

I’m like John Snow when talking about iOS. I know nothing.

And that’s the reason I’m studying Fuse. Maybe port my Android and (expensive) iOS versions to fuse.

But a very important component to my App is the ExpandableListView in Android.

How could I do something like that with Fuse?



Porting your app to fuse sounds like a good choice :smiley:

ExpandableListView is easy to make with UX, consider this example:

<App Theme="Basic" Background="#eee">
            var Observable = require("FuseJS/Observable");
            var data = Observable(
                { title:"Group1", data:Observable("data1","data2","data3","data4","data5") },
                { title:"Group2", data:Observable("data1","data2","data3","data4","data5") },
                { title:"Group3", data:Observable("data1","data2","data3","data4","data5") },
                { title:"Group4", data:Observable("data1","data2","data3","data4","data5") },
                { title:"Group5", data:Observable("data1","data2","data3","data4","data5") });
            module.exports = {
                data: data
                <Each Items="{data}">
                    <DockPanel ClipToBounds="true">
                            <Resize X="1" Y="1" RelativeTo="LayoutChange" Easing="ExponentialIn" Duration="0.35"/>
                            <Move X="1" Y="1" RelativeTo="LayoutChange" Easing="ExponentialIn" Duration="0.35"/>
                        <DockPanel Dock="Top" Padding="4" Margin="2" Background="#aaa">
                            <Text Value="{title}" FontSize="20" Dock="Left" Alignment="Center" />
                            <Rectangle Width="10%" Height="100%" Alignment="Right">
                                <SolidColor Color="#555" />
                                    <Toggle Target="_itemsVisible" />
                        <StackPanel Margin="15,0,15,0" Dock="Fill" Visibility="Collapsed" ux:Name="_items" >
                            <WhileTrue Value="false" ux:Name="_itemsVisible">
                                <Change _items.Visibility="Visible" />
                            <Each Items="{data}">
                                <Text Padding="2" Margin="2" Value="{}" Background="#aaa" />

Hope this helped :slight_smile: Let me know if you have any further questions