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?

Thanks

Hi!

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">
    <ClientPanel>
        <JavaScript>
            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
            };
        </JavaScript>
        <ScrollView>
            <StackPanel>
                <Each Items="{data}">
                    <DockPanel ClipToBounds="true">
                        <LayoutAnimation>
                            <Resize X="1" Y="1" RelativeTo="LayoutChange" Easing="ExponentialIn" Duration="0.35"/>
                            <Move X="1" Y="1" RelativeTo="LayoutChange" Easing="ExponentialIn" Duration="0.35"/>
                        </LayoutAnimation>
                        <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" />
                                <Clicked>
                                    <Toggle Target="_itemsVisible" />
                                </Clicked>
                            </Rectangle>
                        </DockPanel>
                        <StackPanel Margin="15,0,15,0" Dock="Fill" Visibility="Collapsed" ux:Name="_items" >
                            <WhileTrue Value="false" ux:Name="_itemsVisible">
                                <Change _items.Visibility="Visible" />
                            </WhileTrue>
                            <Each Items="{data}">
                                <Text Padding="2" Margin="2" Value="{}" Background="#aaa" />
                            </Each>
                        </StackPanel>
                    </DockPanel>
                </Each>
            </StackPanel>
        </ScrollView>
    </ClientPanel>
</App>

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