Polymer 1.0 iron-flex-layout 仅适用于部分标签
Polymer 1.0 iron-flex-layout only works on some tags
更新:The polymer docs 现已更新以反映下面的答案
我正在开发 Polymer 1.0 应用程序。
我正在尝试在部分屏幕上水平布置一些纸质工具栏。
看来我可以让 iron-flex-layout 的 @apply(--layout-horizontal) 在某些元素上工作,但不能在其他元素上工作。
我在下面整理了一个小测试来说明发生了什么。
有趣的是,如果我将 --layout-horizontal 样式的内容复制到 chrome 开发工具中的标签中,它就可以工作。如果我只是将 --layout-horizontal 的内容复制到新样式中,它也会起作用。
这是发生了什么的例子。
第一个 div 是 0.5 到 1.0 迁移指南中的示例。
第二个 div 是示例,但尝试布局一个部分而不是一个跨度。
第三行是我明确复制并应用 --layout-horizontal 样式的地方。
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<dom-module id="layout-test">
<style>
/* Example from migration guide */
.header {
@apply(--layout-horizontal --layout-center);
}
/* A hack that makes it work */
.hack {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
</style>
<template>
<!-- Working example from migration guide -->
<div class="header">
<img src="https://www.polymer-project.org/images/logos/lockup.svg">
<span class="name">name</span>
</div>
<!-- This example does not work -->
<div class="header">
<img src="https://www.polymer-project.org/images/logos/lockup.svg">
<section class="name">name</section>
</div>
<!-- This hack works fine -->
<div class="hack">
<img src="https://www.polymer-project.org/images/logos/lockup.svg">
<section class="name">name</section>
</div>
</template>
</dom-module>
<script type="text/javascript">
Polymer({
is: 'layout-test'
});
</script>
完整项目可在此处获得https://github.com/nburn42/polymer-1.0-LayoutTest
谢谢,
内森
根据关于 polymer 的 github (https://github.com/Polymer/polymer/issues/1601) 的第 1601 期,他们更改了自定义 CSS 混合宏可以传递给 @apply 的方式。不必在单个 @apply 调用中链接多个 mixins,您必须将它们分开。这意味着以下代码片段:
.header {
@apply(--layout-horizontal --layout-center);
}
变为:
.header {
@apply(--layout-horizontal);
@apply(--layout-center);
}
Polymer 确实需要更新其网站上的文档和示例,因为没有反映出此类更改会导致采用 Polymer 的人减少。
更新:The polymer docs 现已更新以反映下面的答案
我正在开发 Polymer 1.0 应用程序。
我正在尝试在部分屏幕上水平布置一些纸质工具栏。
看来我可以让 iron-flex-layout 的 @apply(--layout-horizontal) 在某些元素上工作,但不能在其他元素上工作。
我在下面整理了一个小测试来说明发生了什么。
有趣的是,如果我将 --layout-horizontal 样式的内容复制到 chrome 开发工具中的标签中,它就可以工作。如果我只是将 --layout-horizontal 的内容复制到新样式中,它也会起作用。
这是发生了什么的例子。
第一个 div 是 0.5 到 1.0 迁移指南中的示例。
第二个 div 是示例,但尝试布局一个部分而不是一个跨度。
第三行是我明确复制并应用 --layout-horizontal 样式的地方。
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<dom-module id="layout-test">
<style>
/* Example from migration guide */
.header {
@apply(--layout-horizontal --layout-center);
}
/* A hack that makes it work */
.hack {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
</style>
<template>
<!-- Working example from migration guide -->
<div class="header">
<img src="https://www.polymer-project.org/images/logos/lockup.svg">
<span class="name">name</span>
</div>
<!-- This example does not work -->
<div class="header">
<img src="https://www.polymer-project.org/images/logos/lockup.svg">
<section class="name">name</section>
</div>
<!-- This hack works fine -->
<div class="hack">
<img src="https://www.polymer-project.org/images/logos/lockup.svg">
<section class="name">name</section>
</div>
</template>
</dom-module>
<script type="text/javascript">
Polymer({
is: 'layout-test'
});
</script>
完整项目可在此处获得https://github.com/nburn42/polymer-1.0-LayoutTest
谢谢,
内森
根据关于 polymer 的 github (https://github.com/Polymer/polymer/issues/1601) 的第 1601 期,他们更改了自定义 CSS 混合宏可以传递给 @apply 的方式。不必在单个 @apply 调用中链接多个 mixins,您必须将它们分开。这意味着以下代码片段:
.header {
@apply(--layout-horizontal --layout-center);
}
变为:
.header {
@apply(--layout-horizontal);
@apply(--layout-center);
}
Polymer 确实需要更新其网站上的文档和示例,因为没有反映出此类更改会导致采用 Polymer 的人减少。