examples/bp-class.html

<!DOCTYPE html>
<html>
<head>
    <title>Ballpen.js Directive - 'bp-class'</title>
    <style type="text/css">
      .s-name {
        color: red;
      }
      .s-version {
        color: green;
      }
      [bp-shade] {
        display: none;
      }
    </style>
</head>
<body>

<div id="app" bp-shade>
  <h1>Ballpen.js Directive - 'bp-class'</h1>

  <p class="bp-class-name" bp-class="classes.name">{{ name }}</p>
  <p class="bp-class-version" bp-class="classes.version">{{ version }}</p>
</div> 

<script src="../dist/ballpen.min.js"></script>
<script type="text/javascript">

    let data = {
        name: "Ballpen.js",
        version: "1.0",
        classes: {
          name: 's-name',
          version: 's-version'
        }
    };

    new Ballpen("#app", {
        data: data
    });

</script>
</body>
</html> 