https://github.com/yuanfux/vue-metro-tile

🔷A windows 10 like metro tile component in vue
https://github.com/yuanfux/vue-metro-tile

Last synced: about 2 months ago
JSON representation

🔷A windows 10 like metro tile component in vue

• Host: GitHub
• URL: https://github.com/yuanfux/vue-metro-tile
• Owner: yuanfux
• Created: 2018-09-18T01:45:22.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:51:40.000Z (over 1 year ago)
• Last Synced: 2024-07-11T16:08:54.036Z (2 months ago)
• Language: Vue
• Homepage: https://yuanfux.github.io/vue-metro-tile/
• Size: 5.4 MB
• Stars: 178
• Watchers: 3
• Forks: 24
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# vue-metro-tile

[![npm](https://img.shields.io/npm/v/vue-metro-tile.svg?style=flat-square)](https://www.npmjs.com/package/vue-metro-tile) [![GitHub issues](https://img.shields.io/github/issues/yuanfux/vue-metro-tile.svg?style=flat-square)](https://github.com/yuanfux/vue-metro-tile/issues) [![GitHub closed issues](https://img.shields.io/github/issues-closed/yuanfux/vue-metro-tile.svg?style=flat-square)](https://github.com/yuanfux/vue-metro-tile/issues?q=is%3Aissue+is%3Aclosed) ![Maintenance](https://img.shields.io/maintenance/yes/2019.svg?style=flat-square) ![NpmLicense](https://img.shields.io/npm/l/vue-metro-tile.svg?style=flat-square)



  



## Preview

View [Demo](https://yuanfux.github.io/vue-metro-tile/)

> 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

```js

import MetroTile from 'vue-metro-tile';

```

or

```js

 

```

## Usage

>  A blue metro tile with simple texts on 4 faces

```html

  


    front

  

  


    back

  

  


    top

  

  


    bottom

  


```

## Props

```typescript

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