Wired Elements

Wired-elements are a set of web-components designed to look like rough hand-drawn elements.

- Wired Elements - wiredjs.com - wired-elements-vanilla -... - codesandbox.io - Docs (wired-icon-button) on github

http://visualjam.org/assets/components/btn-icons.html HEIGHT 150 The CSS (--wired-icon-bg-color) is not working for the last one - asset

The wired-components library has been included in: - Wired-elements on vaadin.com - Wired-elements on bit.dev

# Examples Simple components can be added with HTML like:

<body> <wired-icon-button> <mwc-icon>favorite</mwc-icon> </wired-icon-button> </body>

You can add javascript to trigger actions on events:

<wired-button id="styled" onclick="alert('ddd');"> Click me </wired-button>

http://visualjam.org/assets/components/wired.html HEIGHT 350 Micro-app - asset

More complex examples may require including other elements as in the last elements below which require material design fonts and modules:

# Required

You need to load wired-elements. This can be done using ES6 Modules and `unpkg.com` by adding the following line to the `<head>` section of the HTML like this:

<script type="module" src="https://unpkg.com/wired-elements/lib/wired-button.js?module" ></script>

# Styling components In order to style a web-component you can either use built in features of the component:

Or you can use css:

<style> #styled { background: yellow; color: red;} </style>

http://visualjam.org/assets/components/btn-icon-red.html HEIGHT 80 The CSS for a btn-icon requires us to load material design elements. Then we style it with the `,red` class - asset

Another css example:

http://visualjam.org/assets/components/btn-icon-big.html HEIGHT 180 Can't figure out how to not use css for this - asset

Here we have a mix of examples:

http://visualjam.org/assets/components/red.html HEIGHT 280 Micro-app - asset

# Material design icons To style a wired-element that uses an icon you also need to load the material design icons:

http://visualjam.org/assets/components/btn-icon.html HEIGHT 80 The CSS for a btn-icon also requires us to load material design elements - asset

In the `<head>` section of the HTML we load thee wired-elements:

<script type="module" src="https://unpkg.com/wired-elements/lib/wired-icon-button.js?module"> </script>

Next we load a couple of required elements for the material design icons. In no particular order we require the mwc-icon module:

<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">

We also need the material icon font from Google:

<script type="module" src="https://unpkg.com/@material/mwc-icon?module"> </script>