Articles Getting Started Introduction to Data Components Using strand-ajax Using strand-sync Introduction to strand-grid Configuring strand-grid Data Integration with strand-grid Creating Custom Grid Items Migration Guide Working with strand-repeater Components strand-action strand-ajax strand-autocomplete strand-box strand-button strand-calendar strand-checkbox strand-collection strand-currency strand-datepicker strand-dialog strand-drawer strand-dropdown strand-fetch strand-file-upload strand-footer strand-form strand-grid-column strand-grid-item strand-grid strand-group strand-guide strand-header strand-highlight strand-icon strand-inline-box strand-input-mask strand-input strand-list-item strand-loader strand-localstore strand-menu strand-modal strand-model strand-popover strand-progress-bar strand-pulldown-button strand-radio strand-repeater strand-scroll-panel strand-spinner strand-sync strand-tab strand-tabs strand-textarea strand-timeformat strand-timepicker strand-tooltip

Getting Started

The Strand Web Components library is built on Google's Polymer. If you're unfamiliar, get started by reading the Polymer API developer guide. The Strand documentation does not attempt to duplicate information which can be found in the Polymer documentation (e.g. component life cycle, etc.). To get started using Strand Web Components in your project, follow the steps below:

Latest Version

Install the latest version of Strand Web Components.

$ bower install strand

Add the webcomponentsjs polyfills and the Strand library to your head tag.

<script language="javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/strand/dist/strand.html"/>

Start adding web component tags to your markup or template wherever you would like the component to render (see the specific details for each component). Here's how you would add a strand-button:

<strand-button id="coolBtn">
    <label>Hi There</label>
</strand-button>

To add an event trigger for when all Polymer elements on the page have been upgraded and are ready to use, try the following:

window.addEventListener("WebComponentsReady", function() { 
    // Your web components are ready!
    // Do whatever you need to do here.
    var coolBtn = document.querySelector("#coolBtn");

    coolBtn.addEventListener("click", function(e) {
        console.log("coolBtn clicked!");
    });
});

Migrating to Polymer 1.0

Strand is now built on Polymer 1.0. For details on breaking changes to the Strand APIs, see our Migration guide. For breaking changes between the 0.5 and 1.0 release of Polymer, see the Polymer migration guide.

Specific Version

For production applications, we'd recommend using a fixed version of the Strand library.

$ bower install strand#<version>