Haml syntax: split a line to a couple of rows

Question

I use HAML in my rails project for my html templates. I would like to figure out if its possible to divide a very long line and make it a couple of rows:

%a.         


        

Answer 1

You can always break your line after commas. So if you had this:

%div.panel
  .panel-body
    = column_chart @consumptions.filter_by_meter(params[:meter]).filter_by_appliance(params[:appliance]).where('start > ?', Time.now - 1.month).group_by_day(:start, format: '%d').sum(:power), colors: ["#7FC564"], title: 'Últimos 30 dias', library: { chartArea: { left: 60, top: 20, width: '95%', height: '85%' }, hAxis: { textPosition: 'bottom', textStyle: { fontSize: 12 }, minTextSpacing: 2 }, vAxis: { textPosition: 'left', format: '# kWh' } }

You could, firstly, break lines on every comma to get into this:

%div.panel
  .panel-body
    = column_chart @consumptions.filter_by_meter(params[:meter]).filter_by_appliance(params[:appliance]).where('start > ?', Time.now - 1.month).group_by_day(:start, format: '%d').sum(:power),
      colors: ["#7FC564"],
      title: 'Últimos 30 dias',
      library: { chartArea: { left: 60, top: 20, width: '95%', height: '85%' },
      hAxis: { textPosition: 'bottom', textStyle: { fontSize: 12 }, minTextSpacing: 2 },
      vAxis: { textPosition: 'left', format: '# kWh' } |

Still, the first line is too big! No problem. The pipe character can designate a multiline string.

It’s placed at the end of a line (after some whitespace) and means that all following lines that end with | will be evaluated as though they were on the same line. So you'd finally get:

%div.panel
  .panel-body
    = column_chart @consumptions.filter_by_meter(params[:meter]) |
      .filter_by_appliance(params[:appliance]) |
      .where('start > ?', Time.now - 1.month) |
      .group_by_day(:start, format: '%d') |
      .sum(:power), |
      colors: ["#7FC456"],
      title: 'Últimos 30 dias',
      library: { chartArea: { left: 60, top: 20, width: '95%', height: '85%' },
      hAxis: { textPosition: 'bottom', textStyle: { fontSize: 12 }, minTextSpacing: 2 },
      vAxis: { textPosition: 'left', format: '# kWh' } |

Note that even the last line in the multiline block should end with |.

Hope it helps!

Answer 2

New lines can be placed after commas, according to the Haml documentation. So, perhaps something like the following would work:

%a.open-service{href: '#', 
                data: { service_name: service.description,
                        balance_type: "coinsurance",
                        total: service.a_total_billed - service.a_rejected - service.a_not_covered, 
                        discount: service} }

Answer 3

I just came accross this question, I was having the same issue but the selected answer didn't help me. So I'm just building upon Mikhail's answer. If you have very long attributes that are not separated by commas (say you're using something like angularjs), you can split it on several lines by adding + | at the end of each line (including the last line in this multiline block, which is the tricky part).

Just like this :

%select{ ng: { model: "my_model_name",
             options: "myitem as myitem.formattedName for myitem in container.item_list() | " + |
                      "without: another_list.item_list()" }}                                    |

You can read about this in HAML documentation.

Answer 4

I believe you can achieve this with the help of |. You can read about it in the haml documentation here.

Answer 5

Sometimes Multiline in HAML can have little to nothing to do with adding rails code, since some elements need to have lots of attributes, such as the Bootstrap Progress Bar, and simply look hideous on one line.

This was giving me a headache:

.progress
  .progress-bar.progress-bar-striped.progress-bar-success{ |
                  role: "progressbar",                     |
                  aria: {                                  |
                    valuenow: "#{@percent}",               |
                    valuemin: "0",                         |
                    valuemax: "100",                       |
                  },                                       |
                  style: "width: #{@percent}%;" }          |
    = "#{@percent}%"

And here was the solution to my struggle:

.progress
  .progress-bar { class: "progress-bar-striped progress-bar-success",
                  role: "progressbar",
                  aria: { valuenow: "#{@percent}",
                          valuemin: "0",
                          valuemax: "100", 
                  },
                  style: "width: #{@percent}%;" }
    = "#{@percent}%"

Please note that even without the pipebar lines, so long as the preceding line ended in a comma, and no line ended with an open bracket,