4.2.1 • Published 1 month ago

lithen-fns v4.2.1

Weekly downloads
-
License
ISC
Repository
github
Last release
1 month ago

Lithen Functions

Functions to use with html and css to create simple and powerful UI elements. Its part of Lithen modules. It works alone but is created to use with Web Components.

Getting started

You can see the Getting started page, teaching how to setup a Vanilla project or a project with Vite.

After the Getting started, try this counter modal example:

function counterModal() {
  const count = signal(0)
  const dialogRef = ref<HTMLDialogElement>()

  function increment() {
    count.set(value => value + 1)
  }

  return html`
    <dialog ref=${dialogRef}>
      <p>Count: ${count}</p>
      <button on-click=${increment}>
        Increment
      </button>
      <button on-click=${() => dialogRef.el?.close()}>
        Close
      </button>
    </dialog>
    
    <button on-click=${() => dialogRef.el?.showModal()}>
      Open Modal
    </button>
  `
}

document.body.append(counterModal())

List of including functions, tag functions and its features

VSCode Extensions Recommendation

  • lit-plugin which came with lit-html and styled components extensions.
  • Auto Close Tag for auto closing HTML tags.
  • es6-string-html for HTML syntax highlight to custom tag functions, good to work with the el tag function.
  • inline HTML for emmet and IntelliSense in html and css tag functions.

Other libs that are part of Lithen

4.2.1

1 month ago

4.2.0

1 month ago

4.1.1

1 month ago

4.1.0

2 months ago

4.0.0

3 months ago

3.0.0

5 months ago

2.0.0

10 months ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago