@ka-nabellinc/deck-maker-web-components
v0.0.33
Published
Deck Makerがサードパーティー向けに一般公開するWeb Componentsの管理レポジトリです。
Downloads
1,881
Readme
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>