Cargo Web Components
A usefull collection of Web Components based on polymer 3.
Installation
To append compoments to your application all you need to do is…
npm install --save @cargowebserver/cargowebcomponents
Usage
Webcomponents are a fast and easy way to create web application. Because each
component are self contain, it’s easy to make it work with each other.
Just like any other HTML elements, components can be stylized at the application
level, in order to give them a uniform look and feel.
Cargo Web Component are based on Polymer 3 and try to follow the material design
principles.
Quick start
Welcome to Cargo Web Components
Here I will explain to you all the steps to made use of components.
Dependencies
I order to create a web application you will need:
- NPM
- Node.js
Step by Step
Create a new folder for your project
mkdir test
cd test
Initilayse your package file
npm init
Append the components and other depencies in your file.
npm install --save @cargowebserver/cargowebcomponents
now append your element in the html file where you want to use it (index.html)…
The Growl…
<html>
<head>
<script type="module">
import '@cargowebserver/cargowebcomponents/components/growl/growl.js';
</script>
</head>
<body>
<growl-element w="350" h="150" shadow="5" delay="3000" style="display:none;">I am growl!</growl-element>
</body>
</html>
The application menu, more than a dropdown…
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="./node_modules/@cargowebserver/cargowebcomponents/components/utility.js"></script>
<script type="module" src="./node_modules/@cargowebserver/cargowebcomponents/components/element.js"></script>
<script type="module" src="./node_modules/@cargowebserver/cargowebcomponents/components/menu/dropdownMenu.js"></script>
<script src="test.js"></script>
</head>
<body>
<!-- Test the menu element -->
<dropdown-menu-element style="margin: 2px">
<menu-item-element id="item-0">
<span>item 0</span>
<menu-item-element id="item-1">
<paper-icon-button icon="delete"></paper-icon-button>
<span>item 1</span>
</menu-item-element>
<menu-item-element id="item-2" separator="true">
<paper-icon-button icon="add"></paper-icon-button>
<span>item 2</span>
<menu-item-element id="item-4" action="alert('Action trigger!')">
<span>item 4</span>
</menu-item-element>
</menu-item-element>
</menu-item-element>
<menu-item-element id="item-3">
<span>item 3</span>
</menu-item-element>
</dropdown-menu-element>
</body>
</html>
A sortable and filtrable table that can became quite large in number of elements without laging…
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="./node_modules/@cargowebserver/cargowebcomponents/components/utility.js"></script>
<script type="module" src="./node_modules/@cargowebserver/cargowebcomponents/components/element.js"></script>
<script type="module" src="./node_modules/@cargowebserver/cargowebcomponents/components/table/table.js"></script>
</head>
<body>
<table-element rowheight="29" style="display: none; margin-bottom: 20px; margin-top: 2px;" data="[[0, 1, 7, 3, 8], [5,6,1,8,9], [7, 2, 9, 3, 4], [3,6,7,8,7]]">
<table-header-element fixed="true">
<table-header-cell-element onrender="onRenderIt">
<table-sorter-element></table-sorter-element>
<div>Col 1</div>
<table-filter-element> </table-filter-element>
</table-header-cell-element>
<table-header-cell-element>
<table-sorter-element></table-sorter-element>
<div>Col 2</div>
</table-header-cell-element>
<table-header-cell-element>
<table-sorter-element></table-sorter-element>
<div>Col 3</div>
</table-header-cell-element>
<table-header-cell-element>
<div>Col 4</div>
</table-header-cell-element>
<table-header-cell-element>
<div>Col 5</div>
<table-filter-element></table-filter-element>
</table-header-cell-element>
</table-header-element>
<table-pagination-element pagesize="100"></table-pagination-element>
</table-element>
</body>
</html>
(for local use) intall the polymer client utilities
sudo npm install -g polymer-cli
finaly serve it
polymer server --npm
For include the result in IIS or CargoWebServer, for exemple, you need to build your project, that will create a build directory that contain all neccessary file.
polymer build
History
Cargo Web Components were part of Cargo Web Server project can see list here.
here is the list of components that will be rewritten as webcomponent…
- growl (in process)
- splitter
- dialog
- menu
- table
- wizard
- object panel
Credits
Written by Dave Courtois.
License
Apache License 2.0 (Apache-2.0)