upundit-ui v0.0.7

Stencil Component Starter

This project is a uPundit standalone Web Component using Stencil.

Stencil is also great for building entire apps. For that, use the stencil-app-starter instead.

uPundit Components

The following are components included in the package

up-logo

A web component to display SVG version of the logo. To use <up-logo></up-logo>

• Optional parameter to specify height: <up-logo height="2rem"></up-logo>. Default value "1rem".

up-icon

A web component to display SVG version of the icon. To use <up-icon></up-icon>

• Optional parameter to specify height: <up-icon height="2rem"></up-icon>. Default value "2rem".

up-stars

the A web component to display SVG version of the 5X5 stars ratings.

• Optional parameter to specify height: <up-icon height="2rem"></up-icon>. Default value "7rem".
• Mandatory parameter (Sample):

    [
      { id: "my", num: -1, stars: 0.2 },
      { id: "friends", num: 55, stars: 0.234 },
      { id: "school", num: 2001, stars: 0.45121 },
      { id: "following", num: 53291, stars: 0.3232 },
      { id: "others", num: 961243, stars: 0.89123 }
    ]

num - Greater then 0, zero or smaller will not display

stars - Zero to One. 0, no stars selected, 1 all stars selection

Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

git clone https://github.com/ionic-team/stencil-component-starter.git my-component
cd my-component
git remote rm origin

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out our docs here.

Naming Components

When creating new component tags, we recommend not using stencil in the component name (ex: <stencil-datepicker>). This is because the generated component has little to nothing to do with Stencil; it's just a web component!

Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix ion.

Using this component

Script tag

• Publish to NPM
• Put a script tag similar to this <script src='https://unpkg.com/my-component@0.0.1/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install my-component --save
• Put a script tag similar to this <script src='node_modules/my-component/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc