An opinionated set of web components for building strong and fast applications.

DEMO & DOCS

Getting Started

Via npm

First install the lib

npm i z-web-components

if you use a bundler, you will probably need to add a browserslist key to your package.json. For example :

  "browserslist": [
    ">2%",
    "Edge > 14",
    "Firefox > 63",
    "Chrome > 67"
  ]

Then import in your javascript

// main.js
import "z-web-components"

Via cdn

You can also use any cdn provider that mirrors npm packages.

<!-- unpkg -->
<script src="https://unpkg.com/z-web-components"></script>

<!-- jsdeliver -->
<script src="https://cdn.jsdelivr.net/npm/z-web-components@latest"></script>

Usage

And use it in your html (more info on the documentation website)

<!-- index.html -->
<z-input label="Text input with default value" value="default value"></z-input>

<z-textarea label="Textarea input with default value" value="default value"></z-textarea>

<z-checkbox label="checkbox input checked" checked></z-checkbox>

<z-toggle label="toggle input active" active></z-toggle>

<z-radio-group name="radio-demo" value="2">
    <z-radio label="radio input" value="1"></z-radio>
    <z-radio label="radio input" value="2"></z-radio>
</z-radio-group>

<z-tab-group>
    <z-tab label="tab-1">This is tab 1.</z-tab>
    <z-tab label="tab-2">This is tab 2.</z-tab>
    <z-tab label="tab-3">This is tab 3.</z-tab>
</z-tab-group>

Built With

• ParcelJs - Blazing fast, zero configuration web application bundler
• LitElement - A simple base class for creating fast, lightweight web components

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Development

Clone the repository

# ssh
git clone [email protected]:benavern/z-components.git z-web-components

# https
git clone https://github.com/benavern/z-components.git z-web-components

Install dependancies

cd z-web-components
npm i

Serve with hot reload and stuff

npm run dev

Build the lib

npm run build:lib

Versioning

We use SemVer for versioning.

We use gitflow for development workflow.

Authors

• Benjamin Caradeuc - Initial work - benavern

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details