Skip to content

Play Pause Button

Jump to bottom
Ben R-W edited this page Jun 26, 2020 · 3 revisions

Play/Pause Button

iv-play-button is a simple button with pre-defined styles that will allow a user to start/pause an interactive component.

Usage

This is an interactive component that should be used whenever the developer wishes to play or pause a component.

Initially, the button reads play; when pressed, the button will become a shade darker and read pause, while the component the developer has linked to the button will begin playing. On a second click, the button will once more read play and the linked component will stop playing.

Play/pause button

To include this component, use the self-closing tag <iv-play-button/> in your html.

API reference

Props

  • This component has no props.

Slots

  • This component has no slots.

Events

  • iv-played is emitted when play is clicked.
  • iv-paused is emitted when pause is clicked.

Data

  • play is a boolean, initially set to false, which keeps track of whether the user last clicked play or pause.
  • text is a string, initially set to "play". The text that shows in the button is bound to this variable.
  • dyn_class is a string; one of the button's classes is bound to the value of this string, which is how the button changes shade depending on whether it is in play or pause mode.

Examples

<template>
    <iv-play-button @iv-played="playAnimation" @iv-played="pauseAnimation"/>
</template>
Clone this wiki locally