A reusable halogen component that presents an interactive menu.
Menus are rendered as unordered lists of submenus which can be selected and dismissed. Selected submenus are also rendered as unordered lists.
Here is an example of a rendered menu with the first submenu selected.
<ul><li><button>Color</button><ul><li><button>Load color</button></li><li><button>Save color</button></li></ul></li><li><div><button>Edit</button></div></li></ul>
bower i purescript-markdown-halogen --save.
- Create a Halogen parent component to install your menu in.
- Decide what you want selecting an item from your menu to do. Commonly this will be to cause some other component or to evaluate a query.
- Define a query or other data type which represents what you want selecting an item from your menu to do.
Halogen.Menu.Model (Menu(), mkMenu).
- Construct the intitial state of your menu as in this example replacing
ColorQuery Unitwith the type you defined in the previous step.
Halogen.Menu.Component (MenuP(), MenuQueryP(), SubmenuSlotAddress(), menuComponent).
- Define a slot address for your menu.
- Define a type synonym for your menu's state and queries using the query or other data type you defined above as in this example.
- Use these type synonyms and slot address type to redefine the child state, child query and child slot address type synonyms for your parent component as in this example.
- Install your menu into your parent component inside of an element with a class or id as in this example.
- Define a non propogating and default preventing action which is triggered by the onclick event of the root element of your application as in this example.
- Define the evaluation of this action such that it queries your menu component with the
DismissSubmenuaction as in this example.
- Define a peek function for your parent component which transforms the
SelectSubmenuItemquery containing the values you have specified into the operations you wish to perform. In this example this is routing a query to another component.
- Use the included template to define styling for the
buttons in your menu using the class or id you defined previously as a root element as in this example.
Module documentation is published on Pursuit.
An example Halogen application which uses
purescript-halogen-menu is available here.