【问题标题】:Dart, Polymer and Foundation CSSDart、Polymer 和基础 CSS
【发布时间】:2013-10-17 14:28:46
【问题描述】:

我尝试将聚合物 Web 组件与 dart 和 Foundation CSS 框架混合在一起,到目前为止,一些简单的东西都可以正常工作,例如按钮、网格、菜单。我想如果我遇到问题,我只需要移植我需要飞镖的 javascript。有人尝试这个或想尝试这个吗?

这是让 CSS 泄漏到组件中的技巧。

class ClickCounter ... {
...
  bool get applyAuthorStyles => true;
...

http://i.stack.imgur.com/oNoGR.png

【问题讨论】:

    标签: dart zurb-foundation dart-polymer


    【解决方案1】:

    是的,我也试试这个。 我尝试的第一件事是为每个组件创建一个样式文件并使用 sass @extends 来制作每个组件样式,我的目标是抽象 zurb,所以如果我想更改主题或 css 框架,我只需要更改 sass文件。

    但是 zurb-foundation 依赖于一个必须包含的基本文件,我不能只为按钮创建一个文件,因为基础中的 de 按钮依赖于主文件中设置的变量,这会生成一个带有冗余的巨大文件每个组件的 css。

    我尝试的第二件事是扭曲基本组件,比如按钮,让我们说一个

    <x-button></x-button>
    

    然后在我的 sass 文件中包含 zurb 按钮文件,并使 x-button @extends .button 或 @include .button 使按钮和 x-button 具有相同的外观。这适用于基本元素。

    另一种方法是applyAuthorStyles,让css泄露

    我不确定什么是最好的方法,因为每种方法都有其缺陷。

    为什么要包装基本组件?有共同的行为和API。例如:在表单中启用和禁用组件。我在聚合物中的所有基本组件(x-button、x-input 等)都从我的框架类扩展而来,在这个框架类中,我有共同的行为启用和禁用,所以我可以使用相同的 API 来启用和禁用组件。

    这是一项进展缓慢的工作,更多的是为了好玩,我停止了这项工作,因为我需要花更多的时间来创建应用程序而不是创建框架。不幸的是,没有像 ExtJs 和 Dojo 这样的 JavaScript 那样好的 Dart 组件框架。

    但想法是制作一个组件集(具有共同行为)并使用 sass 框架来获得视觉效果,也许可以将 css 框架抽象为一种可以插入并改变应用程序外观和感觉的方式,那就是不容易,因为有些组件有特定的 html 标记

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-05-06
      • 1970-01-01
      • 2013-12-22
      • 1970-01-01
      • 2014-01-17
      • 2013-07-29
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多