JarCasting
JarCasting JarCasting

px-widget-cards

WebJar for px-widget-cards

License

License

BSD 3-Clause
GroupId

GroupId

org.webjars.bowergithub.predixdesignsystem
ArtifactId

ArtifactId

px-widget-cards
Last Version

Last Version

4.0.0
Release Date

Release Date
Type

Type

jar
Description

Description

px-widget-cards
WebJar for px-widget-cards
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/predixdesignsystem/px-widget-cards

Download px-widget-cards

Filename Size
px-widget-cards-4.0.0.pom
px-widget-cards-4.0.0.jar 52 KB
px-widget-cards-4.0.0-sources.jar 22 bytes
px-widget-cards-4.0.0-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bowergithub.predixdesignsystem/px-widget-cards/ -->
<dependency>
    <groupId>org.webjars.bowergithub.predixdesignsystem</groupId>
    <artifactId>px-widget-cards</artifactId>
    <version>4.0.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bowergithub.predixdesignsystem/px-widget-cards/
implementation 'org.webjars.bowergithub.predixdesignsystem:px-widget-cards:4.0.0'
// https://jarcasting.com/artifacts/org.webjars.bowergithub.predixdesignsystem/px-widget-cards/
implementation ("org.webjars.bowergithub.predixdesignsystem:px-widget-cards:4.0.0")
'org.webjars.bowergithub.predixdesignsystem:px-widget-cards:jar:4.0.0'
<dependency org="org.webjars.bowergithub.predixdesignsystem" name="px-widget-cards" rev="4.0.0">
  <artifact name="px-widget-cards" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bowergithub.predixdesignsystem', module='px-widget-cards', version='4.0.0')
)
libraryDependencies += "org.webjars.bowergithub.predixdesignsystem" % "px-widget-cards" % "4.0.0"
[org.webjars.bowergithub.predixdesignsystem/px-widget-cards "4.0.0"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.bowergithub.polymer : polymer jar [1.9.0,3)
org.webjars.bowergithub.predixdesignsystem : px-card jar [2.0.0,3)

Project Modules

There are no modules declared in this project.

px-widget-cards Build Status

Overview

Px-widget-cards is a Predix UI component that provides various card layouts. Use the 'px-twoup', 'px-threeup', 'px-fourup', and 'px-sixup' components to create cards with two, three, four, or six components laid out in a grid (see demo.html for usage and running example).

Usage

Prerequisites

  1. node.js
  2. npm
  3. bower
  4. webcomponents-lite.js polyfill

Node, npm, and bower are necessary to install the component and dependencies. webcomponents.js adds support for web components and custom elements to your application.

Getting Started

First, install the component via bower on the command line:

bower install px-widget-cards --save

Second, import any or all of the components in your application with the following tag in your head:

<link rel="import" href="/bower_components/px-widget-cards/px-twoup.html"/>

<link rel="import" href="/bower_components/px-widget-cards/px-threeup.html"/>

<link rel="import" href="/bower_components/px-widget-cards/px-fourup.html"/>

<link rel="import" href="/bower_components/px-widget-cards/px-sixup.html"/>

Finally, use the component in your application:

TWOUP

<px-twoup id="widgetsx2" widget-header="2 Widget Card" widget-icon="fa-eye">
  <div class=widget-1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
  </div>
  <div class=widget-2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
  </div>
</px-twoup>

THREEUP

<px-threeup id="widgetsx3" widget-header="3 Widget Card" widget-icon="fa-eye">
  <div class=widget-1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
  </div>
  <div class=widget-2>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class=widget-3>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</px-threeup>

FOURUP

<px-fourup id="widgetsx4" widget-header="4 Widget Card" widget-icon="fa-eye">
  <div class=widget-1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>
  </div>
  <div class=widget-2>
    <p>Lorem ipsum dolor sit amet, consectetur</p>
  </div>
  <div class=widget-3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</p>
  </div>
  <div class=widget-4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</px-fourup>

SIXUP

<px-sixup id="widgetsx6" widget-header="6 Widget Card" widget-icon="fa-briefcase">
  <div class=widget-1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
  </div>
  <div class=widget-2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
  </div>
  <div class=widget-3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
  </div>
  <div class=widget-4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class=widget-5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>
  </div>
  <div class=widget-6>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur</p>
  </div>
</px-sixup>

Documentation

Read the full API and view the demo here.

Local Development

From the component's directory...

$ npm install
$ bower install
$ gulp sass

From the component's directory, to start a local server run:

$ gulp serve

Navigate to the root of that server (e.g. http://localhost:8080/) in a browser to open the API documentation page, with link to the "Demo" / working examples.

GE Coding Style Guide

GE JS Developer's Guide


Known Issues

Please use Github Issues to submit any bugs you might find.

org.webjars.bowergithub.predixdesignsystem

Predix Design System

Versions

Version
4.0.0