Controlling the fan

The rendering of a fan layout, <div class='hand fan'> ... </div>, is controlled by the radius, spacing and the width parameters.

Parameter	Description
radius	The radius of the circle under the fan of cards. Controls the overall curvature of the fan. Small values means higher curvature. The default value is 400.
spacing	The percentage of the card that is shown. The default value is 0.2
width	The pixel width of the card image. The height is automatically calculated to maintain the aspect ratio.
cards	The cards to show. Can be either a space separated list of card names or an array of card names, e.g. 'AS KS' or ['AS', 'KS']

javascript

The parameters for all fan layouts on the page can be changed with the following javascript

cards.options.radius = 200;
cards.options.spacing = 0.4;
cards.options.width = 90;

html

The parameters for a specific fan layout can be changed with the data-hand attribute

<div class='fan' 
     data-fan='spacing: 0.1; width: 80; radius: 80; cards: AS,KS'>
</div>

knockout

The parameters for a specific fan layout are declared with the fan binding of the data-bind attribute. Parameter values can be constant or a ko.observable.

<div class='hand' 
     data-bind='fan: {radius: 200, spacing: 0.4, width: 90, cards: cards}'>
</div>

var model = {
  cards: ko.observable("AS KS"),
};
ko.applyBindings(model);