Package Exports

@vue-interface/variant
@vue-interface/variant/dist/variant.es.js
@vue-interface/variant/dist/variant.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vue-interface/variant) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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')
        }
    }
}