dart - 将核心页面放在另一个核心页面内使得内部核心页面总是可见

  显示原文与译文双语对照的内容
0 0

我将核心页元素 inside 另一个核心页元素,但内核页面元素仍然可以见。

下面是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 可见。

我用正确的方式使用了核心页面? 还有什么解决办法?

时间: 原作者:

0 0

就我所理解的是,这是因为可以见性是使用CSS来根据 core-selected 类。 CSS选择器似乎也包含子元素。

这个CSS修复了它


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

代码中的一个解决方法是在 selectedPages!= 2 时将 selectedSubPages 设置为 -1

代码看起来像


 @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修复它,如果父级也是活动的( 可能是一个更好的解决方案),则只能使页面可以见。

0 0

我也有同样的问题。 当我把核心页面放在核心手架的主要内容区域时,它就隐藏了( 未选中时隐藏了嵌套的核心页) 。

...