Public API

When zircle-ui is installed you have access to $zircle and the actionsof the zircle-ui state management. A few of them are "public" and a lot are internal but usefull if you want to contribute.

You can call three action to control zircle-ui:

setView(viewName)

  • Params:

    • {string} viewName
  • Usage:

You need to use setView to set the initial view name of your application. If you forget to set the initial view, no view will be shown.

Use setView in the mounted hook. Chosse the name of your defined views. It is case insensitive.




 



export default {
  /* ... */
  mounted() {
    this.$zircle.setView('home')  
  }
}

toView(viewName || definition)

  • Params:

    • {string} viewName

    or

    • {Object} [definition]
  • Usage:

toViewis a sintax sugar of setView and it is indicated to perfom programmatic navigation.

Use toView in the script vue section.

Option 1

You can point the name of your defined view. It is case insensitive. In those cases the next view will appear in the center of the screen, because it doesn't have a initial z-spot to take as position reference.




 


export default {
  /* ... */
    this.$zircle.toView('home')  
  /* ... */
}

Option 2 (recommended)

In case you want a new view appears from a specific z-spot you'll need to define an object as follows:




 






export default {
  /* ... */
    this.$zircle.toView({
      to: 'name of the new view' // string. Required,
      fromSpot: 'reference of the z-spot' // Optional,
      params: { your params } // Optional
    })  
  /* ... */
}

config([definition])

  • Params:

    • {Object} [definition]
  • Usage:config is optional. Just in case you want to modify the default values of the appiclation or in case you are using router.




 
 
 
 
 
 
 
 
 



export default {
  /* ... */
  mounted() {
    $zircle.config({
      mode:'full',
      style: {
        theme: 'black',
        mode: 'dark'
      },
      router: router,
      debug: false 
    })
  }
}
  • Options:
OptionTypeDefault valueDescription
modeStringfullThe default value is 'full' to use Zircle in a full mode. In case you want to include Zircle in other application use 'mixed'.
styleObjecttheme: 'black', mode: 'dark'You can change the general look and feel of your application modifying theme and color. The complete list of themes and color included in zircle-ui can be found here
routerObject---In case your application uses vue-router just pass the created router here. For more information about using vue-router with zircle here
debugBooleanfalseDebug is disabled by default. If you want to see and config a detailed zircle's log here

TIP

With 'mixed' mode you need to define the size of the z-canvas (v.g style="width: 40%; height: 500px;"). zircle-ui will adapt its views and components taking into account the size of the z-canvas, not the browser viewport

getTheme()

Returns the current app theme.

getThemeMode()

Returns the current app theme mode.

getParams([definition])

  • Params:

    • {Object} [definition]
  • Usage:

You need to use getParams to retrieve the params that were passed in the property toView of a z-spot.




 






export default {
  computed: {
    retrieveParams () {
      if (this.$zircle.getParams() !== undefined) {
        return this.$zircle.getParams().fruit
      }
    }
  }
}