x-tag / deck

Custom Element for card-based UI with a variety of transitions

Overview

A box element in which cards can be cycled independently of order with a variety of different transitions

Usage

<x-deck>
    <x-card>Lorem ipsum</x-card>
    
    <x-card><img src="http://placekitten.com/300"/></x-card>
    
    <x-card><button>Hello!</button></x-card>
</x-deck>

Indicates that the browser should render a deck box with three cards: one with the text "Lorem ipsum", one with an image, and one with a button.

Note that <x-card> elements can contain any kind of html markup!

Attributes

transition-type / transitionType

Defines the type of animation to use for cycling between cards. The default is no transition animation - cars are switched instantaneously.

This property can either be set as an HTML attribute under the name transition-type, or programmatically with the property transitionType

Valid options:

• slide-left
• slide-up
• slide-right
• slide-down
• fade-scale

selected-index / selectedIndex

Gets/sets the index of the currently selected card in the deck

Can either be set as an HTML attribute under the name selected-index or programmatically with the property selectedIndex

loop (boolean)

Toggle allowance of looping when calling nextCard and previousCard methods has reached the end of either side of the index.

Accessors

cards (getter only)

Returns an array of all the x-card elements contained in an x-deck

selectedCard (getter only)

Returns the x-card DOM element that is currently displayed by the deck. Returns null if no such card exists.

Methods

showCard(index||element, [direction])

Transitions to the x-card at the given index within the deck.

If given a direction of 'forward', will perform the forwards/normal version of the current transition animation. If given 'reverse', will performs the reverse animation. If the direction is omitted, the deck will perform a forward animation.

hideCard(index||element)

Hides the card element or card located at a specified index.

nextCard([direction])

Transitions to the next card in the deck, looping back to the start if needed.

previousCard([direction])

Transitions to the previous card in the deck, looping back to the end if needed.

Events

show

Fired from a card target after it has completed its show animation, and the show state has been finalized.

hide

Fired from a card target after it has completed its hide animation, and the hide state has been finalized.

Styling

Because <x-deck> and <x-card> elements are just regular DOM elements, you can style them as normal.

However, decks also add some extra selectors, allowing you to fine tune how cards appear during animations. (The following examples use the same html structure as the usage example.)

• Styles applied to x-deck > x-card[selected] are only applied to the currently visible card in the deck.
• Styles applied to x-deck > x-card[hide] define how a card looks when in the middle of transitioning out of view

  • For example, if you wanted cards to be faded when leaving the deck's viewport, you could apply the following style:

      x-deck > x-card[hide]{
          opacity: 0.7;
      }
    

Misc

Adding/removing cards

To add and remove cards, you don't need any special x-deck specific methods. You can simply appendChild and removeChild <x-card> elements to the <x-deck> as you would any other DOM element.