Flip-tile NPM | npm.io

flip-tile

This readme will document how the flip-tile component can be used.

Overview

The flip tile is a custom element with a front and a back. The element will animate a simple rotation animation when clicked. It will also fire a custom event of type 'flip' when the face-up element is changed. The event has the innerHTML of the flipped element in 'event.detail.innerHTML'.

For styling and control, the element has a couple of boolean attributes, styling parts, and slots.

The flip has an animation time of 0.8s.

front

back

Watched Attributes

This component watches two attributes:

face-up
animationtime

face-up is described under the "boolean attributes" heading.

animationtime

This attribute controls the animation time. The value should be the animation time in milliseconds.

Boolean Attributes

The component makes use of three boolean attributes:

face-up
hidden
disabled

face-up

Toggling this attribute will flip the card. The card is facedown by default.

hidden

If this attribute is present the element will not be displayed at all.

disable

If this attribute is present the element will become unflipable, but the current face will still be visible. Making a tile disabled mid-flip breaks the animation, but will give the correct resulting face.

Styling parts

This element has three exposed parts for styling:

tile
front
back

tile

This controls the style of the tile container, which is the parent of the front and back faces of the tile.

By default, the style control for the flipping animation is here. The tile is also slightly larger than the front and back faces, so if it has a different background colour than the faces it will be like a coloured border.