@burger-editor/blocks 4.0.0-alpha.6 → 4.0.0-alpha.61
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 +77 -57
- package/dist/index.js +1167 -417
- package/package.json +10 -8
- package/types.d.ts +3 -2
package/README.md
CHANGED
|
@@ -4,82 +4,102 @@
|
|
|
4
4
|
|
|
5
5
|
ブロックエディタの標準ブロックと標準アイテムを提供するパッケージです。
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
7
|
+
> **ℹ️ ブロックの構造仕様について**
|
|
8
|
+
> ブロックの構造管理は[@burger-editor/core](../core/)で行われています。
|
|
9
|
+
> ブロック構造の詳細仕様については [@burger-editor/core のREADME](../core/README.md#ブロックの仕様) を参照してください。
|
|
10
|
+
|
|
11
|
+
## 提供されるアイテム
|
|
12
|
+
|
|
13
|
+
このパッケージでは以下のアイテムを提供しています：
|
|
14
|
+
|
|
15
|
+
- **button** - ボタン
|
|
16
|
+
- **details** - 折りたたみ要素
|
|
17
|
+
- **download-file** - ダウンロードファイル
|
|
18
|
+
- **google-maps** - Google Maps 埋め込み
|
|
19
|
+
- **hr** - 水平線
|
|
20
|
+
- **image** - 画像
|
|
21
|
+
- **table** - テーブル
|
|
22
|
+
- **title-h2** - 大見出し（h2）
|
|
23
|
+
- **title-h3** - 中見出し（h3）
|
|
24
|
+
- **wysiwyg** - リッチテキストエディタ
|
|
25
|
+
- **youtube** - YouTube 動画埋め込み
|
|
26
|
+
|
|
27
|
+
## 提供されるブロックカタログ
|
|
28
|
+
|
|
29
|
+
このパッケージではデフォルトのブロックカタログを提供しています：
|
|
27
30
|
|
|
28
|
-
###
|
|
31
|
+
### 見出し
|
|
29
32
|
|
|
30
|
-
|
|
33
|
+
- **大見出し** (h2) - title-h2 アイテムを使用
|
|
34
|
+
- **中見出し** (h3) - title-h3 アイテムを使用
|
|
31
35
|
|
|
32
|
-
|
|
36
|
+
### 基本ブロック
|
|
33
37
|
|
|
34
|
-
|
|
38
|
+
- **テキスト** (wysiwyg) - wysiwyg アイテムを使用
|
|
39
|
+
- **画像** (image) - image アイテムを使用
|
|
40
|
+
- **折りたたみ** (disclosure) - details アイテムを使用
|
|
41
|
+
- **テーブル** (table) - table アイテムを使用
|
|
42
|
+
- **YouTube** (youtube) - youtube アイテムを使用
|
|
35
43
|
|
|
36
|
-
|
|
44
|
+
### カード
|
|
37
45
|
|
|
38
|
-
|
|
46
|
+
- **画像 + テキスト** (image-text) - image と wysiwyg アイテムを3列グリッドで組み合わせ
|
|
47
|
+
- **テキスト+画像+テキスト** (text-image-text) - wysiwyg、image、wysiwyg を3列グリッドで組み合わせ
|
|
39
48
|
|
|
40
|
-
|
|
41
|
-
- `inline`: インライン方向に並べる（ `display: block flex;` ）
|
|
42
|
-
- `float`: 先頭のアイテムを回り込みさせる
|
|
49
|
+
### 画像+テキスト
|
|
43
50
|
|
|
44
|
-
|
|
51
|
+
- **画像右寄せ: テキスト回り込み** (text-float-image-end) - 画像が右に浮動し、テキストが回り込み
|
|
52
|
+
- **画像左寄せ: テキスト回り込み** (text-float-image-start) - 画像が左に浮動し、テキストが回り込み
|
|
53
|
+
- **画像右寄せ: テキスト回り込み無し** (text-start-image-end) - テキストと画像を左右に配置（回り込み無し）
|
|
54
|
+
- **画像左寄せ: テキスト回り込み無し** (image-start-text-end) - 画像とテキストを左右に配置（回り込み無し）
|
|
45
55
|
|
|
46
|
-
|
|
56
|
+
### ボタン
|
|
47
57
|
|
|
48
|
-
|
|
58
|
+
- **ボタン** (button) - button アイテムを3つ横並びで配置
|
|
59
|
+
- **テキストリンク** (button) - リンク形式のボタンを3つ配置
|
|
60
|
+
- **ファイルダウンロード** (file) - download-file アイテムを3つ横並びで配置
|
|
61
|
+
- **コンテンツナビゲーション** (content-navigation) - ページ内リンクボタンを4列グリッドで8つ配置
|
|
49
62
|
|
|
50
|
-
|
|
63
|
+
### その他
|
|
64
|
+
|
|
65
|
+
- **Google Maps** (google-maps) - google-maps アイテムを使用
|
|
66
|
+
- **区切り線** (hr) - hr アイテムを使用
|
|
67
|
+
|
|
68
|
+
## 使用方法
|
|
69
|
+
|
|
70
|
+
```typescript
|
|
71
|
+
import { items, defaultCatalog } from '@burger-editor/blocks';
|
|
72
|
+
|
|
73
|
+
// アイテムの使用
|
|
74
|
+
const wysiwygItem = items.wysiwyg;
|
|
75
|
+
|
|
76
|
+
// ブロックカタログの使用
|
|
77
|
+
const catalog = defaultCatalog;
|
|
78
|
+
```
|
|
51
79
|
|
|
52
|
-
|
|
53
|
-
- `start`: 左寄せ（ `justify-content: start;` ）
|
|
54
|
-
- `end`: 右寄せ（ `justify-content: end;` ）
|
|
55
|
-
- `between`: 両端寄せ（ `justify-content: space-between;` ）
|
|
56
|
-
- `around`: 左右余白均等（ `justify-content: space-around;` ）
|
|
57
|
-
- `evenly`: 要素間均等（ `justify-content: space-evenly;` ）
|
|
58
|
-
- `align-center`: 垂直中央寄せ（ `align-items: center;` ）
|
|
59
|
-
- `align-start`: 上寄せ（ `align-items: start;` ）
|
|
60
|
-
- `align-end`: 下寄せ（ `align-items: end;` ）
|
|
61
|
-
- `align-stretch`: 伸縮（ `align-items: stretch;` ）
|
|
62
|
-
- `align-baseline`: ベースライン（ `align-items: baseline;` ）
|
|
63
|
-
- `wrap`: 折り返し（ `flex-wrap: wrap;` ）
|
|
64
|
-
- `nowrap`: 折り返さない（ `flex-wrap: nowrap;` ）
|
|
80
|
+
## スタイルシート
|
|
65
81
|
|
|
66
|
-
|
|
82
|
+
このパッケージは以下のCSSファイルを提供します：
|
|
67
83
|
|
|
68
|
-
|
|
84
|
+
### general.css
|
|
69
85
|
|
|
70
|
-
|
|
71
|
-
- `end`: 右寄せ（ `float: inline-end;` ）
|
|
86
|
+
ブロック全体の基本スタイルを定義します。以下の機能を含みます：
|
|
72
87
|
|
|
73
|
-
|
|
88
|
+
- **ブロックコンテナ**: `[data-bge-container]` - レイアウト、余白、背景色などの基本スタイル
|
|
89
|
+
- **グリッドレイアウト**: `grid` - CSS変数ベースの柔軟なグリッドシステム（auto-fit/auto-fill対応、折り返し基準インラインサイズのプリセット `--bge-repeat-min-inline-size--{variant}` によるカスタマイズ可能）
|
|
90
|
+
- **インラインレイアウト**: `inline` - フレックスボックスベースの横並びレイアウト
|
|
91
|
+
- **フロートレイアウト**: `float` - テキスト回り込みレイアウト
|
|
92
|
+
- **Wysiwyg内フレックスボックス**: `[data-bgc-flex-box]` - リッチテキスト内での横並びレイアウト
|
|
93
|
+
- **Wysiwyg内段落整列**: `[data-bgc-align]` - テキストの左寄せ/中央寄せ/右寄せ
|
|
74
94
|
|
|
75
|
-
|
|
95
|
+
### 各アイテムのスタイル
|
|
76
96
|
|
|
77
|
-
|
|
97
|
+
各アイテムは個別の`style.css`ファイルを持ち、アイテム固有のスタイルを定義します。
|
|
78
98
|
|
|
79
|
-
|
|
99
|
+
> **ℹ️ 統合CSSパッケージ**: すべてのスタイルを1つのファイルで利用したい場合は、[@burger-editor/css](../css/)パッケージを使用してください。
|
|
80
100
|
|
|
81
|
-
|
|
101
|
+
## カスタムアイテムの作成
|
|
82
102
|
|
|
83
|
-
|
|
103
|
+
独自のアイテムを作成する場合は、[@burger-editor/core](../core/README.md)の`createItem`関数を使用します。
|
|
84
104
|
|
|
85
|
-
|
|
105
|
+
> **📖 エディターAPIの詳細**: アイテムエディターのAPIの使い方と実践的なユースケースについては、[アイテムエディターAPIガイド](../../../docs/item-editor-api.md)を参照してください。
|