wc-lantern
TypeScript icon, indicating that this package has built-in type declarations

0.1.3 • Public • Published

Lantern for Web Components

Published on webcomponents.org npm npm bundle size jsDelivr hits (npm)

Learn from 从零开始写一个 Web Component - GitHub Corners | 云游君的小站

A web component by lit

The final product is an ES module, and it can be used alone.

Anywhere like Vanilla JS / Vue / React / Angular / Svelte ...

Demo

Usage

npm i wc-lantern

By CDN

See demo/index.html

<!-- cdn -->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/wc-lantern@latest"
></script>

By NPM

// main.ts
import "wc-lantern"
<!-- index.html -->
<lantern-element></lantern-element>

API

Example

<lantern-element
  number="2"
  text="Good,Great"
  disPlayBoth
></lantern-element>
<lantern-element
  number="2"
  position="right"
  text="Good,Great"
></lantern-element>

src/index.ts:

class: LanternElement

Superclass
Name Module Package
LitElement lit
Fields
Name Privacy Type Default Description Inherited From
text string '春,节' The text on lantern,use `,` to divide the text
number number 2 The number of lanterns returned, up to 2
displayMobile boolean false display on moblie (very not recommended)
disPlayBoth boolean false Whether to display left or right; otherwise, the output will be based on the 'position' field
position string 'right' The position of the lantern, left or right

Author

GS-server © Wibus, Released under the MIT License.

Personal Website · Blog · GitHub @wibus-wee · Telegram @wibus✪

Package Sidebar

Install

npm i wc-lantern

Weekly Downloads

0

Version

0.1.3

License

none

Unpacked Size

44.9 kB

Total Files

7

Last publish

Collaborators

  • wibus