# 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:

In case you don't use router, 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. On the contrary, the initial view is handled by vue-router, so you don't need to declare.

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

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

• See:
  • Getting started: Quick start
  • Tutorial

# 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' // Required,
      params: { your params } // Optional
    })  
  /* ... */
}

• See:
  • API. z-spot: Using programmatic navigation

# 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',
        shape: 'circle'
      },
      router: router,
      debug: false,
      usePercentSizes: true,
      percentSizes: {
        xxl: 30,
        xl: 20,
        l: 16,
        m: 8,
        s: 6,
        xs: 4,
        xxs: 2
      },
      minSizesInPixels: {
        xxl: 180,
        xl: 150,
        l: 100,
        m: 80,
        s: 50,
        xs: 30,
        xxs: 20
      }
    })
  }
}

• Options:

• See:
  • z-canvas
  • Tutorial: settings view

# getTheme()

Returns the current app theme.

• See
  • Themes and styles
  • Tutorial: settings view

# getThemeMode()

Returns the current app theme mode.

• See
  • Themes and styles

# 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.

# isUsingPercentSizes()

• Usage:

You need to use isUsingPercentSizes to retrieve the current usePercentSizes value of the state

# resetConfig()

• Usage:

You need to use resetConfig to reset all the state values to their initial values and thus completely reinitialize zircle

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

• See
  • Getting started: Quick start
  • Tutorial: device view