FluxGrid
Description
Component to make grid of image or cube.
Attributes
rows
The number of rows the grid will be made of.
- Type:
Number
- Required:
false
- Default:
1
cols
The number of cols the grid will be made of.
- Type:
Number
- Required:
false
- Default:
1
color
Sets the background color.
The values can be any valid CSS color.
- Type:
String
- Required:
false
colors
Sets the background color to defined sides in case grid is made of cubes.
The values can be any valid CSS color.
- Type:
Object
- Required:
false
- Schema:
{
front: String,
back: String,
top: String,
bottom: String,
left: String,
right: String,
}
image
The URL of the image to be displayed.
Use this attribute if you want the grid be made of images.
- Type:
String
- Required:
false
WARNING
If you use this attribute but the images
is also defined, images
will have preference and this will have no effect.
images
The object having the image URLs of defined sides.
Use this attribute if you want the grid to be made of cubes.
- Type:
Object
- Required:
true
- Schema:
{
front: String,
back: String,
top: String,
bottom: String,
left: String,
right: String,
}
size
This size is the width and height in pixels that the component will have.
The images received will be scaled and positioned to cover this size.
- Type:
Object
- Required:
true
- Schema:
{
width: Number,
height: Number,
}
view-size
When received, the component will overwrite the size
attribute, but maintain the image scaled and position values.
- Type:
Object
- Required:
false
- Schema:
{
width: Number,
height: Number,
}
depth
Size in pixels for cubes' depth in case the grid is made of cubes
- Type:
Number
- Required:
false
- Default:
0
css
Object with CSS styles in camel case to apply to component.
- Type:
Object
- Required:
false
tile-css
Object with CSS styles in camel case to be applied to all tiles.
- Type:
Object
- Required:
false
Methods
setCss(css)
Set CSS styles to the grid.
- css
- Description: an object with the CSS attributes in camel case and values.
- Type:
Object
transform(function)
Runs a function transform to each tile.
- function
- Description: function to be run per tile.
- Type:
Function
- Parameters: the function receives
component
andindex
as parameters. - Example:
grid.transform((tile, i) => {
tile.transform({
transition: `all 300ms ease ${i * 100}`,
opacity: 0,
});
});
show()
Show the grid, setting visibility
to visible
.
hide()
Hide the grid, setting visibility
to hidden
.