lenra-io/lenra_ui_runner
automatic return to the line in a text type component
Open
#52 opened on Oct 7, 2021
help wantedquestion
Repository metrics
- Stars
- (3 stars)
- PR merge metrics
- (PR metrics pending)
Description
``we must be able to return to the line when the text component take the total size of the flex in a text type component. Actual : the value of a text component is displayed entirely on one line and the other block beside it must be taken out of the screen
in this picture we see the normal behavior of a text component
in this picture we can see the block exercice 3 go out of the screen
type: "flex",
spacing: 2,
direction: "col",
padding: { top: 2, bottom: 2, right: 2, left: 2 },
children: [{
type: "styledContainer",
color: 0xFFFFFFFF,
border: {
top: {
width: 0.5,
color: 0xFFDCE0E7
},
left: {
width: 0.5,
color: 0xFFDCE0E7
},
bottom: {
width: 0.5,
color: 0xFFDCE0E7
},
right: {
width: 0.5,
color: 0xFFDCE0E7
}
},
boxShadow: {
blurRadius: 10,
offset: {
dx: 4,
dy: 4
},
color: 0xFF000000
},
child: {
type: "flex",
spacing: 2,
padding: { right: 1.5, left: 1.5 },
mainAxisAlignment: "spaceEvenly",
fillParent: true,
crossAxisAlignment: "center",
direction: "col",
children: [
{
type: "text",
value: "Nom du chien",
style: "headline2"
},
{
type: "flex",
mainAxisAlignment: "spaceBetween",
fillParent: true,
spacing: 2,
children: [
{
type: "flex",
direction: "col",
spacing: 2,
padding: { top: 1, bottom: 1 },
crossAxisAlignment: "center",
children: [
{
type: "text",
value: "Exercice 1 :",
style: "headline3"
},
{
type: "text",
value: "Promenade"
},
{
type: "text",
value: "Description : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed tempor mauris. Pellentesque nulla lorem, laoreet sit amet risus sed, tincidunt accumsan mi. Interdum tincidunt accumsan mi. Interdum"
},
{
type: "text",
value: "1/5"
}
]
},
{
type: "flex",
direction: "col",
spacing: 2,
padding: { top: 1, bottom: 1 },
crossAxisAlignment: "center",
children: [
{
type: "text",
value: "Exercice 2 :",
style: "headline3"
},
{
type: "text",
value: "Titre "
},
{
type: "text",
value: "Description : Lorem Ipsum"
},
{
type: "text",
value: "5/5"
}
]
}, {
type: "flex",
direction: "col",
spacing: 2,
padding: { top: 1, bottom: 1 },
crossAxisAlignment: "center",
children: [
{
type: "text",
value: "Exercice 3 :",
style: "headline3"
},
{
type: "text",
value: "Titre"
},
{
type: "text",
value: "Description : Lorem Ipsum dolor sit amet consectetur adipiscing elit"
},
{
type: "text",
value: "3/5"
}
]
}
]
},
]
}
}]```