D-ZERO custom components
npm install @d-zero/custom-componentsD-ZEROカスタムWebコンポーネントライブラリです。
このパッケージは、再利用可能なWeb Componentsを提供します。すべてのコンポーネントは標準のWeb Components APIを使用して実装されており、フレームワークに依存しません。
パンくずリストを表示するWeb Componentsです。区切り文字やスタイルをCSSカスタムプロパティでカスタマイズでき、Schema.orgのマイクロデータにも対応しているため、SEO対策にも有効です。
ハンバーガーメニューアイコンを表示し、クリックすると指定されたダイアログを開くWeb Componentsです。アイコンのスタイルや外枠のスタイルをCSSカスタムプロパティでカスタマイズできます。
``bash`
yarn add @d-zero/custom-components
`js
import { defineBreadcrumbs } from '@d-zero/custom-components/breadcrumbs';
// カスタム要素を登録
defineBreadcrumbs('x'); // 'x-breadcrumbs'を登録
`
`html`
ホーム
カテゴリA
アイテム一覧
現在のアイテム
`js
import { defineHamburgerMenu } from '@d-zero/custom-components/hamburger-menu';
// カスタム要素を登録
defineHamburgerMenu('x'); // 'x-hamburger-menu'を登録
`
`html`
各コンポーネントの詳細なドキュメントとサンプルはStorybookで確認できます。
公開URL: https://components.d-zero.co.jp/
ローカルでStorybookを起動する場合：
`bash`
yarn dev
Storybookは http://localhost:6006 で起動します。
このパッケージは以下のエクスポートを提供します：
- @d-zero/custom-components/breadcrumbs - Breadcrumbsコンポーネント@d-zero/custom-components/hamburger-menu
- - HamburgerMenuコンポーネント
各エクスポートには、コンポーネントクラス（Breadcrumbs、HamburgerMenu）と定義関数（defineBreadcrumbs、defineHamburgerMenu`）が含まれています。通常は定義関数を使用してカスタム要素を登録しますが、コンポーネントクラスを直接インポートして使用することも可能です。
MIT