Wc-lantern NPM

Lantern for Web Components

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

npm.io

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	Type	Default	Description
`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