@vue-interface/variant

Variant

A mixin that adds contextual variations to components. This usually deals with the color or the way a component is displayed. This mixin is inherited by many components.

[[toc]]

Installation

NPM

npm i @vue-interface/variant

Yarn

yard add @vue-interface/variant

Options

variant

• Type: string
• Default: primary

The default component variant.

variantPrefix

• Type: string
• Default: kebabCase(this.$options.name)

The variant prefix. By default, the kebab component name is used.

variantClass

• Type: string
• Default: prefix(this.variant, this.variantPrefix)

variantClassPrefix

• Type: string
• Default: kebabCase(this.variantPrefix)

The computed variant class prefix.

Tailwindcss

Plugin

If you want to include Alerts in your Tailwindcss build, then intall the plugin.

module.exports = {
    plugins: [
        require('@vue-interface/variant/tailwind')
    ]
};

Theme

These are the default values. Only override what you need.

module.exports = {
    theme: {
        variations: {
            primary: theme('colors.blue.500', '#9E9E9E'),
            secondary: theme('colors.gray.600', '#718096'),
            danger: theme('colors.red.600', '#E53E3E'),
            success: theme('colors.green.500', '#48BB78'),
            warning: theme('colors.orange.500', '#ED8936'),
            info: theme('colors.teal.400', '#68D391'),
            dark: theme('colors.gray.800', '#2D3748'),
            light: theme('colors.gray.100', '#F7FAFC'),
            muted: theme('colors.white', '#FFF')
        }
    }
}