Iconbar

The icon bar is a dashboard element that fills the height of the screen to display a series of icons that open blades when clicked.

Simple demo

Use the icons prop to define the icons in your Iconbar and v-model to automatically keep track of the active icon.

<template>
  <div>
    <div>
      Your selected icon is:
      <ci-icon v-if="selectedIcon" :icon="selectedIcon"/>
      <br><br>
    </div>
    <ci-iconbar
      v-model="selectedIcon"
      :icons=iconBarItem
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedIcon: null,
      states: [],
      iconBarItem: [
        'clock',
        'people-group',
        'file',
        'lock'
      ]
    }
  }
}
</script>

Events

Event	Arguments	Description
@input	The selected icon	Emitted when an icon is chosen