Skip to content

Latest commit

 

History

History
202 lines (145 loc) · 6.14 KB

README.md

File metadata and controls

202 lines (145 loc) · 6.14 KB

Wireframes

Provides a component collections of application wireframes. Intended to use as root component of Vue apps.

Available wireframes:

  • basic
  • double navigation

Dependencies

  • Vuetify

Basic wireframe

Basic wireframe component.

Props

Name Description Type Required Default
bar bar slot configuration Object false {}
footer footer slot configuration Object false {}
mobileBreakpoint Mobile breakpoint String - one of the $vuetify.breakpoint key false xs
navLeft navLeft slot configuration Object false {}
navRight navRight slot configuration Object false {}

bar options:

  • color: color of the vuetify v-app-bar component (working when dark is not defined)
  • dark: dark status of the vuetify v-app-bar component, default false
  • dense: dense status of the vuetify v-app-bar component, default false
  • height: height of the vuetify v-app-bar component
  • mobileMenuComponent: Vue component for mobile screens, to render instead of the bar slot
  • stateless: stateless status of the vuetify v-navigation-drawer component, used for mobile bars only, default true

footer options:

  • dark: dark status of the vuetify v-footer component, default false
  • height: height of the vuetify v-footer component

navLeft/navRight options:

  • color: color of the vuetify v-navigation-drawer component (working when dark is not defined)
  • dark: dark status of the vuetify v-navigation-drawer component, default false
  • width: width of the vuetify v-navigation-drawer component
  • visible: initial visibility of the navLeft/navRight slot

Slots

Name Description Default Slot Content Optional
default Main app container - true
bar Top bar - true
navLeft Left navigator, collapsable - true
navRight Right navigator, collapsable - true
default Main content - true
footer Footer - true

Double navigation wireframe

Wireframe component with a fixed left mini-variant navigator.

Props

Like basic wireframe, plus:

Name Description Type Required Default
nav nav slot configuration Object false {}

nav options:

  • color: color of the vuetify v-navigation-drawer component
  • width: width of the vuetify v-navigation-drawer component

Slots

Like basic wireframe, plus:

Name Description Default Slot Content Optional
nav Inner left navigator, collapsable - true

Usage

  1. Import the desired wireframe
import { BasicWireframe } from "@/../ditto/wireframes";
// or
// import { DoubleNavigationWireframe } from "@/../ditto/wireframes";
  1. Register the component and the desired wireframe options
export default {
  components: { BasicWireframe },
  data: () => ({
    options: { bar: {...}, navRight: {...}, ... }
  })
};
  1. Use the wireframe component in the html section (usually the wifreframe is the application root component)
<template>
  <basic-wireframe v-bind="options">
    <!-- default slot -->
    <router-view />

    <!-- named slots -->
    <template v-slot:bar="{ className, dark, mobile }">
      <div :class="className" :dark="dark" :mobile="mobile">bar</div>
    </template>

    <template v-slot:navLeft="{ dark }">
      <div :dark="dark">nav left</div>
    </template>

    <template v-slot:navRight="{ dark }">
      <div :dark="dark">nav right</div>
    </template>

    <template v-slot:footer>
      <div>footer</div>
    </template>
  </basic-wireframe>
</template>

Notes

Guest section

All routes with $route.meta.guest == true (see ditto auth module) are mounted outside the layout structure. If needed, a specific wireframe configuration must be specified in the AuthWrapper component.

Slots definition

To customize the wireframe slots you can:

  • import your custom components locally and use them inside the wireframes slots definition:
const MyBarComponent = () => import("@/components/MyBarComponent");

export default {
  components: { BasicWireframe, MyBarComponent },
  data: () => ({ ... })
};
<template>
  <basic-wireframe v-bind="options">
    ...

    <!-- named slots -->
    <template v-slot:bar="{ className, ...data }">
      <my-bar-component :class="className" v-bind="data" />
    </template>

    ...
  </basic-wireframe>
</template>

Use this option for slots whose content are fixed through all your application routes.

  • use named routes, defining your custom components in the router configuration:
{
  name: "basic-wireframe-home",
  path: "home",
  components: {
    ...
    bar: () => import("@/components/MyBarComponent")
  }
},
<template>
  <basic-wireframe v-bind="options">
    ...

    <!-- named slots -->
    <template v-slot:bar="{ className, ...data }">
      <router-view name="bar" :class="className" v-bind="data" />
    </template>

    ...
  </basic-wireframe>
</template>

Use this option for slots whose content change through your application routes.

See the wireframes examples code for more information.