Переключение содержимого при выборе вкладки с использованием вкладок полимерных элементов пользовательского интерфейса

Я пытаюсь использовать компонент polymer-ui-tabs для традиционного компонента вкладок, где вы переключаете содержимое в зависимости от того, какая вкладка выбрана. Если я что-то не упустил, компонент polymer-ui-tabs, похоже, предоставляет только бит селектора вкладок без встроенного механизма переключения контента. Это правильно?

Если нет, то как мне построить это поверх него? Скорее всего, я нашел onPolymerSelect в polymer_selector, но сейчас этот метод выглядит так

Stream<CustomEvent> get onPolymerSelect {
  Element selection = $['selection'];
  if(selection != null) {
    // TODO return selection.onPolymerSelect;
  }
}

Я только что наткнулся на http://kevmoo.github.io/widget.dart/#tabswidget который я изучу, но просто хотел убедиться, что я ничего не упустил, прежде чем использовать другую библиотеку


dart polymer dart-polymer
person Anders    schedule 16.02.2014    source источник
comment
Я перенес полимер-уи-таб на Дарт, но сам еще не использовал его. Я нашел пример здесь groups.google.com/forum/#!topic /polymer-dev/QYe4TKR40EY. polymer-ui-animated-pages еще не портирован, но poly-ui-pages портирован. Его использование, вероятно, аналогично.   -  person Günter Zöchbauer    schedule 17.02.2014
comment
Спасибо @GünterZöchbauer. Думаю, я понял. Скоро попробую. На самом деле выглядит очень круто. Простой, но очень гибкий, что мне и нужно, так как в конечном итоге он будет выглядеть совсем иначе, чем обычные вкладки, и, вероятно, будет сбоку, что должно быть легко сделать с макетом сетки.   -  person Anders    schedule 17.02.2014

Ответы (1)


arrow_upward
1
arrow_downward

Хотя этого нет в Dart, вот пример того, как вы можете использовать polymer-ui-tabs и polymer-ui-animated-pages вместе для достижения желаемого эффекта (демо):

индекс.html:

<!-- <script src="platform.js"></script>
     not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>

<link rel="import" href="s-app.html">
<s-app></s-app>

s-приложение.html:

<link rel="import" href="polymer.html">
<link rel="import" href="polymer-ui-tabs/polymer-ui-tabs.html">
<link rel="import" href="polymer-ui-animated-pages/polymer-ui-animated-pages.html">
<link rel="import" href="polymer-flex-layout/polymer-flex-layout.html">

<polymer-element name="s-app">  
  <template>
    <style>
      :host {
        display: block;
      }
      polymer-ui-tabs {
        border-top: 1px solid #000;
      }
      polymer-ui-tabs > * {
        border-right: 1px solid #000;
      }
      header {
        padding: 10px;
        background: black;
        color: white;
      }
      polymer-ui-animated-pages > * {
        padding: 10px;
      }

    </style>
    <polymer-flex-layout vertical></polymer-flex-layout>
    <header>
      Header
    </header>
    <polymer-ui-animated-pages selected="{{page}}" flex>
      <div>Page One</div>
      <div>Page Two</div>
      <div>Page Three</div>
    </polymer-ui-animated-pages>
    <polymer-ui-tabs selected="{{page}}">
      <span flex>One</span>
      <span flex>Two</span>
      <span flex>Three</span>
    </polymer-ui-tabs>
  </template>

  <script>
    // switch page on tab
    Polymer('s-app', {page:0});
  </script>

</polymer-element>

Как видите, привязка текущего выделения между элементом вкладки и анимированной страницей позволяет переключаться на нужный контент для вкладки.

person addyo    schedule 11.03.2014
comment
Спасибо за пример, но, к сожалению, полимерный пользовательский интерфейс еще не портирован на Дарт. - person Günter Zöchbauer; 11.03.2014