@ka-nabellinc/deck-maker-web-components NPM

Deck Maker Web Components

Deck Makerがサードパーティー向けに一般公開するWeb Componentsの管理レポジトリです。

主にLitを利用してWeb Componentsの記述を行なっています。

開発

Storybook

下記のコマンドでStorybookを起動し、 src/*の各コンポーネントの開発を行なってください。

yarn install
yarn run storybook

コンポーネントの基本構成

import { LitElement, html, css } from 'lit'
import { property, state, customElement } from 'lit/decorators.js' // https://lit.dev/docs/releases/upgrade/#update-decorator-imports

@customElement('my-element')
export class MyElement extends LitElement {

  @property() firstName: string = ''
  @property() lastName: string = ''

  @state()
  private get fullName() {
    return this.firstName + ' ' + this.lastName
  }

  static styles = [
    css`
      :host {
        display: block;
      }

      * {
        box-sizing: border-box;
      }

      label {
        font-weight: bold;
      }
    `
  ]

  render() {
    return html`
      <label>${this.fullName}</label>
    `;
  }
}

コンポーネントの利用

コンポーネントを利用する際は通常のNPMライブラリと同様に npm, yarn, pnpmでインストールすることができますが、下記の例のようにブラウザから直接呼び出す方法が便利です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Polyfills only needed for Firefox and Edge. -->
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
  <script type="module" src="https://unpkg.com/@ka-nabellinc/deck-maker-web-components?module"></script>
  <title>Document</title>
</head>
<body>
  <h1>Deck Maker Web Components Sample</h1>
  <yg-deck-recipe ygDeckId="3eef28a6-0a11-4f34-9669-0feea4db412f"></yg-deck-recipe>
</body>
</html>

lit

@infinitebrahmanuniverse/nolb-_ka-@everything-registry/sub-chunk-507

7 months ago

1 year ago

1 year ago

1 year ago

2 years ago