FluxCube
Description
Component composed by up to 6 FluxImage that forms a cube.
Attributes
color
Sets the background color to all sides.
The values can be any valid CSS color.
- Type:
String
- Required:
false
colors
Sets the background color to defined sides.
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,
}
images
The object having the image URLs of defined sides.
- 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,
}
depth
Size in pixels for cube depth.
- Type:
Number
- Required:
false
- Default:
0
css
Object with CSS styles in camel case to apply to component.
- Type:
Object
- Required:
false
sides-css
Object with CSS styles in camel case to apply per side.
- Type:
Object
- Required:
false
- Schema:
{
front: Object,
back: Object,
top: Object,
bottom: Object,
left: Object,
right: Object,
}
Methods
getSide(side)
Gets the image by side.
- side
- Type:
String
- Values:
'back' | 'top' | 'bottom' | 'left' | 'right'
- Returns: the FluxImage side component.
- Type:
setCss(css)
Set CSS styles to the cube.
- css
- Description: an object with the CSS attributes in camel case and values.
- Type:
Object
transform(css)
Sets the CSS styles to be transformed to within a transition.
- css
- Description: an object with the CSS attributes in camel case and values.
- Type:
Object
show()
Show the cube, setting visibility
to visible
.
hide()
Hide the cube, setting visibility
to hidden
.
turn(side)
Turns the cube to specified side (front, back, top, bottom, left, right).
- side
- Type:
String
- Values:
'front' | back' | 'top' | 'bottom' | 'left' | 'right'
- Type:
turnTop()
Turns the cube to top.
turnBack()
Turns the cube to back side.
turnBottom()
Turns the cube to bottom.
turnLeft()
Turns the cube to left.
turnRight()
Turns the cube to right.