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
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 Let me know if you have any further questions