Skip to content

kingcc/message-box

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

<message-box/>

<message-box/> is a Web component implemented on Lit-Element library. It is similar to native HTML Element and could runs in mainstream browsers without any difference.

In short, it is a container contains a message string box and some buttons, which common application scenario is to convey to the website user some information. For example:

<message-box class="colorful" >
  <span slot="message">
    This is an example that contains only one option.
  </span>
  <button slot="button">Okay</button>
</message-box>

It looks like this:

Another common scenario is progress bar. Message-box has a progress bar via gradient background color:

More examples can be found here.

Usage

Import directly in HTML

npm CDNs like unpkg.com can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.

So recommended ways of importing:

<!-- Importing -->
<script type="module">
  import 'https://unpkg.com/@lit-component/message-box?module';
  ...
</script>
<!-- Using -->
<message-box .../>

Or:

<!-- Importing -->
<script type="module" src="https://unpkg.com/@lit-component/message-box?module"></script>
<!-- Using -->
<message-box .../>

Import in project using Npm & Webpack

  1. Installation via NPM
npm i @lit-component/message-box
  1. Importing

In webpack entry script, usually, index.js:

import '@lit-component/message-box'

In HTML:

<message-box .../>

Create <message-box/> with generator

Note that to avoid XSS attacks, DO NOT pass in non-hard-coded content.

generator is using for generates a <message-box/> quickly:

import { generator } from '@lit-component/message-box'

const mountPoint = document.body

const $messageBox = generator(
  `
    <span slot="message">
      This is an example that contains only one option.
    </span>
    <button slot="button">Okay</button>
  `,
  { out: 'right' },
  {
    position: 'fixed',
    top: '2vh',
    'z-index': 'max', // MessageBox will automatically calculate the maximum `z-index` based on mountPoint
  },
  mountPoint
)

mountPoint.appendChild($messageBox)

Its interface is:

/**
 * For quickly generate a message-box
 *
 * @param children        - children of `<message-box/>`
 * @param propertiesDict  - properties dictionary for initialize, optional
 * @param stylesDict      - stylesheet dictionary for initialize, optional
 * @param mountPoint      - reference to mount point element for computing style, optional
 * @param doc             - reference to document, optional
 * @returns {MessageBox} instance
 */
function generator(
  children: HTMLElement | HTMLElement[] | string,
  propertiesDict: PropertiesDict = {},
  stylesDict: StylesDict = {},
  mountPoint: HTMLElement | null = null,
  doc: Document = document,
): MessageBox

Attribute & Properties

You can set attributes for <message-box/> elements directly or properties for Web Component MessageBox instances, and they have the same effect:

<message-box min-width="20vw"/>

<!-- Is equal to -->

<message-box/>
<script>
  const $messageBox = document.querySelector('message-box')
  $messageBox.minWidth = '20vw'
</script>
PropertyAttributeDescriptionTypeDefault
heightheightThe height of componentstring"initial"
widthwidthThe width of componentstring"initial"
minWidthmin-widthThe min-width of componentstring"initial"
borderborderThe `border` css property of componentstring"0"
colorcolorThe `color` css property of componentstring"255, 255, 255"
radiusradiusThe `border-radius` of componentstring"0"
shadowshadowThe `box-shadow` css property of componentstring"0, 1rem, 1rem"
outoutThe out method of component. one of "right"|"top".string""
timeouttimeoutThe display time of the component.string"0"

Slots

NameDescription
messageThe 'message' component that needs to be displayed, the most basic such as `SPAN`
button`BUTTON`s that need to be displayed

CSS Parts

NameDescription
--message-box-background-colorSet background color of component
--message-box-opacitySet opacity of component