Question

我一直在努力让materialize-css框架与Aurelia合作。我正在使用带有框架的Typescript，并通过带有＆＃39; gulp watch＆＃39;的cmd在Windows 8上运行服务器。到目前为止，我已按照提供的说明尝试使用aurelia-materialize桥。但是，在我按照步骤操作后，我使用chrome获得以下控制台输出： console error

cmd没有错误。这些是main.ts和索引文件的内容，它们是skeleton-typescript，顶部是materialize bridge，无需进一步修改： The image on the left is main.ts, the image on the right is index.html

可以选择将materialize css和js导入添加到index.html文件中，但我不知道如何在需要它们的组件上调用初始化函数，例如滑块。任何帮助或其他选择将不胜感激。

Answer 1

将CSS框架与Aurelia集成的最佳策略是在必要时创建自定义属性。以下是如何为可折叠创建自定义属性的示例：

<强> collapsibleCustomAttribute.js

import 'materialize-css'; // the loads the materialize library

@inject(Element)
export class CollapsibleCustomAttribute {

    constructor(element) {
        this.element = $(element);
    }

    attached() {
        this.element.collapsible({
          accordion: false
        });
    }
}

app.html

<require from="./collapsibleCustomAttribute">
<ul class="collapsible" collapsible>
    <li>
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
</ul>

在aurelia中使用物化

1 个答案: