vue-metro-tile

1.0.6 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i vue-metro-tile

Weekly Downloads

28

Version

1.0.6

License

MIT

Unpacked Size

169 kB

Total Files

6

Last publish

Collaborators

  • yuanfux