Question

我将核心页面元素放在另一个核心页面元素中，但内部核心页面元素始终可见。

这里是HTML代码：

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/core_elements/core_pages.html">

<polymer-element name="pages-test">
  <template>

      <button on-click={{increasePages}}>pages</button>
      <button on-click={{increaseSubPages}}>sub-pages</button>

        <core-pages selected={{selectedPages}}>
           <div>PAGE 1</div>
           <div>PAGE 2</div>
           <div>PAGE 3
             <core-pages selected={{selectedSubPages}}>
               <div>SUB PAGE 1</div>
               <div>SUB PAGE 2</div>
               <div>SUB PAGE 3</div>
             </core-pages>   
           </div>
        </core-pages>
  </template>
  <script type="application/dart" src="pages_test.dart"></script>
</polymer-element>

和Dart代码：

import 'package:polymer/polymer.dart';

@CustomTag('pages-test')
class PagesTest extends PolymerElement {

  @observable
  int selectedPages = 0;

  @observable
  int selectedSubPages = 0;

  PagesTest.created() : super.created() {
  }

  void increasePages() {
    selectedPages = (selectedPages + 1)%3;
  }

  void increaseSubPages() {
    selectedSubPages = (selectedSubPages + 1)%3;
  }

}

当PAGE 1可见时，SUB PAGE 1也可见。

我正在以正确的方式使用核心页面？有什么解决方法吗？

Answer 1

据我了解，这是因为根据core-selected类使用CSS应用可见性。 CSS选择器似乎也包括儿童。

这个CSS修复了它

  core-pages > :not(.core-selected) > core-pages > .core-selected {
    visibility: hidden;
  }

代码中的解决方法是在selectedSubPages！= -1

时将selectedPages设置为2

代码看起来像

  @observable
  int selectedPages = 0;

  int _selectedSubPages = 0;
  @ComputedProperty('selectedPages')
  int get selectedSubPages {
    if (selectedPages != 2) {
      return -1;
    } else {
      return _selectedSubPages;
    }
  }
  set selectedSubPages(int value) => _selectedSubPages = value;


  void increasePages() {
    selectedPages = (selectedPages + 1)%3;
  }

  void increaseSubPages() {
    selectedSubPages = notifyPropertyChange(#selectedSubPages, selectedSubPages, (selectedSubPages + 1)%3);
  }

您还可以尝试使用CSS修复它，使页面仅在父级也处于活动状态时可见（可能是更好的解决方案）。

Answer 2

我遇到了同样的问题。当我将核心页放在核心支架的主要内容区域时，它神秘地消失了（嵌套的核心页面在未被选中时被隐藏）。

将核心页面放在另一个核心页面中会使内部核心页面始终可见

2 个答案: