OrigamiUIのオフキャンバスブロックはオフキャンバスメニューを作成できるブロックです。

オフキャンバスメニュー(ドロワーメニュー)は主にスマホで使用されることが多いもので、ヘッダーのメニューボタンを押すと開くメニューです。

開閉ボタンはOrigamiUIの「トグルブロック」で作成できます。

オフキャンバスブロックの設置方法

オフキャンバスブロックは以下の手順で設置することができます。

1. 編集画面の右上にある「+」アイコンのついたボタンを押す
2. ブロック一覧から、「グリッド」をクリック
3. 設置したオフキャンバスブロックの「+」ボタンを押す
4. オフキャンバスブロック内に設置するブロックを選択

詳しいブロックの設置方法についてはこちらのドキュメントをご覧ください。

ブロックの配置方法

オフキャンバスブロックの設定パネル

グリッドブロックの設定パネルでは以下の設定ができます。

• オフキャンバス設定: グリッドとギャップの設定
• レイアウト設定: Flexboxとギャップの設定
• 高度な設定: idと追加classの設定

オフキャンバス設定

オフキャンバス設定ではオフキャンバスの表示方法に関する設定ができます。

具体的な設定内容は以下のとおりです。

• タイプ: 表示アニメーションの設定
• 配置: 表示位置の設定
• ブレークポイント: 表示するブレークポイントの設定
• 背景色: 背景色の設定
• オフキャンバスの幅: メニューの幅の設定

タイプは表示される際のアニメーションをスライド、フェードから選ぶことが出来ます。

配置はメニューが表示される位置です。左右のどちらかから選ぶことが出来ます。

ブレークポイントはどの画面幅でオフキャンバスメニューにするかを選択できます。

オフキャンバスメニューは通常はグループブロックと同じように表示されますが、ここで指定したブレークポイントで本体が隠れて、トグルブロックで表示・非表示を切り替えられるようになります。

背景色は、オフキャンバスメニュー用のものです。通常は適用されません。

オフキャンバスの幅はデバイスサイズごとに設定できます。

レイアウト設定

レイアウト設定ではFlexboxとギャップの設定ができます。

具体的な設定内容は以下のとおりです。

ブレークポイント選択: 設定を行うブレークポイントを選択

• 表示設定: displayのプロパティを選択
• 方向: Flexの方向を選択
• 整列: AlignItemsのプロパティを選択
• 均等配列: JustifyContentのプロパティを選択
• 整列(Self): AlignSelfのプロパティを選択
• Grow: FlexGrowのプロパティを選択
• Shrink: FlexShrinkのプロパティを選択
• ギャップ変数: ギャップ設定で使用する変数を選択
• ギャップリセット: ギャップの設定内容を全てリセット
• Row: 縦方向のギャップを選択
• Column: 横方向のギャップを選択

ギャップはギャップ変数で入力した数値に1~10の値をかけたものになります。

例) ギャップ変数=10px、Row=10px~100pxの間で選択

変数以外はブレークポイントごとに設定を変更可能です。

メディアクエリの`min-width`で設定されるため、スマホで設定した内容は他のブレークポイントで変更しない限り全てのブレークポイントで適用されます。

例) スマホで方向を縦に設定 -> スマホ、タブレット、PCの全てで縦並び

例) スマホで方向を縦に、PCで方向を横に設定 -> スマホとタブレットで縦並び、PCで横並び

高度な設定

高度な設定では、HTMLタグのidとclass名を設定できます。

具体的な設定内容は以下のとおりです。

• HTML アンカー: id名を入力
• 追加 CSS クラス: クラス名を入力

オフキャンバスブロックではHTMLアンカーに入力したidを識別するため、必ず入力が必要です。

クラス名はカスタムCSS用に自動的に作成されたものが表示されています。

クラス名を追加する場合、このクラス名は削除せず、半角スペースを空けて追加してください。

例) my-class oui_cm-group-efb2ea28ec3a