@holochain-open-dev/elements
TypeScript icon, indicating that this package has built-in type declarations

0.300.0-rc.0 • Public • Published

@holochain-open-dev/elements

Common elements and element related utilities to build Holochain web applications.

Elements

HoloIdenticon

Import it like this:

import "@holochain-open-dev/elements/dist/elements/holo-identicon.js";

And then you can use it like this in your html:

<holo-identicon
  hash="uhCEkBsnnW9JSVhGQx4AE2m0lSlWLrioEHP-7Uj4ZnbI0W-M"
></holo-identicon>

DisplayError

Import it like this:

import "@holochain-open-dev/elements/dist/elements/display-error.js";

And then you can use it like this in your html:

<display-error headline="Error fetching data" error="500"></display-error>

SelectAvatar

Import it like this:

import "@holochain-open-dev/elements/dist/elements/select-avatar.js";

And then you can use it like this in your html:

<select-avatar></select-avatar>

Utils

wrapPathInSvg

Function to convert paths from the @mdi/js library to inline SVG sources.

Example usage:

import { mdiAlertCircleOutline } from "@mdi/js";
import { wrapPathInSvg } from '@holochain-open-dev/elements';

function  renderIcon() {
  return html`
    <sl-icon
      style="color: red; height: 64px; width: 64px;"
      src="${wrapPathInSvg(mdiAlertCircleOutline)}"
    ></sl-icon>
  `;
}

Readme

Keywords

none

Package Sidebar

Install

npm i @holochain-open-dev/elements

Weekly Downloads

47

Version

0.300.0-rc.0

License

none

Unpacked Size

221 kB

Total Files

48

Last publish

Collaborators

  • matthme
  • zippy314
  • guillem.cordoba