@d-zero/custom-components 5.0.0-beta.8 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +96 -1
- package/package.json +10 -11
package/README.md
CHANGED
|
@@ -1 +1,96 @@
|
|
|
1
|
-
# custom-components
|
|
1
|
+
# @d-zero/custom-components
|
|
2
|
+
|
|
3
|
+
D-ZEROカスタムWebコンポーネントライブラリです。
|
|
4
|
+
|
|
5
|
+
## 概要
|
|
6
|
+
|
|
7
|
+
このパッケージは、再利用可能なWeb Componentsを提供します。すべてのコンポーネントは標準のWeb Components APIを使用して実装されており、フレームワークに依存しません。
|
|
8
|
+
|
|
9
|
+
## 提供コンポーネント
|
|
10
|
+
|
|
11
|
+
### Breadcrumbs
|
|
12
|
+
|
|
13
|
+
パンくずリストを表示するWeb Componentsです。区切り文字やスタイルをCSSカスタムプロパティでカスタマイズでき、Schema.orgのマイクロデータにも対応しているため、SEO対策にも有効です。
|
|
14
|
+
|
|
15
|
+
**詳細**: [Storybook - Breadcrumbs](https://components.d-zero.co.jp/?path=/docs/components-breadcrumbs--docs)
|
|
16
|
+
|
|
17
|
+
### HamburgerMenu
|
|
18
|
+
|
|
19
|
+
ハンバーガーメニューアイコンを表示し、クリックすると指定されたダイアログを開くWeb Componentsです。アイコンのスタイルや外枠のスタイルをCSSカスタムプロパティでカスタマイズできます。
|
|
20
|
+
|
|
21
|
+
**詳細**: [Storybook - HamburgerMenu](https://components.d-zero.co.jp/?path=/docs/components-hamburgermenu--docs)
|
|
22
|
+
|
|
23
|
+
## インストール
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
yarn add @d-zero/custom-components
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## 使い方
|
|
30
|
+
|
|
31
|
+
### Breadcrumbs
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
import { defineBreadcrumbs } from '@d-zero/custom-components/breadcrumbs';
|
|
35
|
+
|
|
36
|
+
// カスタム要素を登録
|
|
37
|
+
defineBreadcrumbs('x'); // 'x-breadcrumbs'を登録
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<x-breadcrumbs>
|
|
42
|
+
<a href="/">ホーム</a>
|
|
43
|
+
<a href="/category">カテゴリA</a>
|
|
44
|
+
<a href="/category/subcategory/items">アイテム一覧</a>
|
|
45
|
+
<a href="/category/subcategory/items/current" aria-current="page">現在のアイテム</a>
|
|
46
|
+
</x-breadcrumbs>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### HamburgerMenu
|
|
50
|
+
|
|
51
|
+
```js
|
|
52
|
+
import { defineHamburgerMenu } from '@d-zero/custom-components/hamburger-menu';
|
|
53
|
+
|
|
54
|
+
// カスタム要素を登録
|
|
55
|
+
defineHamburgerMenu('x'); // 'x-hamburger-menu'を登録
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
```html
|
|
59
|
+
<x-hamburger-menu>
|
|
60
|
+
<dialog>
|
|
61
|
+
<h1>メニュー</h1>
|
|
62
|
+
<ul>
|
|
63
|
+
<li><a href="#">項目1</a></li>
|
|
64
|
+
<li><a href="#">項目2</a></li>
|
|
65
|
+
</ul>
|
|
66
|
+
<button command="close">閉じる</button>
|
|
67
|
+
</dialog>
|
|
68
|
+
</x-hamburger-menu>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Storybook
|
|
72
|
+
|
|
73
|
+
各コンポーネントの詳細なドキュメントとサンプルはStorybookで確認できます。
|
|
74
|
+
|
|
75
|
+
**公開URL**: [https://components.d-zero.co.jp/](https://components.d-zero.co.jp/)
|
|
76
|
+
|
|
77
|
+
ローカルでStorybookを起動する場合：
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
yarn dev
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Storybookは `http://localhost:6006` で起動します。
|
|
84
|
+
|
|
85
|
+
## エクスポート
|
|
86
|
+
|
|
87
|
+
このパッケージは以下のエクスポートを提供します：
|
|
88
|
+
|
|
89
|
+
- `@d-zero/custom-components/breadcrumbs` - Breadcrumbsコンポーネント
|
|
90
|
+
- `@d-zero/custom-components/hamburger-menu` - HamburgerMenuコンポーネント
|
|
91
|
+
|
|
92
|
+
各エクスポートには、コンポーネントクラス（`Breadcrumbs`、`HamburgerMenu`）と定義関数（`defineBreadcrumbs`、`defineHamburgerMenu`）が含まれています。通常は定義関数を使用してカスタム要素を登録しますが、コンポーネントクラスを直接インポートして使用することも可能です。
|
|
93
|
+
|
|
94
|
+
## ライセンス
|
|
95
|
+
|
|
96
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@d-zero/custom-components",
|
|
3
|
-
"version": "5.0.0
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"description": "D-ZERO custom components",
|
|
5
5
|
"author": "D-ZERO",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,15 +30,14 @@
|
|
|
30
30
|
"storybook": "storybook build"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@chromatic-com/storybook": "
|
|
34
|
-
"@storybook/addon-
|
|
35
|
-
"@storybook/
|
|
36
|
-
"@storybook/
|
|
37
|
-
"@storybook/
|
|
38
|
-
"@storybook/web-components": "
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"storybook": "8.6.14"
|
|
33
|
+
"@chromatic-com/storybook": "4.1.3",
|
|
34
|
+
"@storybook/addon-docs": "10.1.11",
|
|
35
|
+
"@storybook/experimental-addon-test": "8.6.15",
|
|
36
|
+
"@storybook/test": "8.6.15",
|
|
37
|
+
"@storybook/web-components": "10.1.11",
|
|
38
|
+
"@storybook/web-components-vite": "10.1.11",
|
|
39
|
+
"lit": "3.3.2",
|
|
40
|
+
"storybook": "10.1.11"
|
|
42
41
|
},
|
|
43
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "d5be73bc1f2fbfb85eea684d6b4807323a8999ff"
|
|
44
43
|
}
|