v-omni

0.1.0 • Public • Published

V-Omni

Swiss army knife Vue components

Setup

npm i v-omni
import Vue from 'vue'
import Omni from 'v-omni'

Vue.use(Omni)

All examples use CSS classes defined in Tailwind. Some components also use MDI icons. If you would like to use these from CDN, include these in the head of your root HTML:

<link href="https://cdn.materialdesignicons.com/3.4.93/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">

Components

Icon

<icon> is a flexible component that dynamically displays an icon as described by an Object.

<icon :icon="{ type: 'mdi', value: 'star' }"/>

The icon prop accepts the following keys:

  • type (required) has possible values 'mdi', 'svg', 'text', and 'complex'
  • value (required) is the value corresponding to the type.
    • For 'text' and 'svg', the value is the string value you'd like to use.
    • For 'mdi', the value is the name of the icon without the mdi- prefix
    • For 'complex', the value is an array of non-complex icon prop objects. This will layer the icons in the given order.
  • wrapperClass and wrapperStyle for full vue class and style bindings on the wrapper
  • iconClass and iconStyle for the same on the icon itself (does not work with 'complex' type)

<icon> also accepts an array

Readme

Keywords

Package Sidebar

Install

npm i v-omni

Weekly Downloads

0

Version

0.1.0

License

ISC

Unpacked Size

12.5 kB

Total Files

12

Last publish

Collaborators

  • sirberus