Использование Эквалайзера Фонда с HAML

Question

Я пытаюсь использовать фундаментальный эквалайзер Zurb, чтобы сделать два столбца одинаковой высоты.

Синтаксис по данным сайта фонда это:

<div class="row" data-equalizer>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
</div>

Как мне перевести это на хамл? Это возможно?

Вот ссылка на веб-сайт Фонда для справки: http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

Answer 1

(Я предполагаю, что с моим ответом вы уже знаете, как использовать HAML.)

Вы бы отобразили классы как обычно, но атрибуты данных должны быть специально хешированы в HAML. К счастью, только что найденная документация HAML описывает, как это сделать: http://haml.info/docs/yardoc/file.REFERENCE.html

HTML5 Custom Data Attributes

HTML5 allows for adding custom non-visible data attributes to elements using attribute names beginning with data-. Custom data attributes can be used in Haml by using the key :data with a Hash value in an attribute hash. Each of the key/value pairs in the Hash will be transformed into a custom data attribute. For example:

%a{:href=>"/posts", :data => {:author_id => 123}} Posts By Author

will render as:

<a data-author-id='123' href='/posts'>Posts By Author</a>

Прочтите эту страницу, чтобы получить больше информации.