What is a proper declarative syntax for tabsheet with several tabs?

Question

What is a proper declarative syntax for tabsheet with several tabs? I have a declarative xml as below which works fine for one tab only. When I add an another element it says the tabsheet allows only one element inside, whats strange ... Any idea whats wrong here?

<vaadin-tab-sheet>
      <tab caption="Basic">
      </tab>
</vaadin-tab-sheet>

Answer 1

A TabSheet can contain multiple tabs but a tab inside a TabSheet can only have one component. If you want to add more than one component inside a tab, you need to have a layout to cover them. Here is an example:

   <vaadin-tab-sheet> 
       <tab caption="Tab 1 with multiple components" selected> 
           <vaadin-horizontal-layout> 
               <vaadin-button plain-text>
                   Button 
               </vaadin-button> 
               <vaadin-button plain-text>
                   Button 
               </vaadin-button> 
           </vaadin-horizontal-layout> 
       </tab> 
       <tab caption="Tab 2 with only one component"> 
          <vaadin-button plain-text>
              Button 
          </vaadin-button> 
       </tab> 
   </vaadin-tab-sheet>