mwcpl
v0.0.5
Published
Master's Web Component Pattern Library
Downloads
6
Maintainers
zanozbotReadme
mwcpl
Master's Web Components Pattern Library
A part of a master's thesis titled Development of universal web components using the Web Components standard.
Components
| Name | Issues |
| ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| <mwcpl-button> | Issues |
| <mwcpl-dialog> | Issues |
| <mwcpl-fab> | Issues |
| <mwcpl-form-field> | Issues |
| <mwcpl-list> | Issues |
| <mwcpl-list-item> | Issues |
| <mwcpl-navbar> | Issues |
| <mwcpl-navbar-item> | Issues |
| <mwcpl-notification> | Issues |
| <mwcpl-tree-view> | Issues |
| <mwcpl-tree-view-item> | Issues |
You can experience FOUC before hydration with some components. To fix that set their visibility to hidden, since this property is overridden upon hydration.
Example
mwcpl-dialog {
visibility: hidden;
}Fonts
Master's Web Components Pattern Library defaults to using Roboto font for the text, and the FontAwesome font for the icons.
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<script src="https://kit.fontawesome.com/**.js" crossorigin="anonymous"></script>Quickstart
1.) Install
Install the pattern library from NPM
npm install mwcpl2.)
Import the pattern library in you HTML. Stencil makes sure to lazy load only the used components on the page from the bundle. All elements can be controlled with JavaScript, just like built-in HTML elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Master's Web Components Pattern Library</title>
<script src='node_modules/mwcpl/dist/mwcpl.js'></script>
</head>
<body>
<mwcpl-button id="button" label="Click here"></mwcpl-button>
<script>
const button = document.querySelector("#button");
button.addEventListener('click', () => {
alert("Clicked");
});
</script>
</body>
</html>3.) Serve
Serve your HTML with e.g.
npm install http-serverand for Windows
.\node_modules\.bin\http-server.cmd .or for Linux
.\node_modules\.bin\http-server .Contribute
To start contribute a new web component or a fix using Stencil, clone this repo to a new directory:
git clone https://github.com/zanozbot/mwcpl.git
cd mwcpland run:
npm install
npm startTo build the component for production, run:
npm run buildTo run the unit tests for the components, run:
npm testNeed help? Check out our docs here.