Skip to content

Controlling the fan

Shashwat Chandra edited this page Jul 14, 2019 · 9 revisions

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);
Clone this wiki locally