Switch Case ❺🧪

Intelligent, script-driven switching of a content area.

NOT YET AVAILABLE

Internal R&D only.

Think tabs, but more versatile.

SA5's Switch Case is a modeled on the programming concept of the same name;

switch(x) {
  case 'item1': {
    console.log("item1 selected.");
    break;
  }
  case 'item2': {
    console.log("item2 selected.");
    break;
  }
  default: {
    console.log("no matching item found.");
    break;
  }
}

Here we have a series of defined case value. When this block is evaluated;

• if x = 'item1', then we'll get the message item1 selected.

• if x = 'item2', then we'll get the message item2 selected.

• if x = 'item3', or any other value, then we'll get the message no matching item found.

This simple concept adapts well to a number of UX concepts that already exist in Webflow;

• Tabs

• Sliders

• Forms, with the form, success, and error messages

• Conditional visibility blocks

Think of it as dynamic conditional visibility.

EXPERIMENTAL This will likely be most useful in SA6 if reactive techniques are included.

Basic Usage Notes

Here's an example setup;

<div wfu-switch="my-switch">
  <div wfu-switch-case="item1">
     ... some content ... 
  </div>
  <div wfu-switch-case="item2">
     ... some content ... 
  </div>
  <div wfu-switch-case="?">
     ... some default content ... 
  </div>  
</div>

Switch Attributes

wfu-switch = ( switch-name )

Required. Defines the switch block. Place on the outer switch DIV.

Set to a unique name, to identify this switch block.

wfu-switch-match = ( match-type )

One of;

• default ( default ) - Use the default case matching rules.

wfu-switch-display = ( display-type )

Optional. Specify a display type you want the case elements to be displayed in.

• block ( default )

• flex

• grid

• inline-block

• contents

TECHNICAL TEAM NOTE

This attribute may not be needed in the final implementation, since we may use style tags.

Switch Case Attributes

wfu-switch-case = ( case-name )

Required. Defines a case block. Place on an immediate child DIV of the wfu-switch.

Set to the value you want to match. When your switch is triggered by script, or on page load, or by an SA5 event, a case div that matches the specified value will display, and a case div that does not match the specified value will hide.

When the case-name is set to a question-mark ( ? ), this is handled as a special default case. This item will be shown when there are no other matches.

Using the above example,

e.g. switching to "item1" will show the first item only

e.g. switching to "item3" will show the last item only, as there were no matches and it's the default

Advanced Usage Notes

Here's a more advanced example setup;

<div wfu-switch="my-switch-2">
  <div wfu-switch-case="item1,item3">
     ... some content ... 
  </div>
  <div wfu-switch-case="item2,item3">
     ... some content ... 
  </div>
  <div wfu-switch-case="?">
     ... some content ... 
  </div>  
</div>

... some content ...

<div wfu-switch="my-switch-2">
  <div wfu-switch-case="item1">
     ... some content ... 
  </div>
  <div wfu-switch-case="item2,?">
     ... some content ... 
  </div>
</div>

Note;

• We have multiple separate switch blocks with the same name.

• Case items can have comma separated values

• Values can be repeated across case items

• Case default can exist multiple times, and on elements that also have case

Using the above example,

e.g. switching to "item1" will show items 1 & 4

e.g. switching to "item3" will show items 1 & 2

e.g. switching to item8 will show items 3 and 5 ( which have defaults )

Designer Experience

To create the best experience in the designer, it's often effective to hide all case items on the page but show them all in the designer.

You can use this as a custom HTML embed.

<style>
[wfu-switch-case] {
  display: none;
}
html:not([data-wf-domain]) [wfu-switch-case] {
  display: block;
}
</style>

Future

Make it Reactive, so that a variable value change would change the

When placed on a Tabs element, behave differently?

When placed on a Slider element, behave differently?

When placed on a Form element, behave differently?