Skip to main content

Widget Layout Switcher

The Switcher widget displays the items in a switcher. The Switcher widget layout can be configured as follows:

Switcher Layout​

Define the basic layout of the switcher. The default is Pills. Available options are: -Pills - The switcher will be displayed as pills -Tabs above - The switcher will be displayed as tabs above the items -Tabs below - The switcher will be displayed as tabs below the items -Tabs left - The switcher will be displayed as tabs left of the items -Tabs right - The switcher will be displayed as tabs right of the items

Item In Animation​

Define the animation of the switcher items when they are shown. The default is Fade. Available options are:

  • Off - The switcher items will be displayed without any animation
  • Slide Left - The switcher items will be displayed with a slide left animation
  • Slide Left Small - The switcher items will be displayed with a small slide left animation
  • Slide Left Medium - The switcher items will be displayed with a medium slide left animation
  • Slide Right - The switcher items will be displayed with a slide right animation
  • Slide Right Small - The switcher items will be displayed with a small slide right animation
  • Slide Right Medium - The switcher items will be displayed with a medium slide right animation
  • Slide Top - The switcher items will be displayed with a slide top animation
  • Slide Top Small - The switcher items will be displayed with a small slide top animation
  • Slide Top Medium - The switcher items will be displayed with a medium slide top animation
  • Slide Bottom - The switcher items will be displayed with a slide bottom animation
  • Slide Bottom Small - The switcher items will be displayed with a small slide bottom animation
  • Slide Bottom Medium - The switcher items will be displayed with a medium slide bottom animation
  • Fade - The switcher items will be displayed with a fade animation
  • Scale up - The switcher items will be displayed with a scale up animation
  • Scale down - The switcher items will be displayed with a scale down animation

Item Out Animation​

Define the animation of the switcher items when they are hidden. The default is Fade. Available options are:

  • Off - The switcher items will be displayed without any animation
  • Slide Left - The switcher items will be displayed with a slide left animation
  • Slide Left Small - The switcher items will be displayed with a small slide left animation
  • Slide Left Medium - The switcher items will be displayed with a medium slide left animation
  • Slide Right - The switcher items will be displayed with a slide right animation
  • Slide Right Small - The switcher items will be displayed with a small slide right animation
  • Slide Right Medium - The switcher items will be displayed with a medium slide right animation
  • Slide Top - The switcher items will be displayed with a slide top animation
  • Slide Top Small - The switcher items will be displayed with a small slide top animation
  • Slide Top Medium - The switcher items will be displayed with a medium slide top animation
  • Slide Bottom - The switcher items will be displayed with a slide bottom animation
  • Slide Bottom Small - The switcher items will be displayed with a small slide bottom animation
  • Slide Bottom Medium - The switcher items will be displayed with a medium slide bottom animation
  • Fade - The switcher items will be displayed with a fade animation
  • Scale up - The switcher items will be displayed with a scale up animation
  • Scale down - The switcher items will be displayed with a scale down animation

Image Position​

Define the position of the image in the switcher item. The default is above. Available options are:

  • Above - The image will be displayed above the title and description
  • Below - The image will be displayed below the title and description

Custom Classes​

Define custom classes for the switcher widget.

Image Container Class​

Define custom classes for the image container. Multiple classes can be defined by separating them with a space.

my-class another-class

Image Class​

Define custom classes for the image. Multiple classes can be defined by separating them with a space.

my-class another-class

Toggler Container Class​

Define custom classes for the toggler container. Multiple classes can be defined by separating them with a space.

my-class another-class

Toggler Item Class​

Define custom classes for the toggler item. Multiple classes can be defined by separating them with a space.

my-class another-class

Content Container Class​

Define custom classes for the content container. Multiple classes can be defined by separating them with a space.

my-class another-class