Ввод основных страниц внутри других основных страниц делает видимыми внутренние основные страницы

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

Насколько я понимаю, это связано с тем, что видимость применяется с использованием CSS в зависимости от класса core-selected. Селектор 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

У меня была та же проблема. Он загадочно ушел (вложенная основная страница была скрыта, когда не была выбрана), когда я помещал основные страницы в основную область содержимого ядро-леса.