https://github.com/kingcc/message-box

<message-box/> is a Web component implemented on Lit-Element library.
https://github.com/kingcc/message-box

lit lit-component lit-element lit-html message-box typescript web-component

Last synced: about 1 month ago
JSON representation

<message-box/> is a Web component implemented on Lit-Element library.

• Host: GitHub
• URL: https://github.com/kingcc/message-box
• Owner: kingcc
• License: bsd-3-clause
• Created: 2021-09-01T08:03:49.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-21T16:18:33.000Z (about 3 years ago)
• Last Synced: 2024-10-01T03:01:21.530Z (about 2 months ago)
• Topics: lit, lit-component, lit-element, lit-html, message-box, typescript, web-component
• Language: JavaScript
• Homepage: https://codepen.io/kingcc/pen/Pojwrgr
• Size: 318 KB
• Stars: 25
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
``

================

`` 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:

```html

  

    This is an example that contains only one option.

  

  Okay

```

It looks like this:

![](./docs-src/examples/message_box_1.png)

Another common scenario is progress bar.

Message-box has a progress bar via gradient background color:

![](./docs-src/examples/message_box_2.png)

More examples can be found [here](https://codepen.io/kingcc/pen/Pojwrgr).

![](./docs-src/examples/message_box_3.png)

## 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:

```html

  import 'https://unpkg.com/@lit-component/message-box?module';

  ...

```

Or:

```html

```

#### Import in project using Npm & Webpack

1. Installation via NPM

   

```sh

npm i @lit-component/message-box

```

2. Importing

In webpack entry script, usually, `index.js`:

```js

import '@lit-component/message-box'

```

In HTML:

```html

```

#### Create `` with `generator`

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

`generator` is using for generates a `` quickly:

```js

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

const mountPoint = document.body

const $messageBox = generator(

  `

    

      This is an example that contains only one option.

    

    Okay

  `,

  { 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:

```typescript

/**

 * For quickly generate a message-box

 *

 * @param children        - children of ``

 * @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 `` elements directly or properties for Web Component MessageBox instances, and they have the same effect:

```html

  const $messageBox = document.querySelector('message-box')

  $messageBox.minWidth = '20vw'

```

  

    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