Press "Enter" to skip to content

A Windows 10-like Metro Tile Component In Vue

Vue Metro Tile is a component of Vue to build Windows 10-like metro layouts in modern browsers.

The component currently has the following features:

  • Custom tile content
  • 3D tile rotation
  • Glow effect when hovering or clicking
  • Tilt effect when the mouse is held down

Slots

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

Events

  • click
  • touchmove

A Small CSS Framework for Building Windows 7 UI | 7.css

How to make use of it:

Install

npm install vue-metro-tile --save
or
yarn add vue-metro-tile

Usage

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

windows 10 metro tile component, vue metro tile Plugin/Github


See Demo And Download

Official Website(yuanfux): Click Here

This superior jQuery/javascript plugin is developed by yuanfux. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *