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