0

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

wiwi
  • 260
  • 2
  • 9

0 Answers0