This webcomponent follows the open-wc recommendation.
npm i honeycomb-element
<script type="module">
import 'honeycomb-element/honeycomb-element.js';
</script>
<honeycomb-element></honeycomb-element>
Another way to use the component is via the CDN UNPKG.
Import as module:
<script type="module">
import 'https://unpkg.com/honeycomb-element@latest/build/honeycomb-element.bundled.js';
</script>
<honeycomb-element></honeycomb-element>
Import as usual <script>
of type module:
<head>
<title>Honeycomb Element</title>
<script src="https://unpkg.com/honeycomb-element@1.1.4/build/honeycomb-element.bundled.js" type="module"></script>
</head>
<body>
<honeycomb-element></honeycomb-element>
</body>
Import as usual <script>
:
<head>
<title>Honeycomb Element</title>
<script src="https://unpkg.com/honeycomb-element@1.1.4/build/honeycomb-element.bundled.js"></script>
</head>
<body>
<honeycomb-element></honeycomb-element>
</body>
Note that the keyword @latest
always points to the latest version of the honeycomb element. If you rather want to stick to a specific version, just replace latest
with the according version number (e.g. @1.1.7
).
The <honeycomb-element>
allows one property naming items
. This way, the honeycomb is provided with content.
The items
property is of type array
which itself holds a maximum of 7 nested arrays. These nested arrays contain
of a maximum of 7 objects
following the ItemInterface
. Be aware, that the first nested array only contains one object
which represents the center element which does not expand on click.
For an example, see the /demo
directory.
It is recommended to attach items
to the element as follows:
const honeycombEl = document.querySelector("honeycomb-element");
honeycombEl.items = [ /* items come here */ ];
export interface ItemInterface {
/** Heading of hexagon */
heading: string;
/** Content displayed below heading. Also functions as sub heading. */
content?: string;
/** Image placed within the hexagon */
image?: {
/** URL to image */
src: string;
/** Title of image applied to title attribute */
title?: string;
};
}
npm start
To run a local development server that serves the basic demo located in demo/index.html