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 formed by concentric circles.

Component

Makes an image to be divided in concentric circles.

The component can have the following attributes.

AttributeTypeRequiredDescription
sliderObjecttrueThe VueFlux component responsible of this cube
circlesnumbertrueThe number of circles to be divided into
indexNumber, StringtrueIf a number represents the image index of slider and if string of hexadecimal will just paint it with the defined color

Example:

<flux-vortex :slider="slider" :num-circles="5" :index="1"></flux-vortex>

Methods

MethodParametersDescription
setCsscssObject with the style to be applied to vortex container
transformfuncRuns a transform function for each circle, receiving as parameter the circle and number
Last Updated: 12/12/23, 1:40 AM
Prev
FluxGrid
Next
FluxThumb