Wired Elements

To use the wired-textarea component, install the wired-elements package via npm and import the module into your JavaScript project. You can then use the <wired-textarea> custom element in your HTML.

Installation

npm i wired-elements

Import Methods

JavaScript Import:

import { WiredTextarea } from 'wired-elements';
// or
import { WiredTextarea } from 'wired-elements/lib/wired-textarea.js';

HTML Script Tag:

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

HTML Usage

<wired-textarea placeholder="Enter text" rows="6"></wired-textarea>

To use the wired-button component, install the wired-elements package via npm and import the component into your JavaScript project or load it directly via a script tag.

Installation

npm i wired-elements

Import via JavaScript

You can import the component using one of the following methods:

import { WiredButton } from 'wired-elements';
// or
import { WiredButton } from 'wired-elements/lib/wired-button.js';

Load via HTML Script Tag

Alternatively, load the module directly in your HTML:

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

HTML Usage

Once loaded, use the <wired-button> tag in your HTML:

<wired-button>Click Me</wired-button>
<wired-button disabled>Disabled</wired-button>
<wired-button elevation="3">Elevation</wired-button>

The wired-link component is a hand-drawn sketchy Anchor/Link web component. You can install it via npm, import it into your JavaScript modules, or load it directly via a CDN script tag.

npm i wired-elements

import { WiredLink } from 'wired-elements';
// or
import { WiredLink } from 'wired-elements/lib/wired-link.js';

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

<wired-link href="/more.html">Learn more</wired-link>

Install the wired-elements package via npm to use the wired-listbox component in your JavaScript project.

npm i wired-elements

To use the wired-dialog component, install the wired-elements package via npm. You can then import the WiredDialog class into your JavaScript project or load the module directly via a script tag in your HTML. Once loaded, use the <wired-dialog> tag in your HTML markup to wrap your dialog content.

npm i wired-elements

import { WiredDialog } from 'wired-elements';
// or
import { WiredDialog } from 'wired-elements/lib/wired-dialog.js';

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

<wired-dialog>
  <p>
    Dialog content here
  </p>
  <div style="text-align: right; padding: 30px 16px 16px;">
    <wired-button id="closeDialog">Close dialog</wired-button>
  </div>
</wired-dialog>

To use the wired-radio component, install the wired-elements package via npm. You can then import the WiredRadio class into your JavaScript project or load the module directly in your HTML using a script tag.

npm i wired-elements

import { WiredRadio } from 'wired-elements';
// or
import { WiredRadio } from 'wired-elements/lib/wired-radio.js';

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

To use the wired-search-input component, install the wired-elements package via npm and import the module into your JavaScript project, or load it directly via a script tag in your HTML.

npm i wired-elements

To use the wired-input hand-drawn sketchy text input component, install the wired-elements package via npm and import the component into your project. You can also load it directly via a CDN script tag in your HTML.

npm i wired-elements

import { WiredInput } from 'wired-elements';
// or
import { WiredInput } from 'wired-elements/lib/wired-input.js';

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

To use the component, first import the definition into your project, then use the <wired-mat-icon> tag in your HTML. You can specify the icon name and a configuration object for the hand-drawn effect.

<!-- Import via script tag -->
<script type="module" src="wired-mat-icon/lib/wired-mat-icon.js"></script>

<!-- Or via module script -->
<script>
  import "wired-mat-icon";
</script>

<!-- Usage -->
<wired-mat-icon
  icon="android"
  config='{"fillStyle": "zigzag", "fill": "#3B5998", "hachureGap": "1.5", "fillWeight": "0.9"}'>
</wired-mat-icon>