Content_tag

Phoenix Forum Questions / Help
1

Hi, here’s an extract of code for the link HTML helper

          link("navigate_before",
                [ {:"aria-label", "scroll back button"},
                to: "#",
                class: ["mdc-tab-bar-scroller__indicator__inner", " ",
                        "material-icons"] ] )

There are a couple of things that may suggest I’m making life harder for myself than I need to.

The first is the keyword list. I’ve had to use the full tuple syntax for the aria-label because it contains the “-” character. Therefore, I’ve put it first in the list to avoid curly bracketing all the tuples in the list.

The second is the class list. When I have more than one class I’m having to include an empty class in order to separate the class names in the rendered html.

As I said, am I doing a couple of dumb things?

2

As I recall that module will change up something like aria_label to be aria-label if it is an atom, so you could just do:

link("navigate_before", [
  aria_label: "scroll back button",
  to: "#",
  class: "mdc-tab-bar-scroller__indicator__inner material-icons"
])

And class takes an iolist, so a string is fine (a list gets concatenated together, hence why you needed the " " bit in it).

1 Like
3

You can also write aria-label with just quotes: ["aria-label": "scroll back button"].

1 Like
4

Thanks @OvermindDL1& @Nicd
The thing with the underscore is worth knowing. Quoting the atom like that in a keyword list I’d not noticed before.
The concatenation - that’s today’s dumb question
Thanks both, my code now looks cleaner :smile:

2 Likes