Lantern for Web Components

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

A web component by lit jwc.js

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

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

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
JwcComponent		jwcjs

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

wc-lantern © Wibus, Released under the MIT License.

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