Package Exports

vue-metro-tile

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-metro-tile) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-metro-tile

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:

Customized tile content
3D tile rotation
Glare effect when hovering or clicking
Tilt effect when mouse holds down

Install

npm install vue-metro-tile --save

yarn add vue-metro-tile

Import

support both cjs and umd

import MetroTile from 'vue-metro-tile';

 <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

Edge	Firefox	Chrome	Safari	Opera
latest	latest	latest	latest	latest

Some older versions may be supported as well

License

MIT