vue-metro-tile

by yuanfux

🔷A windows 10 like metro tile component in vue

147 Stars 22 Forks Last release: Not found 39 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

vue-metro-tile

npm GitHub issues GitHub closed issues Maintenance NpmLicense

Preview

View Demo

The demo is empowered by

vue-metro-tile
&
vue-grid-layout

Vue Metro Tile is a Vue component for building Windows 10 like metro layout in modern browser. The component currently got the following features: 1. Customized tile content 2. 3D tile rotation 3. Glare effect when hovering or clicking 4. Tilt effect when mouse holds down

Install

npm install vue-metro-tile --save

or

yarn add vue-metro-tile

Import

support both cjs and umd

js
import MetroTile from 'vue-metro-tile';
or
js
 

Usage

A blue metro tile with simple texts on 4 faces

html

  
front
back
top
bottom

Props

// style object for all 6 faces
// this prop has a lower priority than specific face style
faceStyle?: object;

// style object for front face frontStyle?: object;

// style object for back face backStyle?: object;

// style object for left face leftStyle?: object;

// style object for right face rightStyle?: object;

// style object for top face topStyle?: object;

// style object for bottom face bottomStyle?: object;

// the width of square prism in px width?: number = 200;

// the height of square prism in px height?: number = 200;

// the rotation along X axis in degree rotateX?: number = 0;

// the perspective of square prism container in px perspective?: number = 750;

// the max tilt angle in degree along the X axis maxTiltX?: number = 20;

// the max tilt angle in degree along the Y axis maxTiltY?: number = 10;

// the initial glare size when clicking clickGlareSize?: number = 90;

// the glare opacity when clicking clickGlareOpacity?: number = 0.15;

// the glare opacity when hovering hoverGlareOpacity?: number = 0.3;

Slots

  • front
  • back
  • left
  • right
  • top
  • bottom

Events

  • click
  • touchmove

Browser compatibility

| IE / Edge
Edge | Firefox
Firefox | Chrome
Chrome | Safari
Safari | Opera
Opera | | :----: | :----: | :----: | :----: | :----: | | latest | latest | latest | latest | latest |

Some older versions may be supported as well

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.