It’s possible to make two kinds of stylization with Beagle for Web:
Here, you will see a detailed explanation for each one of them.
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"
}
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:
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:
If you want to see more about ViewEncapsulation, check out Angular’s documentation.
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.
styleId
class added, it’s fundamental that you have a style file inside your project (Ex: CSS, SASS, LESS).Another Beagle Web’s possibility is to stylize its components. Check out the following topics of what can be done directly through JSON:
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"
}
}
}
}
]
}
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"
}
}
}
}
]
}
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"
}
}
}
...
}
Notice that, in all the examples above, the proprieties receive the values' maps in a <value, type> format.
The available values in Beagle’s case are:
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"
}
}
}
...
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.