🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Vue Metro Tile is a Vue component for building Windows 10 like metro layout in modern browser.

Featured Layout

Documentation

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

import MetroTile from 'vue-metro-tile';

or

 <script src="/path/to/vue-metro-tile.umd.min.js"></script>

Usage

A blue metro tile with simple texts on 4 faces

<metro-tile     @click="handleClick($event)"      faceStyle="{'background-color': 'blue'}"     >   <div slot="front">     front   </div>   <div slot="back">     back   </div>   <div slot="top">     top   </div>   <div slot="bottom">     bottom   </div> </metro-tile>

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


You May Also Like