Skip to content
This repository has been archived by the owner on Jan 8, 2020. It is now read-only.

Idea: Add global knobs to toggle/edit $vuetify props in stories #4

Open
morphatic opened this issue Dec 15, 2019 · 0 comments
Open

Comments

@morphatic
Copy link

In .storybook/addon-vuetify/decorator.js I added a knob to toggle the theme like so:

// inside of the `wrapper()` function
return Vue.extend({
  vuetify,
  components: { WrappedComponent },
  props: {
    dark: {
      default: boolean('Dark Theme', false), // or options.theme.dark see #2 
    },
  },
  watch: {
    dark (val) {
      this.$vuetify.theme.dark = val
    },
  },
  template: `
    <v-app>
      <v-container fluid>
        <wrapped-component />
      </v-container>
    </v-app>
  `
})

Now in all of my stories, there's a knob that allows me to toggle Vuetify's dark theme on and off to see what components look like in those scenarios. Here are some screenshots:

Vuetify with default light theme
Vuetify with dark theme toggled on

Dunno if this kinda thing should be baked into the addon or not, but I thought it was a neat trick that I'd share.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant