idyll-langidyll
DocsTutorialsGalleryEditor
menu

Overview

  • Introduction
  • Getting started
  • Markup syntax
  • HTML tags
  • Options and styles
  • Plugin system
  • Multipage template

Interactivity

  • Built-in components
  • Using components from npm
  • Make your own component
  • Scrolling and Refs

Publishing

  • Deploying to the web
  • Embedding Idyll

Useful Links

  • Github
  • Chat
  • Twitter
  • Support Us
← Back

Switch

Change what is displayed based on the provided value. For example, "Case 1" will be shown when the value of x is "one".

Input:

[var name:"x" value:"one" /]

[Switch value:x]
  [Case test:"one"]Case 1[/Case]
  [Case test:"two"]Case 2[/Case]
  [Default]Default case[/Default]
[/Switch]

[Button onClick:`x = "one"`]A[/Button]
[Button onClick:`x = "two"`]B[/Button]
[Button onClick:`x = ""`]Default[/Button]

Output:

Props

  • value variable

    Value of the child prop to render.

    • Example: x