/Mcity-vue-shared

Common vue files/themed components used across projects

Primary LanguageVue

Mcity-vue-shared

Common vue files/themed components used across projects

Usage

Toolbar

  1. Import the McityToolbar component with import McityToolbar from '@mcity/mcity-vue-shared/components/McityToolbar'
  2. Include the toolbar component in the template for app.vue with <mcity-toolbar><mcity-toolbar/>
  3. Pass the following required props
    • fullname
    • username
    • presentation-text
    • isUserAdmin
    • title
  4. There is a named slot available titled "buttons" when any app-specific toolbar buttons can be placed (see example below).
  5. There is another slot, "overflow-buttons" which maps to inside the ellipses menu on the far right of the toolbar.

Example:

<mcity-toolbar
  :fullname="fullname"
  :username="username"
  :presentation-text="presentationText"
  :isUserAdmin="isUserAdmin"
  title="Project Tracking"
>
  <template v-slot:buttons>
    <v-btn
      v-if="isUserAdmin"
      flat
      :to="{name: 'New'}"
      data-cy="new-project-btn">
      New Project
    </v-btn>
  </template>
</mcity-toolbar>