/ / Використання еквалайзера Фонду за допомогою HAML - zurb-foundation, haml, фундамент-еквалайзер

Використання еквалайзера Foundation з HAML - zurb-foundation, haml, фундамент-еквалайзер

Я намагаюся використати Foundation Equalizer 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>

Як перекладати це на haml? Чи це можливо?

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

Відповіді:

2 для відповіді № 1

(Я приймаю свою відповідь, що ви вже знаєте, як використовувати HAML.)

Ви могли б класифікувати класи як звичайні, але атрибути даних повинні бути спеціально переміщені в HAML. На щастя, щойно знайдена документація HAML описує, як це зробити: http://haml.info/docs/yardoc/file.REFERENCE.html#html5_custom_data_attributes

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>

Прочитайте цю сторінку, щоб отримати більше інформації.