Basics

The W20 Material addon provides the Angular Material framework. Installation bower install w20-material Configuration To include the addon, declare it in the application manifest: "bower_components/w20-material/w20-material.w20.json": {}

Basics

W20 Components The W20 Components addon provides various UI components. Installation bower install w20-components Configuration To include the addon, declare it in the application manifest: "bower_components/w20-components/w20-components.w20.json": {}

Basics

The W20 Dataviz addon provides supports for charts and graphical representation. It proposes an integration of the NVD3 charting library (which itself uses D3) along with an integration of the Dygraphs chart library for large data sets. Live demo Dataviz addon Installation bower install w20-dataviz Configuration To include the addon, declare it in the application manifest: "bower_components/w20-dataviz/w20-dataviz.w20.json": {} If using the w20 bridge you can simply refer to the fragment by its id without specifying the path:

Basics

The W20 Extras addon provides various functionality such as website analytics. Installation bower install w20-extras Configuration To include the addon, declare it in the application manifest: "bower_components/w20-extras/w20-extra.w20.json": {} Analytics Analytical tools allow statistical reporting and data analysis for your web applications: Counting and tracking visitor’s actions Statistics on page viewed Keyword searched E-commerce specific report Setting cookies for tracking visit Displaying comprehensive and detailed reports Analytics providers generally requires a script inclusion in all web pages to track user actions based on the URL.

Dygraphs Dygraphs

Dygraphs is a fast charting library that allows users to explore large data sets. It plots data series as lines. The W20 integration provides an AngularJS directive augmented with an option to load down-sampled data while zooming. Live demo Dygraphs Installation See the installation of the Dataviz addon in the basics section Configuration Declare the dygraphs module in the modules section of the dataviz fragment "w20-dataviz": { "modules": { "dygraphs": {} } } Directive Below you can find an example of a dygrah declaration with all its attributes:

Forms Forms

Forms are one of the most common element in a web application. The web framework provides support for forms building through programmatic configuration. Internally it relies on Angular Formly, an advanced library for managing forms with AngularJS. This approach reduces the amount of HTML in favor of JavaScript to provide flexibility, reusability, maintainability and simplicity. Forms Overview To display a form, we declare a form element with a unique child.

Nvd3 Nvd3

Nvd3 Nvd3 is a data visualization library build on top of the popular d3 library. It offers several chart types for common visualization needs. The web framework add an AngularJS integration in the form of directives, along with sensible defaults for these different charts. Live demo Multibar The multibar chart is used to compare different series in a bar representation following the X axis. Configuration "multibar":{}, The w20MultibarChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller.

UI Select UI Select

Angular UI select Angular UI select is an AngularJS-native version of Select2 and Selectize. Configuration "bower_components/w20-components/w20-components.w20.json": { "select": {} }

UI grid UI grid

Angular UI grid Angular UI grid is a datagrid fully integrated with AngularJS. It is part of the AngularUI suite. Configuration "bower_components/w20-components/w20-components.w20.json": { "grid": {} }

9 element(s)

Filter