brick-deck

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

Demo

Check it live!

Usage

1. Import Web Components polyfill:

   <script src="bower_components/platform/platform.js"></script>

2. Import Custom Element:

   <link rel="import" href="dist/brick-deck.html">

3. Start using it:

   <brick-deck selected-index="0">
     <brick-card selected>0</brick-card>
     <brick-card>1</brick-card>
     <brick-card>2</brick-card>
     <brick-card>3</brick-card>
     <brick-card>4</brick-card>
   </brick-deck>

Options

Attribute	Options	Default	Description
transition-type	string slide-left slide-right slide-up slide-down	-	Defines the type of animation to use for cycling between cards. The default is no transition animation. This property can either be set as an HTML attribute under the name transition-type, or programmatically with the property transitionType selected-index.
selected-index	number	-	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

Poperty	Type	Description
transitionType	string	corresponds to the transition-type attribute
selectedIndex	string	corresponds to the selected-index attribute
loop	boolean	corresponds to the loop attribute
cards (getter only)	array	array of all the brick-card elements contained in an brick-deck
selectedCard (getter only)	brick-card	the brick-card DOM element that is currently displayed by the deck. Returns null if no such card exists.

Methods

Method	Returns	Description
showCard(index / element, [direction])	-	Transitions to the brick-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

Event	Description
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.

Development

Brick components use Stylus to generate their CSS.

This repository comes outfitted with a set of tools to ease the development process.

To get started:

• Install Bower & Gulp:

  $ npm install -g bower gulp

• Install local dependencies:

  $ npm install && bower install

While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.

To run the development server:

• Run gulp server
• Navigate to http://localhost:3001

To simply build and lint your code, run gulp build.

You can also push your code to GitHub Pages by running gulp deploy.