OrigamiUIのトグルブロックはオフキャンバスメニューを開閉できるブロックです。

オフキャンバスメニューの「高度な設定」で入力したIDで

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

トグルブロックの設置方法

トグルブロックは以下の手順で設置することができます。

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

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

ブロックの配置方法

トグルブロックの設定パネル

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

• トグル設定: グリッドとギャップの設定
• 表示設定: OverfloやOpacityの設定
• 高度な設定: idと追加classの設定

トグル設定

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

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

• タイプ: イベントの種類を選択
• ターゲット: ターゲットのIDを入力
• 表示(Display): 表示するブレークポイントの設定

タイプはトグルボタンの種類を以下から選びます。

• offcanvas open: クリックするとオフキャンバスを開く
• offcanvas close: クリックするとオフキャンバスを閉じる

ターゲットは対象のIDを入力します。オフキャンバスの「高度な設定」で入力したIDをここに入力してください。

ブレークポイントはどの画面幅でトグルボタンを表示するかを選択できます。

表示設定

表示設定ではブロックの表示にかかわる設定ができます。

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

• Overflow: overflowの値を選択
• Opacity: opacityの値を選択
• z-index: z-indexの値を選択
• HTMLタグ: HTMLタグを選択

HTMLタグはリンク設定で「リンクを有効にする」をONにしていると自動的に`a`が選択されます。

その状態で`div`など`a`以外のHTMLタグを選択するとリンク設定の「リンクを有効にする」がOFFになります。

高度な設定

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

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

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

トグルブロックではHTMLアンカーに入力したidを識別するため、必ず入力が必要です。

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

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

例) my-class oui_cm-group-xxxxxxxxx