将 Foundation 的均衡器与 HAML 结合使用

Question

我试图使用 Zurb 的 Foundation Equalizer 使两列的高度相同。

根据基金会网站的语法吧：

<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？这可能吗？

这里有一个link到基金会网站供参考：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 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>

阅读该页面以获取更多信息。

将 Foundation 的均衡器与 HAML 结合使用

Using Foundation's Equalizer with HAML

zurb-foundation

haml

foundation-equalizer