How does Boostrap.Dropdown work?


I am willing to use Bootstrap.Dropdown from the rundis/elm-bootstrap package. However, I don’t understand the message-passing abstraction defined here.

In here, it says that wiring is required, however I have implemented that, and I don’t get a clue of how to:

  1. Define my own Dropdown.State to e.g. choose between Bread and Butter
  2. How / Why does it need to use the subscriptions element to do all of this.

Thanks in advance to anyone willing to help me! :smile:

  1. The Dropdown.State is used for the Open/Closed state of the dropdown. Choosing between the items of the dropdown happens outside of the dropdown. Here is an example of using the Dropdown element to implement a selection of an element from a list of elements. The Dropdown element is more powerful that this as it allows you to have more complex elements inside (titles, dividers).
  2. When you have a dropdown, you want it to close when a click happens outside of it. This means that you need to capture events that happen outside of the element. This is done by listening to the mouse events at the level of the application. In order to do this, Dropdown uses subscriptions. This is why you also need to wire those subscriptions in order for the dropdown to work. If you comment out the subscription (i.e. make subscriptions = \_ -> Sub.none ) you will see that you can open and interact with the dropdown but it doesn’t close anymore.
1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.