How do you use the showhide effect found in the Dart Widget Package

Question

I am trying to use the ShowHide effect that comes with Kevin Moore's widget package here:

http://dart-lang.github.io/widget.dart/#showhide

Not sure how to use this. Anyone got an example I can look at ?

Basically all I want is for a dropdown to show with one of those effects if a certain event happens.

Your tips appreciated.

Thanks.

Answer 1

You need to add a listener for an event to an element in the DOM, and then use ShowHide.toggle(element, effect) to trigger an effect. Here is an example which listens for a click on a button, and toggles FadeEffect on an image each time it is pressed:

  var button = query("#fadeButton")
      ..onClick.listen((event) {
        ShowHide.toggle(query("#fadeImage"), effect: new FadeEffect());
      });

If you wanted to fade in/out a dropdown when you click on a menu bar, then substitute "fadeButton" for the menu which listens for clicks, and "fadeImage" with the dropdown element.

Also, any other effect can be substituted for FadeEffect, such as DoorEffect, ScaleEffect, ShrinkEffect, etc.