Lantern for Web Components

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✪