• Overview
• Sample Code
• Properties
• Format
• cssClass
• cssStyle
• href
  • Set a url link
  • Set a javascript function

SimpleCard

Overview #

SimpleCard can be used to show your important KPI in dashboard. The card simply show the value with additional settings for icon to show with and color of card.

Sample Code #

<?php 
\koolreport\amazing\SimpleCard::create(array(
    "title"=>"Income",
    "value"=>7500,
    "cssClass"=>array(
        "icon"=>"fa fa-dollar"
    )
));
?>

Properties #

Format #

There are number of settings to format the value of card:

SimpleCard::create(array(
    ...
    "format"=>array(
        "value"=>array(
            "decimals"=>2,              // Number of decimals to show
            "decimalPoint"=>".",        // Decimal point character 
            "thounsandSeparator"=>",",  // Thousand separator
            "prefix"=>"$",              // Prefix
            "suffix"=>"USD"             // Suffix
        )
    )
))

cssClass #

There are number of sub settings for cssClass:

Example:

SimpleCard::create(array(
    "cssClass"=>array(
        "card"=>"my-own-card-class",
        "tittle"=>"font-bold",
        "value"=>"big-font",
        "icon"=>"fa fa-dollar"
    )
));

Notice: The "icon" property can be used to set the icon using font-awesome or simpleline icon.

cssStyle #

Alternative to set the cssClass, you may directly set the css style to the card element:

Example:

SimpleCard::create(array(
    "cssStyle"=>array(
        "card"=>"background-color:yellow",
        "title"=>"font-weight:bold",
        "value"=>"font-style:italic",
        "icon"=>"font-size:24px;color:#333"
    )
));

href #

Set a url link #

The same as you set href in an <a> element in html, you may set "href" property for the SimpleCard so that users will be directed to new url location when they click the card. This is extremely useful when you want to show details of data to user after view the summarization on card.

SimpleCard::create(array(
    "href"=>"http://example.com/defails"
));

Set a javascript function #

SimpleCard::create(array(
    "href"=>"function(){
        alert('click on card');
    }"
));