I want to use the full gamut of Bootstrap Alert ‘types’(and their associated colors);
primary, secondary, success, danger, warning, info, light and dark.
In Phoenix: put_flash(:info, message) displays a Bootstrap ‘info’ alert put_flash(:error, message) displays a Bootstrap ‘danger’ alert
I’ve tried a put_flash(:success, message) command but it results in no flash message being displayed.
Some Questions:
Why does Phoenix translate an :error type to :danger? It results in the coloring I would have expected but wouldn’t it have been easier(?) to set the CSS class in strict accordance with the Bootstrap CSS classes? I realize that not everyone utilizes Bootstrap so they may feel a bit ‘left out in the cold’.
With the above being the case, is there a way to build a transformation process for Phoenix such that, if you are using Bootstrap, use the first argument (an atom) of the put_flash/2 function as the CSS alert-X class to be used for displaying the flash message?
Examples:
put_flash(:success, "The Message")
<p class="alert alert-success" role="alert">The Message</p>
put_flash(:warning, "The Message")
<p class="alert alert-warning" role="alert">The Message</p>
All put_flash does is store a text string in conn.private under the :phoenix_flash key. You can display the message however you’d like by changing it in layout.eex.html
This is an (untested) example of how you could get whatever flash key and flash message you’d like and then display it with the boostrap conventions you’re describing. layout.html.eex only has templating to display :info and :error by default.