VAADIN-GRID V2和聚合物添加网格的详细

Question

我开始与聚合物入门-kit和Vaadin栅V2-β

我能得到这个代码来显示，但是具有显示行细节麻烦。 我喜欢去的外观效果： https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/demo/other.html 行细节

此代码我从例子了，其工作。可能有人纪念这件事，并添加怎样的细节将完成请

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="shared-styles.html"> 

<dom-module id="my-view6"> 
    <template> 
    <style include="shared-styles"> 
     :host { 
     display: block; 

     padding: 10px; 
     } 
    </style> 

    <vaadin-grid items='[{"name": "John", "surname": "Lennon", "role": "singer"}, 
          {"name": "Ringo", "surname": "Starr", "role": "drums"}, 
          {"name": "John", "surname": "Lennon", "role": "singer"}, 
          {"name": "Ringo", "surname": "Starr", "role": "drums"}, 
          {"name": "John", "surname": "Lennon", "role": "singer"}, 
          {"name": "John", "surname": "Lennon", "role": "singer"}, 
          {"name": "Ringo", "surname": "Starr", "role": "drums"}, 
          {"name": "John", "surname": "Lennon", "role": "singer"}, 
          {"name": "Ringo", "surname": "Starr", "role": "drums"}, 
          {"name": "John", "surname": "Lennon", "role": "singer"},            
          {"name": "Ringo", "surname": "Starr", "role": "drums"}]'> 

      <vaadin-grid-column-group> 
      <vaadin-grid-column> 
       <template class="header">Name</template> 
       <template>[[item.name]]</template> 
      </vaadin-grid-column> 
      <vaadin-grid-column> 
       <template class="header">Surname</template> 
       <template>[[item.surname]]</template> 
      </vaadin-grid-column> 
      </vaadin-grid-column-group> 

      <vaadin-grid-column> 
      <template class="header">Role</template> 
      <template>[[item.role]]</template> 
      </vaadin-grid-column> 
     </vaadin-grid> 
     </template> 

     <script> 
     Polymer({ 
      is: 'my-view6', 
     }); 
     </script> 
    </dom-module> 

Answer 1

你需要两样东西：

首先，添加模板与细节内容

<template class="row-details"> 
    <div>My Details</div> 
</template> 

其次，切换详细信息可以使用{{expanded}}变量，expandedItems属性或expandItem(item)和collapseItem(item) API。

请看这里的例子：https://cdn.vaadin.com/vaadin-grid/2.0.0-alpha2/demo/#row-details