Contact us Create app

Directory

← Back

cargowebcomponents

Collection of Web Components based on Polymer 3

Author

Rating

Links

Popularity

<100

Published on webcomponents.org

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)

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @polymer/iron-icon#^3.0.0-pre.12
  • @polymer/iron-icons#^3.0.0-pre.12
  • @polymer/paper-icon-button#^3.0.1
  • @polymer/polymer#^3.0.0-pre.12
  • @webcomponents/webcomponentsjs#^1.0.20
Released
2019-04-25
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Polymer 3.0+
Browser
Browser Independent

cargowebcomponents - Vaadin Add-on Directory

Collection of Web Components based on Polymer 3 cargowebcomponents - Vaadin Add-on Directory
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@cargowebserver/cargowebcomponents/elements) # 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... ```console 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 ```console mkdir test cd test ``` #### Initilayse your package file ```console npm init ``` #### Append the components and other depencies in your file. ```console npm install --save @cargowebserver/cargowebcomponents ``` #### now append your element in the html file where you want to use it (index.html)... ##### The Growl... ```html I am growl! ``` ##### The application menu, more than a dropdown... ```html item 0 item 1 item 2 item 4 item 3 ``` ##### A sortable and filtrable table that can became quite large in number of elements without laging... ```html
Col 1
Col 2
Col 3
Col 4
Col 5
 ``` #### (for local use) intall the polymer client utilities ```console sudo npm install -g polymer-cli ``` #### finaly serve it ```console polymer server --npm ``` #### For include the result in IIS or [CargoWebServer](https://github.com/CargoWebServer/CargoWebServer), for exemple, you need to build your project, that will create a build directory that contain all neccessary file. ```console polymer build ``` ## History Cargo Web Components were part of Cargo Web Server project [can see list here](https://github.com/CargoWebServer/CargoWebServer/tree/master/WebApp/Cargo/Apps/Cargo/js/gui). here is the list of components that will be rewritten as webcomponent... * [growl](https://github.com/davecourtois/cargowebcomponents/tree/master/components/growl) (in process) * splitter * dialog * menu * table * wizard * object panel ## Credits Written by Dave Courtois. ## License Apache License 2.0 (Apache-2.0)
Online