@webwriter/wui
v0.0.3
Published
webwriter ui components
Downloads
9
Readme
wui components
ui overlay plugins for WebWriter Widgets
currently available:
- helpSystem:
WebWriter HelpSystem
HelpOverlay - HelpPopup
Installation
Either install locally by downloading this project and run npm i "path/to/folder"
or install via npm i "@webwriter/wui"
.
Usage
- Use the help System by importing both classes and adding them to your scopedElements like so:
import { HelpOverlay, HelpPopup } from "@webwriter/wui/dist/helpSystem/helpSystem.js";
"webwriter-helpoverlay": HelpOverlay,
"webwriter-helppopup": HelpPopup,
- Add helpSystem tags to the top of your DOM. You need one helpOverlay containing as many helpPopups as you like. The popups need to be slotted and connected to the DOM Element that you want to describe by putting its
id
into thetarget
attribute. Shown below is an example with a single popup.
import {html, css} from "lit"
import {LitElementWw} from "@webwriter/lit"
import {customElement, property} from "lit/decorators.js"
import { HelpOverlay, HelpPopup } from "@webwriter/wui/dist/helpSystem/helpSystem.js";
@customElement("cool-widget")
export default class CoolWidget extends LitElementWw {
static get scopedElements() {
return {
"webwriter-helpoverlay": HelpOverlay,
"webwriter-helppopup": HelpPopup,
};
}
render() {
return html`
<webwriter-helpoverlay>
<webwriter-helppopup
slot="popupContainer"
target="cool-id"
>
<div slot="content">
<h4>help heading<h4>
<p>some help</p>
</div>
</webwriter-helppopup>
<webwriter-helpoverlay>
<div style="width: 50vw, height: 50vh">
<p id="cool-id">my content</p>
</div>
`
}
}
Customization
You can customize the looks of your popups by varying the content of the div
element inside the popup tag. There is some styling applied by default, though it should still be possible to use your own with the style
attribute.