<mf-toggle-wrap></mf-toggle-wrap>

Generic wrapper element for toggle display

Applicable attributes

• body-class-toggle (String)
  Class name to be added/removed from classList of body tag
  To make it possible to switch display by describing CSS according to add/remove of the class

• init-on (Boolean)
  Set toggle on in the initial state
  In other words, set the class name specified by attitude body-class-toggle when the classListof body tag is activated.

DOM structure and class settings

• div.mf_toggle_wrap
  .mf_toggle_on Set toggle on
  • div.mf_toggle_button_wrap
    • a.mf_toggle_button toggle button
      Click here to toggle on/off, and the class name of attribute body-class-toggle will be added/removed from classList of body tag.
      • Customizabe with slottoggle_button
  • div.mf_toggle_content_wrap
    • div.mf_toggle_content
      • anonymous slotEmbed content for toggle display

Slot for DOM customization

For the slots, see the description below

• Vue.js Named Slots
• Vue.js Scoped Slots

Slot name toggle_button

Properties that can be referenced

• self: an instance of current custom element
• customProp: data returned by the function specified by attribute :custom-prop-func

Anonymous Slots

Properties that can be referenced

• self: an instance of current custom element
• customProp: data returned by the function specified by attribute :custom-prop-func