Styling

Here, you’ll find how to make components' stylization on web’s projects.

Introduction

It’s possible to make two kinds of stylization with Beagle for Web:

  1. Adding style classes
  2. JSON components style

Here, you will see a detailed explanation for each one of them.

Adding style classes

Adding style’s propriety on JSON

To make this change, you must add on your JSON file a styleId propriety with the name of the style’s class that you created on your angular component.

On the example below, check how this addition was made to a hypothetical class named “card”.

{
   "_beagleComponent_": "custom:card",
   "myCustomTitle": "Beagle Web",
   "myCustomDescription": "Lorem ipsum dolor ..."
   "styleId": "card"
}

Inserting a class on components

The process to insert a class to a component varies according to the framework you’re using. Check out the steps of each case in the following tabs:

On Angular, there are two ways to add a class we receive through styleId propriety:

1. Through ViewEncapsulation

Open the file on your angular component and right down the styleUrls propriety on @Component decorator, add the ViewEncapsulation.none. enum.

See how it works on the example below:

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.less'],
  encapsulation: ViewEncapsulation.None,
})

Once you made it, you just have to run the project with one of these commands:

npm run serve
yarn serve

After you add the None enum to a @Component() encapsulation property, it’s necessary to make use of it. Check how to make it on the image below:

2. Through StyleId propriety

Another way to add a class is by maintaining a native encapsulation propriety. To do so, you have to open your Angular’s component file and add a new @Input, that in this case is StyleId.

See how it works on the example below:

export class CardComponent implements OnInit {
  @Input() myCustomTitle: string
  @Input() myCustomDescription: string
  @Input() styleId: string

  constructor() { }
  ...
}

Once you made it, this Input has the reference of the class' name you added on JSON in the previous step. In the sequence, you need to change the HTML as in the model below:

<div class="{{styleId}}">
  <div>
    <h1>{{ myCustomTitle }}</h1>
    <h3>{{ myCustomDescription }}</h3>
  </div>
</div>

Finally, you just have to run the project with one of the these commands:

npm run serve
yarn serve

It doesn’t matter the way you use to connect your style class to a component, all of them may bring the same result and your component can be changed according to the defined style in your class.

On React’s projects, you have to access your class through styleId propriety.

Import your style’s file on the component and then you need to attribute a value to styleId on className through the props.

import React from "react";
import "./custom-text.style.css";

function CustomTextComponent(props) {
  return <p className={props.styleId}>{props.customText}</p>;
}

export default CustomTextComponent;

The elements' components can now receive the class defined on JSON.

Stylizing components through JSON

Another Beagle Web’s possibility is to stylize its components. Check out the following topics of what can be done directly through JSON:

Position

You can change the element’s position on the screen by using the position propriety, like in the example:

{
  ...
    {
      "_beagleComponent_": "beagle:text",
      "text": "Welcome to the Beagle playground!",
      "style": {
        "positionType":"relative",
        "position": {
          "top": {
            "value": 10,
            "type": "REAL"
          },
          "left": {
            "value": 10,
            "type": "REAL"
          }
        }
      }
    }
  ]
}

Margin e Padding

You can change the element’s margin or spacing on the screen by using margin and padding properties, like the example below:

{
  ...
    {
      "_beagleComponent_": "beagle:text",
      "text": "Welcome to the Beagle playground!",
      "style": {
        "margin": {
          "top": {
            "value": 10,
            "type": "REAL"
          },
          "left": {
            "value": 10,
            "type": "REAL"
          }
        }
      }
    }
  ]
}

Size

It’s also possible to change elements' dimension by using Size propriety, which receives the values on Height or Width. See the example below:

{
  "_beagleComponent_": "beagle:container",
    "size": {
      "height": {
        "value": 100,
        "type": "REAL"
      },
      "width": {
        "value": 100,
        "type": "REAL"
      }
    }
  }
  ...
}

Flex

Finally, you have the possibility to add proprieties in a flexbox layout model with Beagle’s library.

{
  "_beagleComponent_": "beagle:container",
  "style": {
    "backgroundColor":"red",
    "flex": {
      "flexDirection": "COLUMN",
      "alignItems": "CENTER",
      "justifyContent": "CENTER"
    }
  }
}
 ...