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

Stepper

The Step component is used to create step-based presentations, like slideshows. See this example for more details.

Stepper

Props

  • currentStep number

    The index of the currently selected step.

    • Example: x
  • fullWidth boolean

    Should this component be full width?.

    • Example: true

Example Code

[var name:"stepperIndex" value:0 /]

[Stepper currentStep:stepperIndex]
  [Graphic]
     [img src:`"static/images/examples/" + stepperIndex + ".png"` /]
  [/Graphic]

  [Step]
    [The Barnes-Hut Approximation: Efficient computation of N-body forces](https://idyll-lang.org/gallery/the-barnes-hut-approximation)
  [/Step]
  [Step]
    [Kernel Density Estimation: An Interactive Explanation of the Statistical Technique](https://idyll-lang.org/gallery/kernel-density-estimation)
  [/Step]
  [Step]
    [The Etymology of Trig Functions](https://idyll-lang.org/gallery/the-etymology-of-trig-functions)
  [/Step]

  [StepperControl /]
[/Stepper]