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

Preview

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

View Demo

The demo is empowered by vue-metro-tile & vue-grid-layout

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;

// current showing face
// changing this prop at run time will induce the rotating animation
frontFace?: 'front' | 'back' | 'top' | 'bottom' = 'front';

// 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

Browser compatibility

Firefox	Chrome	Safari	Opera
latest	latest	latest	latest

License

MIT