I would like to create a view displaying a pedigree tree, just like the one used as an example by the OP of this SO question: Adding siblings to nodes in a family tree.
I am using Nativescript v8 with angular v13. And being completely new to Nativescript, I am quite lost and couldn't find anything fancy in the documentation.
What I've come up with so far is a very basic tree as follows. But it's obviously far from being fancy or anything:
<StackLayout orientation="vertical">
<StackLayout class="parents-layer"
orientation="horizontal"
horizontalAlignment="center">
<individual [individual]="family.father"></individual>
<individual [individual]="family.mother"></individual>
</StackLayout>
<Scrollview orientation="horizontal">
<StackLayout class="children-layer"
orientation="horizontal"
horizontalAlignment="center"
>
<individual *ngFor="let sibling of family.siblings" [individual]="sibling"></individual>
</StackLayout>
</Scrollview>
</StackLayout>
individual.component.html is as follows:
<StackLayout class="individual" orientation="vertical">
<Label class="name" text="{{individual.name}}" textWrap="true"></Label>
<Label class="name" text="{{individual.surname}}" textWrap="true"></Label>
<Label class="pivot-life-infos" text="{{individual.birth?.date}}, {{individual.death?.date}}"></Label>
</StackLayout>
I come from an angular html/css background and I am quite comfortable with that, but as I understood, we cannot really use that in Nativescript, am I right? If anybody could at least direct me to some literature on the topic of doing customized and complex interfaces, would be very grateful. Cheers