9dacac780c* Remove QueryF from Select in preparation for v5 changes, as there is no longer the ability to leverage a query within ComponentHTML. Add the npm-check-updates package to dev dependencies. * switch to variants * Complete switch to Halogen 5 * switch examples to v5 * switch to extensible state, no comonad * now that state can be embedded, take as an argument * cleanup * switch to handling messages, which addresses lingering concerns with extensibility in the components * uncomment * cleanup * add default.nix file containing mkdocs * update dependencies * fix infinite recursion (compiler bug?) * eta-expand instead of removing helper * remove unused css * Add type synonyms for simple cases * rename RunQuery to AsAction * allow external initialization, merge state fields * simplify examples * Simplify a little more * formatting * add finalizer to default spec * extensible actions * update item counts on attempted highlight * cleanup * polish up CSS for examples to test behavior * switch to void
1.9 KiB
title: PureScript Halogen Select Examples
Examples
You can play around with a few example components here. However, for a much richer set of components with much more functionality, check out the Ocelot design system by CitizenNet.
!!! warning The components on this page function properly, but look horrible while we migrate CSS.
Dropdown
Dropdowns are a common button-driven input type, especially for navigation. But most custom dropdowns sacrifice usability: unlike browser default dropdowns, you can't type on most custom dropdowns, nor are many built with accessibility in mind. With Select you can easily create rich, usable dropdowns with little code.
Curious how to build a dropdown with Select? Check out the dropdown tutorial.
Typeahead / Autocomplete
This library was originally designed so that we could build typeaheads with all sorts of custom rendering and functionality. It was frustrating to find solutions that almost worked, but broke down as soon as you needed a moderate level of customization.
Building typeaheads with Select is only a little more complex than building dropdowns. Instead of a button as input, you'll use a text input, and you'll be responsible for deciding how to handle user searches. Select handles debouncing user input, keyboard navigation, and more on your behalf.
The typeahead below is quite simple; to see examples of more sophisticated typeaheads -- including ones that fetch and display data asynchronously -- check out the Ocelot component library.
Curious how to build a typeahead with Select? Check out the typeahead tutorial.