@lit-component/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 message string box and some buttons,
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 the 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.

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

$3

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




`

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

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',
},
mountPoint
)

mountPoint.appendChild($messageBox)
`

### Attribute & Properties

You can set attributes for elements directly or properties for Web Component MessageBox instances, and they have the same effect:

`html




`

$3

$3