Flexbox docs
Updated the flexbox documentation for the current flexbox implementation
This commit is contained in:
22
docs/objects/Flexbox/addBreak.md
Normal file
22
docs/objects/Flexbox/addBreak.md
Normal file
@@ -0,0 +1,22 @@
|
||||
## addBreak
|
||||
|
||||
### Description
|
||||
|
||||
The `addBreak` method adds a line break to the Flexbox container. This causes the subsequent children to start on a new line or column, depending on the flex direction. This is helpful when you want to control the arrangement of children within the Flexbox container.
|
||||
|
||||
### Returns
|
||||
|
||||
1. `object` The object in use
|
||||
|
||||
### Usage
|
||||
|
||||
* Creates a default Flexbox, adds some objects to it, and then adds a break before adding more objects.
|
||||
|
||||
```lua
|
||||
local main = basalt.createFrame()
|
||||
local flexbox = mainFrame:addFlexbox()
|
||||
flexbox:addButton()
|
||||
flexbox:addButton()
|
||||
flexbox:addBreak() -- adds a line break
|
||||
flexbox:addButton() -- this object will start on a new line
|
||||
```
|
||||
20
docs/objects/Flexbox/getDirection.md
Normal file
20
docs/objects/Flexbox/getDirection.md
Normal file
@@ -0,0 +1,20 @@
|
||||
## getDirection
|
||||
|
||||
### Description
|
||||
|
||||
Returns the current direction in which the child objects are arranged within the Flexbox.
|
||||
|
||||
### Returns
|
||||
|
||||
1. `string` The direction in which the child objects are arranged. Possible values are: row, column.
|
||||
|
||||
### Usage
|
||||
|
||||
* Creates a default Flexbox, sets the direction, and then retrieves it.
|
||||
|
||||
```lua
|
||||
local main = basalt.createFrame()
|
||||
local flexbox = mainFrame:addFlexbox()
|
||||
:setDirection("column")
|
||||
local direction = flexbox:getDirection() -- returns "column"
|
||||
```
|
||||
21
docs/objects/Flexbox/getFlexBasis.md
Normal file
21
docs/objects/Flexbox/getFlexBasis.md
Normal file
@@ -0,0 +1,21 @@
|
||||
## getFlexBasis
|
||||
|
||||
### Description
|
||||
|
||||
The `getFlexBasis` method retrieves the initial main size of a child object within the Flexbox container. This value represents the starting point for further calculations. If the Flexbox has a direction of 'row', the flex basis is akin to the width. For 'column', it's akin to height.
|
||||
|
||||
### Returns
|
||||
|
||||
1. `number` The current flex basis of the object
|
||||
|
||||
### Usage
|
||||
|
||||
* Creates a default Flexbox, adds some objects to it, sets the flex basis for the first object, and retrieves it.
|
||||
|
||||
```lua
|
||||
local main = basalt.createFrame()
|
||||
local flexbox = mainFrame:addFlexbox()
|
||||
local object1 = flexbox:addButton()
|
||||
object1:setFlexBasis(10) -- this object will have an initial size of 50 pixels along the main axis
|
||||
basalt.debug(object1:getFlexBasis()) -- prints: 50
|
||||
```
|
||||
21
docs/objects/Flexbox/getFlexGrow.md
Normal file
21
docs/objects/Flexbox/getFlexGrow.md
Normal file
@@ -0,0 +1,21 @@
|
||||
## getFlexGrow
|
||||
|
||||
### Description
|
||||
|
||||
The `getFlexGrow` method retrieves the grow factor of a child object within the Flexbox container. This value determines how much of the remaining space along the main axis the child should take up, in relation to the other children.
|
||||
|
||||
### Returns
|
||||
|
||||
1. `number` The grow factor of the child object.
|
||||
|
||||
### Usage
|
||||
|
||||
* Creates a default Flexbox, adds some objects to it, sets the flexGrow for the first object, and then retrieves this value.
|
||||
|
||||
```lua
|
||||
local main = basalt.createFrame()
|
||||
local flexbox = mainFrame:addFlexbox()
|
||||
local object1 = flexbox:addButton()
|
||||
object1:setFlexGrow(1) -- this object will grow to take up remaining space
|
||||
basalt.debug(object1:getFlexGrow()) -- prints 1
|
||||
```
|
||||
21
docs/objects/Flexbox/getFlexShrink.md
Normal file
21
docs/objects/Flexbox/getFlexShrink.md
Normal file
@@ -0,0 +1,21 @@
|
||||
## getFlexShrink
|
||||
|
||||
### Description
|
||||
|
||||
The `getFlexShrink` method retrieves the current shrink factor of a child object within the Flexbox container. This value represents how much the object would shrink compared to other objects in the container, in case there isn't enough space.
|
||||
|
||||
### Returns
|
||||
|
||||
1. `number` The current shrink factor of the object.
|
||||
|
||||
### Usage
|
||||
|
||||
* Creates a default Flexbox, adds some objects to it, sets the flexShrink for the first object, and retrieves it.
|
||||
|
||||
```lua
|
||||
local main = basalt.createFrame()
|
||||
local flexbox = mainFrame:addFlexbox()
|
||||
local object1 = flexbox:addButton()
|
||||
object1:setFlexShrink(2) -- this object will shrink twice as much as the others if necessary
|
||||
basalt.debug(object1:getFlexShrink()) -- prints: 2
|
||||
```
|
||||
20
docs/objects/Flexbox/getJustifyContent.md
Normal file
20
docs/objects/Flexbox/getJustifyContent.md
Normal file
@@ -0,0 +1,20 @@
|
||||
## getJustifyContent
|
||||
|
||||
### Description
|
||||
|
||||
Returns the current method used for aligning the child objects along the main axis within the Flexbox.
|
||||
|
||||
### Returns
|
||||
|
||||
1. `string` The method used for aligning the child objects. Possible values are: `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, and `space-evenly`.
|
||||
|
||||
### Usage
|
||||
|
||||
* Creates a default Flexbox, sets the justify content, and then retrieves it.
|
||||
|
||||
```lua
|
||||
local main = basalt.createFrame()
|
||||
local flexbox = mainFrame:addFlexbox()
|
||||
:setJustifyContent("space-between")
|
||||
local justifyContent = flexbox:getJustifyContent() -- returns "space-between"
|
||||
```
|
||||
20
docs/objects/Flexbox/getWrap.md
Normal file
20
docs/objects/Flexbox/getWrap.md
Normal file
@@ -0,0 +1,20 @@
|
||||
## getWrap
|
||||
|
||||
### Description
|
||||
|
||||
Returns the current setting for whether the child objects should wrap onto the next line if there isn't enough room on the main axis within the Flexbox.
|
||||
|
||||
### Returns
|
||||
|
||||
1. `string` returns `nowrap` or `wrap`
|
||||
|
||||
### Usage
|
||||
|
||||
* Creates a default Flexbox, sets the wrap, and then retrieves it.
|
||||
|
||||
```lua
|
||||
local main = basalt.createFrame()
|
||||
local flexbox = mainFrame:addFlexbox()
|
||||
:setWrap("wrap")
|
||||
local wrapSetting = flexbox:getWrap() -- returns wrap
|
||||
```
|
||||
@@ -1,23 +0,0 @@
|
||||
## setJustifyContent
|
||||
|
||||
### Description
|
||||
|
||||
Determines how the children are aligned along the off axis
|
||||
|
||||
### Parameters
|
||||
|
||||
1. `string` One of ("flex-start", "flex-end", "center", "space-between", "space-around") - default is flex-start. Works the same as the property of the same name in [CSS flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties)
|
||||
|
||||
### Returns
|
||||
|
||||
1. `object` The object in use
|
||||
|
||||
### Usage
|
||||
|
||||
* Creates a default flexbox and sets the align items to space-between.
|
||||
|
||||
```lua
|
||||
local main = basalt.createFrame()
|
||||
local flexbox = mainFrame:addFlexbox()
|
||||
:setAlignItems("space-between")
|
||||
```
|
||||
@@ -1,4 +1,4 @@
|
||||
## setFlexDirection
|
||||
## setDirection
|
||||
|
||||
### Description
|
||||
|
||||
@@ -19,5 +19,5 @@ Sets the direction in which the children will be placed
|
||||
```lua
|
||||
local main = basalt.createFrame()
|
||||
local flexbox = mainFrame:addFlexbox()
|
||||
:setFlexDirection("column")
|
||||
:setDirection("column")
|
||||
```
|
||||
24
docs/objects/Flexbox/setFlexBasis.md
Normal file
24
docs/objects/Flexbox/setFlexBasis.md
Normal file
@@ -0,0 +1,24 @@
|
||||
## setFlexBasis
|
||||
|
||||
### Description
|
||||
|
||||
The `setFlexBasis` method sets the initial main size of a child object within the Flexbox container. This value represents the starting point for further calculations. If the Flexbox has a direction of 'row', the flex basis is akin to the width. For 'column', it's akin to height.
|
||||
|
||||
### Parameters
|
||||
|
||||
1. `number` Flex basis. Currently only numbers available.
|
||||
|
||||
### Returns
|
||||
|
||||
1. `object` The object in use
|
||||
|
||||
### Usage
|
||||
|
||||
* Creates a default Flexbox, adds some objects to it, and sets the flex basis for the first object.
|
||||
|
||||
```lua
|
||||
local main = basalt.createFrame()
|
||||
local flexbox = mainFrame:addFlexbox()
|
||||
local object1 = flexbox:addButton()
|
||||
object1:setFlexBasis(10) -- this object will have an initial size of 10 pixels along the main axis
|
||||
```
|
||||
25
docs/objects/Flexbox/setFlexGrow.md
Normal file
25
docs/objects/Flexbox/setFlexGrow.md
Normal file
@@ -0,0 +1,25 @@
|
||||
## setFlexGrow
|
||||
|
||||
### Description
|
||||
|
||||
The `setFlexGrow` method sets the grow factor of a child object within the Flexbox container. This determines how much of the remaining space along the main axis the child should take up, in relation to the other children. A larger grow factor means the child will take up more of the remaining space.
|
||||
|
||||
### Parameters
|
||||
|
||||
1. `number` The grow factor for the child object. This should be a non-negative number. A value of 0 means the child will not grow beyond its initial size. Default is 0.
|
||||
|
||||
### Returns
|
||||
|
||||
1. `object` The object in use
|
||||
|
||||
### Usage
|
||||
|
||||
* Creates a default Flexbox, adds some objects to it, and sets the flexGrow for the first object.
|
||||
|
||||
```lua
|
||||
local main = basalt.createFrame()
|
||||
local flexbox = mainFrame:addFlexbox()
|
||||
local object1 = flexbox:addButton()
|
||||
object1:setFlexGrow(1) -- this object will grow to take up remaining space
|
||||
local object2 = flexbox:addButton() -- this object will not grow
|
||||
```
|
||||
24
docs/objects/Flexbox/setFlexShrink.md
Normal file
24
docs/objects/Flexbox/setFlexShrink.md
Normal file
@@ -0,0 +1,24 @@
|
||||
## setFlexShrink
|
||||
|
||||
### Description
|
||||
|
||||
The `setFlexShrink` method sets the shrink factor of a child object within the Flexbox container. This value determines how much the child should shrink relative to the rest of the objects in the flex container, if necessary.
|
||||
|
||||
### Parameters
|
||||
|
||||
1. `number` The shrink factor of the child object. The default is 0. A higher value will cause the object to shrink more.
|
||||
|
||||
### Returns
|
||||
|
||||
1. `object` The object in use
|
||||
|
||||
### Usage
|
||||
|
||||
* Creates a default Flexbox, adds some objects to it, and sets the flexShrink for the first object.
|
||||
|
||||
```lua
|
||||
local main = basalt.createFrame()
|
||||
local flexbox = mainFrame:addFlexbox()
|
||||
local object1 = flexbox:addButton()
|
||||
object1:setFlexShrink(2) -- this object will shrink twice as much as the others if necessary
|
||||
```
|
||||
@@ -6,7 +6,7 @@ Determines how the children are aligned along the main axis
|
||||
|
||||
### Parameters
|
||||
|
||||
1. `string` One of ("flex-start", "flex-end", "center", "space-between", "space-around") - default is flex-start. Works the same as the property of the same name in [CSS flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties)
|
||||
1. `string` One of ("flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly") - default is flex-start. Works the same as the property of the same name in [CSS flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties)
|
||||
|
||||
### Returns
|
||||
|
||||
|
||||
25
docs/objects/Flexbox/setWrap.md
Normal file
25
docs/objects/Flexbox/setWrap.md
Normal file
@@ -0,0 +1,25 @@
|
||||
## setWrap
|
||||
|
||||
### Description
|
||||
|
||||
Determines whether the child objects should wrap onto the next line when there isn't enough room along the main axis. The default value is 'nowrap'.
|
||||
|
||||
### Parameters
|
||||
|
||||
1. `string` If set to `wrap`, the child objects will wrap onto the next line when they run out of space. If set to `nowrap`, they will not.
|
||||
|
||||
### Returns
|
||||
|
||||
1. `object` The object in use
|
||||
|
||||
### Usage
|
||||
|
||||
* Creates a default Flexbox and sets the wrapping to `wrap`.
|
||||
|
||||
```lua
|
||||
local main = basalt.createFrame()
|
||||
local flexbox = mainFrame:addFlexbox()
|
||||
:setWrap("wrap")
|
||||
```
|
||||
|
||||
If the contents of the Flexbox exceed its size, they will automatically move to the next line, creating a wrapping effect. This is particularly useful when designing responsive layouts that adapt to different screen sizes or window dimensions.
|
||||
22
docs/objects/Flexbox/updateLayout.md
Normal file
22
docs/objects/Flexbox/updateLayout.md
Normal file
@@ -0,0 +1,22 @@
|
||||
## updateLayout
|
||||
|
||||
### Description
|
||||
|
||||
The `updateLayout` method forces the Flexbox container to manually update its layout. This is particularly useful in situations where dynamic changes occur within the Flexbox and you want to ensure that the layout correctly reflects these changes.
|
||||
|
||||
By default this is not necessarily required. Because the flexbox automatically updates it's layout.
|
||||
|
||||
### Returns
|
||||
|
||||
1. `object` The object in use
|
||||
|
||||
### Usage
|
||||
|
||||
* Creates a default Flexbox, adds an object to it, and then forces a manual layout update.
|
||||
|
||||
```lua
|
||||
local main = basalt.createFrame()
|
||||
local flexbox = mainFrame:addFlexbox()
|
||||
flexbox:addObject(myObject)
|
||||
flexbox:updateLayout() -- forces a manual update of the layout
|
||||
```
|
||||
Reference in New Issue
Block a user