Question

我可以在Aurelia视图的模板中放置<style>标记吗？我有一个特定的问题，如果我在模板中有一个<style>标签，我的aurelia对话框没有正确对齐（它浮动到屏幕顶部而不是居中在中间）。删除<style>标记后，所有内容都会正确放置。为视图/模板编写.css类的正确方法是什么？

示例：对于我的对话框组件（类似于bootstrap模式），我有一个dialog.html和一个dialog.js 在dialog.html中，代码如下所示：

<template>
  <style media="screen">
    .selectedBorder {
      border: 1px solid black;
    }  
  </style>
  <ai-dialog>
    <ai-dialog-header>
      Header
    </ai-dialog-header>
    <ai-dialog-body>
      Sample body information
    </ai-dialog-body>
    <ai-dialog-footer>
      Footer info
    </ai-dialog-footer>
  </ai-dialog>
</template>

编辑：我明白了。您可以在模板中包含<style>个标签。我的问题是我有一个模板（主屏幕区域）调用另一个模板（弹出对话框）。我只需将<style>从dialog.html移动到主视图的html中，一切正常。

Answer 1

这可能不是流行的共识，但我一直在做的是使我的所有客户元素无容器，消除标记膨胀，然后使用id属性命名模板内容。例如：

someView.html：

<template>
    <section class="avatar-pic">
        ....
    </section>
</template>

化身pic.html

.avatar-pic {
    ...styles here
}

化身pic.css

{{1}}

html模板中的样式标签（在Aurelia视图中）？

1 个答案: