-
Alert
Alert
-
App Shell
App Shell
-
Avatar
Avatar
-
Badge
Badge
-
Badges
Badges
-
Button
Button
-
Card
Card
-
Dropdown
Dropdown
-
Dropdown Live
Dropdown Live
-
Flash
Flash
-
Horiz
Horiz
-
Icon
Icon
-
Icon Gallery
Icon Gallery
-
Input
Input
-
Scale
Scale
-
Select Filter
Select Filter
-
Spinner
Spinner
-
Stepper
Stepper
-
Table
Table
-
Tabs
Tabs
-
Tooltip
Tooltip
-
Live Tabs
Live tabs Live Tabs
-
Live Tabs Slots
Live tabs Live Tabs Slots
-
Colors
Styleguide Colors
-
Dropdown
Usage Dropdown
-
Foldable Stepper
Usage Foldable Stepper
-
Form
Usage Form
-
Modal
Usage Modal
-
Radio Matrix
Usage Radio Matrix
-
Scale
Usage Scale
-
Stepper
Usage Stepper
-
Tabs
Usage Tabs
-
Tabs Slots
Usage Tabs Slots
-
Widget
Widget usage Widget
-
Widget Fixed Bottom
Widget usage Widget Fixed Bottom
-
Widget Stacker
Widget usage Widget Stacker
-
Widget Workflow Example
Widget usage Widget Workflow Example
Dropdown Live
Example: Simple
dropdown
Example: Close on click
Counter 0
Example: Close on click away
Counter 1
Example: Close on click away (with function component dropdown)
This example shows the problem with the class hidden in the dropdown function component.
When we have an event inside a dropdown, the dropdown will close. This happens because the opening of the dropdown is triggered by JS and on an event the hidden class is set by Phoenix.
counter: 0