VueFlux
Home
  • v5
  • v6
  • v7
Demos
GitHub
Home
  • v5
  • v6
  • v7
Demos
GitHub
  • Overview
  • Changelog
  • Installation and usage
  • Templating
  • SSR with Nuxt
  • Components
    • VueFlux
    • FluxParallax
    • FluxCaption
    • FluxControls
    • FluxIndex
    • FluxPagination
    • FluxImage
    • FluxWrapper
    • FluxCube
    • FluxGrid
    • FluxVortex
    • FluxThumb
  • Transitions
    • Blinds 2D
    • Blinds 3D
    • Blocks 1
    • Blocks 2
    • Book
    • Camera
    • Concentric
    • Cube
    • Explode
    • Fade
    • Fall
    • Kenburn
    • Round 1
    • Round 2
    • Slide
    • Swipe
    • Warp
    • Waterfall
    • Wave
    • Zip
  • Custom transitions

Description

Component to make an image grid.

Component

Draws and composes a grid of cubes.

The component can have the following attributes.

AttributeTypeRequiredDescription
sliderObjecttrueThe VueFlux component responsible of this cube
rowsnumbertrueThe number of rows
colsnumbertrueThe number of cols
indexObjecttrueAn object containing the indexes of images to apply to the tile cubes
tileCssObjectfalseInitial tile CSS style

Example:

<flux-grid :slider="slider" :num-rows="5" :num-cols="5" :index="2"></flux-grid>

Methods

MethodParametersDescription
setCsscssObject with the style to be applied to grid container
transformfuncRuns a transform function for each tile, receiving as parameter the cube and number
Last Updated: 12/12/23, 1:40 AM
Prev
FluxCube
Next
FluxVortex