Overview

Here, you’ll find information about how to position components on a device screen using Beagle.

Introduction

Beagle will use a dependency called Yoga layout to position components on your application screen. To do this, Yoga calculates the position the elements are, and after that, it does its rendering.

About Yoga Layout

Yoga is framework developed by Facebook that position views using the Flexbox concept for Android and iOS applications.

Flexbox is a CSS concept that positions elements in containers dynamically so that, regardless of your application dimensions, you can maintain a flexible layout.

Here follows some key concepts about Flexbox:

  • Main Axis
  • Cross Axis
  • Main Size

For Main Size, it is possible to set 3 types of dimensions:

  1. Cross Size: The size of a cross axis.
  2. Main Start and Main The Start and End point in a main axis.
  3. Cross Start and Cross End: Start and end in a cross axis.

These axis values will depend on what is defined at the Flex-direction property.

If it is defined as:

row ou row-reverse:column ou column-reverse:
The main axis will be horizontal and the cross axis will be vertical.The main axis will be vertical and the cross axis will be horizontal.

Properties

There are some properties that Yoga Layout may use to insert, alter or delete components.

UnitValue

The Basis, Size, Margin, Padding and Position attributes receive a UnitValue that contains a Bind<Double> value and a UnitType, which is an enum with the following options:

UnitTypeDefinition
REALApply a Bind<Double>value
PERCENTApply a Bind<Double> value as percentage of the parent size
AUTOFollows the parent’s value. Except when it has its own size

The UnitType.AUTO can be used on iOS, Android and Web fronts according to the table below:

AttributesAndroidiOSWEB
Basis
Size
Margin
Padding
Position

Flex Direction

This section lists information about the Flex Direction property

Grow

This section lists information about the Grow property

Justify Content

Here, you’ll find lists' information about the Justify Content property

Align Content

This section lists information about the Align Content property

Align Items

This section lists information about the Align Items property

Align Self

This section lists information about the Align Self property

Flex Wrap

This section lists information about the Flex Wrap property.

Margin

This section lists information about the Margin property

Padding

This section lists information about the Padding property.

Position

Here you’ll find Position description and its proprieties details.

Positiontype

This section lists information about the Position Type property

Basis

This section lists information about the Basis property

Shrink

This section lists information about the Shrink property

Size

This section lists information about the Size property

Display

This section lists information about the Display property

Flex

This section lists information about the Flex property