Skip to content

Commit

Permalink
update: example of applyStyle and applyFlex on the component position…
Browse files Browse the repository at this point in the history 
…ing pages (#591)

* update example of applyStyle and applyFlex on the component positioning pages

* change in the Size() code block to Size.box()
  • Loading branch information
@luisoliveirazup
luisoliveirazup committed Jun 1, 2021
1 parent 54f628a commit 1a2f4d8
Show file tree
Hide file tree
Showing 32 changed files with 1,191 additions and 1,497 deletions.
84 changes: 36 additions & 48 deletions content/en/resources/components-positioning/align-content.md
View file
Expand Up @@ -39,14 +39,12 @@ private fun screen() :Widget{
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).applyFlex(
Flex(
grow = 1.0,
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.WRAP,
alignContent = AlignContent.STRETCH
)
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
flexWrap = FlexWrap.WRAP
alignContent = AlignContent.STRETCH
}
}
```

Expand Down Expand Up @@ -120,14 +118,12 @@ private fun screen() :Widget{
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).applyFlex(
Flex(
grow = 1.0,
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.WRAP,
alignContent = AlignContent.FLEX_START
)
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
flexWrap = FlexWrap.WRAP
alignContent = AlignContent.FLEX_START
}
}
```

Expand Down Expand Up @@ -201,14 +197,12 @@ private fun screen() :Widget{
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).applyFlex(
Flex(
grow = 1.0,
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.WRAP,
alignContent = AlignContent.FLEX_END
)
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
flexWrap = FlexWrap.WRAP
alignContent = AlignContent.FLEX_END
}
}
```

Expand Down Expand Up @@ -282,14 +276,12 @@ private fun screen() :Widget{
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).applyFlex(
Flex(
grow = 1.0,
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.WRAP,
alignContent = AlignContent.CENTER
)
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
flexWrap = FlexWrap.WRAP
alignContent = AlignContent.CENTER
}
}
```

Expand Down Expand Up @@ -363,14 +355,12 @@ private fun screen() :Widget{
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).applyFlex(
Flex(
grow = 1.0,
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.WRAP,
alignContent = AlignContent.SPACE_BETWEEN
)
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
flexWrap = FlexWrap.WRAP
alignContent = AlignContent.SPACE_BETWEEN
}
}
```

Expand Down Expand Up @@ -444,14 +434,12 @@ private fun screen() :Widget{
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).applyFlex(
Flex(
grow = 1.0,
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.WRAP,
alignContent = AlignContent.SPACE_AROUND
)
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
flexWrap = FlexWrap.WRAP
alignContent = AlignContent.SPACE_AROUND
}
}
```

Expand Down
224 changes: 77 additions & 147 deletions content/en/resources/components-positioning/align-items.md
View file
Expand Up @@ -27,13 +27,11 @@ Items will be expanded to fill the entire dimension of the cross axis \(height o
createText(backgroundColor = "#dd7631", text = "texto 2"),
createText(backgroundColor = "#649d66", text = "texto 3")
)
).applyFlex(
Flex(
grow = 1.0,
justifyContent = JustifyContent.SPACE_EVENLY,
alignItems = AlignItems.STRETCH
)
)
).setFlex {
grow = 1.0
justifyContent = JustifyContent.SPACE_EVENLY
alignItems = AlignItems.STRETCH
}
}
```

Expand Down Expand Up @@ -78,41 +76,24 @@ Items are shifted to the cross axis start:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1")
.applyFlex(
flex = Flex(
size = Size(
width = 300.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#dd7631", text = "texto 2")
.applyFlex(
flex = Flex(
size = Size(
width = 200.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#649d66", text = "texto 3")
.applyFlex(
flex = Flex(
size = Size(
width = 150.unitReal(),
height = 100.unitReal()
)
)
)
)
).applyFlex(
Flex(
grow = 1.0,
justifyContent = JustifyContent.SPACE_EVENLY,
alignItems = AlignItems.FLEX_START
)
)
createText(backgroundText = "#142850", text = "1")
.setStyle {
size = Size.box(width = 300, height = 100)
},
createText(backgroundText = "#dd7631", text = "2")
.setStyle {
size = Size.box(width = 200, height = 100)
},
createText(backgroundText = "#649d66", text = "3")
.setStyle {
size = Size.box(width = 150, height = 100)
}
)
).setFlex {
grow = 1.0
justifyContent = JustifyContent.SPACE_EVENLY
alignItems = AlignItems.FLEX_START
}
}
```

