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.

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'

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.

Last Updated: