CardKit 2 Demo / Tester

In this example below you will see how to do a CardKit 2 Demo / Tester with some HTML / CSS and Javascript

A quick test environment for CardKit 2 configurations

Thumbnail
This awesome code was written by chrishutchinson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrishutchinson ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CardKit 2 Demo / Tester</title>
  
  
  
  
  
</head>

<body>

  <!-- Element to render the UI into -->
<div id="ui"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js'></script>
<script src='https://cdn.rawgit.com/times/cardkit/v2.0.4/dist/cardkit.js'></script>
<script src='https://cdn.rawgit.com/times/cardkit/v2.0.4/dist/dom.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/chrishutchinson/cardkit-2-demo-tester-rWramo */
// Initialise CardKit and pass in the config object
var cardkit = new CardKit({
  card: {
    height: 320,
    width: 600,
    fill: '#333333'
  },
  layers: {
    headline: {
      name: 'Headline',
      type: 'text',
      text: 'This is some sample text',
      x: 20,
      y: 20,
      fill: '#FFFFFF',
      fontFamily: 'Helvetica',
      fontSize: 30,
      get lineHeight() {
        return this.fontSize * 1.2;
      },
      draggable: true,
      editable: {
        text: true,
        fill: 'picker'
      }
    }
  }
});

// Initialise the renderer passing in the CardKit object
var renderer = new CardKitDOM(cardkit);

// Render the UI
renderer.renderUI('ui');
//renderer.renderCard('ui'); // Uncomment this line to render just the card, with no editing UI

Comments