README.md 2.22 KB
Newer Older
Torsten's avatar
Torsten committed
1 2
# VueJS Widgets

Torsten's avatar
Torsten committed
3
This repository is a collection of VueJS Single File Components that I've written for multiple applications. I try to keep them here together so I can maintain them easier and do updates more frequently.
Torsten's avatar
Torsten committed
4 5 6 7 8 9


**Swoggle**

A light-weight VueJS Toggle/Switch component that can be fully styled and can have a loading state (which uses the Loader.vue from this lib).

Torsten's avatar
Torsten committed
10
![Example of Swoggle Component](https://storage.googleapis.com/openscreenshot/r/u/h/Hygtxghur.png)
Torsten's avatar
Torsten committed
11

Torsten's avatar
Torsten committed
12 13 14

**WaveyMcWaveFace**

Torsten's avatar
Torsten committed
15 16 17
A SVG wave background component that supports multiple overlapping waves (currently 4) which can also be styled and has a prop for animated waves. Built based on an idea and [code examples of George Tsoukatos](https://codepen.io/okconsumer/pen/gOYEyye)

![Example of Wave Component](https://storage.googleapis.com/openscreenshot/B/u/3/Bk7TVx3uB.png)
Torsten's avatar
Torsten committed
18 19 20 21


**Loader**

Torsten's avatar
Torsten committed
22 23 24 25
A beautiful and light-weight CSS-only loading state animation that can be fully styled and size-adjusted via (S)CSS.

**LikertScale**

26 27
A VueJS Component to display a rating scale, often found on survey forms, that measures how people feel about something. It includes a series of questions that you ask people to answer, and displays responses people can choose from.

Torsten's avatar
Torsten committed
28 29
![Example of Likert Scale Component](https://storage.googleapis.com/openscreenshot/H/_/h/SyNJMeh_H.png)

30 31 32
**BreadCrumbs**

This is a simple VueJS breadcrumb component which automatically generates and displays a clickable link structure based on the VueRouter object and current route.
Torsten's avatar
Torsten committed
33 34
The BreadCrumb component does not have )or need) any props at this point.

Torsten's avatar
Torsten committed
35 36 37
![Example of BreadCrumbs Component](https://storage.googleapis.com/openscreenshot/S/O/3/B1LfGx3OS.png)

**RollRegister**
Torsten's avatar
Torsten committed
38

Torsten's avatar
Torsten committed
39 40 41
This is a styled component that can display card items overlapping each other and animating the z-index on hover (for lack of a better explanation).

![Example of RollRegister Component](https://storage.googleapis.com/openscreenshot/r/d/n/SJhAvxndr.png)
Torsten's avatar
Torsten committed
42 43 44 45 46 47


**CalenderWidget**

This is a styled component which displays a Calender Date selector on a page. It's prepared to have onclick actions on each date (doSomething()).

Torsten's avatar
Torsten committed
48
![Example of CalendarWidget Component](http://www.nunki.com.au/img/calendarwidget.png)
Torsten's avatar
Torsten committed
49 50

Demo: https://codepen.io/TorstenMcFly/pen/qBBXYEe