Expand Down Expand Up @@ -160,41 +141,24 @@ Items are shifted to the cross axis end:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1")
.applyFlex(
flex = Flex(
size = Size(
width = 300.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#dd7631", text = "texto 2")
.applyFlex(
flex = Flex(
size = Size(
width = 200.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#649d66", text = "texto 3")
.applyFlex(
flex = Flex(
size = Size(
width = 150.unitReal(),
height = 100.unitReal()
)
)
)
)
).applyFlex(
Flex(
grow = 1.0,
justifyContent = JustifyContent.SPACE_EVENLY,
alignItems = AlignItems.FLEX_END
)
)
createText(backgroundText = "#142850", text = "1")
.setStyle {
size = Size.box(width = 300, height = 100)
},
createText(backgroundText = "#dd7631", text = "2")
.setStyle {
size = Size.box(width = 200, height = 100)
},
createText(backgroundText = "#649d66", text = "3")
.setStyle {
size = Size.box(width = 150, height = 100)
}
)
).setFlex {
grow = 1.0
justifyContent = JustifyContent.SPACE_EVENLY
alignItems = AlignItems.FLEX_END
}
}
```

Expand Down Expand Up @@ -242,41 +206,24 @@ Items are centered on the cross axis:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1")
.applyFlex(
flex = Flex(
size = Size(
width = 300.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#dd7631", text = "texto 2")
.applyFlex(
flex = Flex(
size = Size(
width = 200.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#649d66", text = "texto 3")
.applyFlex(
flex = Flex(
size = Size(
width = 150.unitReal(),
height = 100.unitReal()
)
)
)
)
).applyFlex(
Flex(
grow = 1.0,
justifyContent = JustifyContent.SPACE_EVENLY,
alignItems = AlignItems.CENTER
)
)
createText(backgroundText = "#142850", text = "1")
.setStyle {
size = Size.box(width = 300, height = 100)
},
createText(backgroundText = "#dd7631", text = "2")
.setStyle {
size = Size.box(width = 200, height = 100)
},
createText(backgroundText = "#649d66", text = "3")
.setStyle {
size = Size.box(width = 150, height = 100)
}
)
).setFlex {
grow = 1.0
justifyContent = JustifyContent.SPACE_EVENLY
alignItems = AlignItems.CENTER
}
}
```

Expand Down Expand Up @@ -324,41 +271,24 @@ Items are aligned acording to the firt text line in each element.
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1")
.applyFlex(
flex = Flex(
size = Size(
width = 300.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#dd7631", text = "texto 2")
.applyFlex(
flex = Flex(
size = Size(
width = 200.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#649d66", text = "texto 3")
.applyFlex(
flex = Flex(
size = Size(
width = 150.unitReal(),
height = 100.unitReal()
)
)
)
)
).applyFlex(
Flex(
grow = 1.0,
justifyContent = JustifyContent.SPACE_EVENLY,
alignItems = AlignItems.BASELINE
)
)
createText(backgroundText = "#142850", text = "1")
.setStyle {
size = Size.box(width = 300, height = 100)
},
createText(backgroundText = "#dd7631", text = "2")
.setStyle {
size = Size.box(width = 200, height = 100)
},
createText(backgroundText = "#649d66", text = "3")
.setStyle {
size = Size.box(width = 150, height = 100)
}
)
).setFlex {
grow = 1.0
justifyContent = JustifyContent.SPACE_EVENLY
alignItems = AlignItems.BASELINE
}
}
```

Expand Down

0 comments on commit 1a2f4d8

Please sign in to comment.