Question

我正在尝试使“flex”属性在指定为轻型DOM时很好地工作。下面的示例代码是我正在处理的自定义元素中的示例代码。

这有效：

<core-scroll-header-panel fixed>
    <core-toolbar>
        <paper-icon-button icon="arrow-back"></paper-icon-button>
        <span flex>Hello!</span>
        <paper-icon-button icon="search"></paper-icon-button>
        <!--<content select="[toolbar]"></content>-->
    </core-toolbar>
    <div content>
        stuff...
    </div>
</core-scroll-header-panel>

select="[toolbar]"的内容与上例中的3行相同。这不起作用。 Span不会弯曲：

<core-scroll-header-panel fixed>
    <core-toolbar>
        <content select="[toolbar]"></content>
    </core-toolbar>
    <div content>
        stuff...
    </div>
</core-scroll-header-panel>

知道如何使这项工作？我可以使用一个解决方案，我需要在我正在创建的自定义元素中添加其他样式但不知道如何去做。

Answer 1

在select="[toolbar]插入点上使用<content>表示您的灯光节点需要提取toolbar属性：

<my-element>
  <paper-icon-button toolbar icon="arrow-back"></paper-icon-button>
  <span toolbar flex>Hello!</span>
  <paper-icon-button toolbar icon="search"></paper-icon-button>
</my-element>

我能够毫无问题地解决这个问题。它还需要fit上的core-scroll-header-panel布局attr来为它指定大小。

<script src="https://www.polymer-project.org/0.5/webcomponents.min.js"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-toolbar/core-toolbar.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-icon-button/paper-icon-button.html">

<polymer-element name="my-element" noscript>
  <template>
    <core-scroll-header-panel fit>
      <core-toolbar>
        <content select="[toolbar]"></content>
      </core-toolbar>
      <div content>
        stuff...
      </div>
    </core-scroll-header-panel>
  </template>
</polymer-element>

<my-element>
  <paper-icon-button toolbar icon="arrow-back"></paper-icon-button>
  <span toolbar flex>Hello!</span>
  <paper-icon-button toolbar icon="search"></paper-icon-button>
</my-element>

指定为轻型DOM时，flex属性不起作用

1 个答案: