ko-component-page

ko-component-page is a knockoutjs version of google polymer's iron-component-page

Installation

First install via npm

npm install ko-component-page

Then include in your project

<link rel="stylesheet" href="node_modules/ko-component-page/dist/ko-component-page.css">
<script src="node_modules/ko-component-page/dist/ko-component-page.js"></script>

Usage

Basic structure for the ko-component-page goes as follows

<ko-component-page>
  <ko-component-parameters>
    <ko-component-parameter params="{...}"></ko-component-parameter>
  </ko-component-parameters>
  
  <ko-component-examples>
    <!-- Markup here -->
    <ko-component-example-script>
      {
        // values here
      }
    </ko-component-example-script>
  </ko-component-examples>
  
</ko-component-page>

There are two sections to the ko-component page, parameters and examples

Parameters

Parameters are each of the values the params property can accept. Each ko-component-parameter component must be inside the ko-component-parameters component.

<ko-component-parameters>
  <!-- the required property tells ko-component-parameters where to put it's self -->
  <ko-component-parameter required params="{name: 'name', type: 'string', description: 'a description'}"></ko-component-parameter>
  
  <!-- if no required property exsists, the parameter is optional -->
  <ko-component-parameter params="{name: 'name', type: 'string', description: 'a description'}"></ko-component-parameter>

</ko-component-parameters>

Examples

examples are when you can show the functionality of your component

<ko-component-page params="{label: '<Component Label>'}">
  <!-- Put your markup for the component here -->
  <ko-component-page-script>
  {
    // put your observables for the component here
  }
  </ko-component-script>
</ko-component-page>