2626 <ui : with field =' res' type =' gwt.material.design.demo.client.resources.MaterialResources' />
2727
2828 <g : HTMLPanel >
29-
29+
3030 <m : MaterialRow addStyleNames =" code" >
3131 <m : MaterialTitle title =" Introduction" description =" You can add a Label as a Tab Item and for contents any Material Widget can be added as a Tab Content (e.g MaterialTopNav)" />
3232 <m : MaterialRow >
3333 <m : MaterialColumn grid =" s12" >
34- <m : MaterialTab ui : field =" tabIntro" shadow =" 1" indicatorColor =" YELLOW" >
35- <m : MaterialTabItem waves =" YELLOW" >
36- <m : MaterialLink text =" Tab 1" href =" #tab1" textColor =" WHITE" />
37- </m : MaterialTabItem >
38- <m : MaterialTabItem waves =" YELLOW" >
39- <m : MaterialLink text =" Tab 2" href =" #tab2" textColor =" WHITE" />
40- </m : MaterialTabItem >
41- <m : MaterialTabItem waves =" YELLOW" >
42- <m : MaterialLink text =" Tab 3" href =" #tab3" textColor =" WHITE" />
43- </m : MaterialTabItem >
44- </m : MaterialTab >
34+ <m : MaterialTab ui : field =" tabIntro" shadow =" 1" indicatorColor =" YELLOW" >
35+ <m : MaterialTabItem waves =" YELLOW" >
36+ <m : MaterialLink text =" Tab 1" href =" #tab1" textColor =" WHITE" />
37+ </m : MaterialTabItem >
38+ <m : MaterialTabItem waves =" YELLOW" >
39+ <m : MaterialLink text =" Tab 2" href =" #tab2" textColor =" WHITE" />
40+ </m : MaterialTabItem >
41+ <m : MaterialTabItem waves =" YELLOW" >
42+ <m : MaterialLink text =" Tab 3" href =" #tab3" textColor =" WHITE" />
43+ </m : MaterialTabItem >
44+ </m : MaterialTab >
4545 </m : MaterialColumn >
4646
4747 <m : MaterialColumn m : id =" tab1" grid =" s12" >
5454 <m : MaterialLabel text =" Tab 3 Content" />
5555 </m : MaterialColumn >
5656 </m : MaterialRow >
57-
57+
5858 <demo : PrettyPre addStyleNames =" lang-xml" >
5959  < m:MaterialRow><br />
6060  < m:MaterialColumn grid="s12"><br />
111111 </m : MaterialRow >
112112 <demo : PrettyPre addStyleNames =" code" >
113113  < m:MaterialTab backgroundColor="PURPLE" indicatorColor="PINK" shadow="1"><br />
114-  < m:MaterialTabItem waves="LIGHT" flex="NONE"><br />
114+  < m:MaterialTabItem waves="LIGHT" flex="NONE"><br />
115115   < m:MaterialLink text="Tab 1" href="#tab1" textColor="WHITE"/><br />
116116  < /m:MaterialTabItem><br />
117117  < m:MaterialTabItem waves="YELLOW" flex="NONE"><br />
200200
201201 <m : MaterialRow addStyleNames =" code" >
202202 <m : MaterialTitle title =" Dynamic Tabs" description =" Note: Currently we dont support scrollable tabs. In the future we will implement it. So be smart for how many tabs you are going to implement." />
203-
203+
204204 <m : MaterialButton ui : field =" addTab" text =" Add other Tab" marginBottom =" 20" />
205-
205+
206206 <m : MaterialTab ui : field =" dynamicTabs" indicatorColor =" YELLOW" shadow =" 1" />
207-
207+
208208 <m : MaterialRow ui : field =" dynamicTabsRow" />
209-
209+
210210 <demo : PrettyPre addStyleNames =" lang-java" >
211- @UiField<br />
212- MaterialTab dynamicTabs;<br /><br />
213-
214- @UiField<br />
215- MaterialRow dynamicRow;<br /><br />
216-
217- MaterialTabItem item = new MaterialTabItem();<br />
218- item.setWaves(WavesType.DEFAULT);<br />
219- MaterialLink link = new MaterialLink("Tab " index);<br />
220- link.setTextColor(Color.WHITE);<br />
221- link.setHref("#dynamicTab" index);<br />
222- item.add(link);<br /><br />
223-
224- // Adding a simple content<br />
225- MaterialLabel content = new MaterialLabel("Content " index);<br />
226- content.setId("dynamicTab" index);<br />
227- dynamicRow.add(content);<br /><br />
228-
229- // Adding the MaterialTabItem into MaterialTab::dynamicTab<br />
230- dynamicTabs.add(item);
231- </demo : PrettyPre >
232- </m : MaterialRow >
211+ @UiField<br />
212+ MaterialTab dynamicTabs;<br /><br />
213+
214+ @UiField<br />
215+ MaterialRow dynamicRow;<br /><br />
216+
217+ MaterialTabItem item = new MaterialTabItem();<br />
218+ item.setWaves(WavesType.DEFAULT);<br />
219+ MaterialLink link = new MaterialLink("Tab " index);<br />
220+ link.setTextColor(Color.WHITE);<br />
221+ link.setHref("#dynamicTab" index);<br />
222+ item.add(link);<br /><br />
223+
224+ // Adding a simple content<br />
225+ MaterialLabel content = new MaterialLabel("Content " index);<br />
226+ content.setId("dynamicTab" index);<br />
227+ dynamicRow.add(content);<br /><br />
228+
229+ // Adding the MaterialTabItem into MaterialTab::dynamicTab<br />
230+ dynamicTabs.add(item);
231+ </demo : PrettyPre >
232+ </m : MaterialRow >
233233
234234 <m : MaterialRow addStyleNames =" code" >
235- <m : MaterialTitle title =" Get Tab Index Method" description =" By calling this method, you can easily get the selected tab index." />
235+ <m : MaterialTitle title =" getTabIndex() and selecTab(tabId)" description =" By calling this method, you can easily get the selected tab index." />
236+
237+ <m : MaterialRow >
238+ <m : MaterialColumn grid =" s12 m4 l4" >
239+ <m : MaterialListBox ui : field =" lstTabIds" placeholder =" Select Tab" />
240+ </m : MaterialColumn >
241+ <m : MaterialColumn grid =" s12 m3 l3" >
242+ <m : MaterialButton ui : field =" btnGetTabIndex" marginTop =" 20" text =" Get Tab Index" />
243+ </m : MaterialColumn >
244+ </m : MaterialRow >
236245
237246 <m : MaterialRow >
238247 <m : MaterialColumn grid =" s12" >
239248 <m : MaterialTab ui : field =" tabGetIndex" shadow =" 1" indicatorColor =" YELLOW" >
240249 <m : MaterialTabItem waves =" YELLOW" grid =" s4" >
241- <m : MaterialLink text =" Tab 1" href =" #tab211 " textColor =" WHITE" />
250+ <m : MaterialLink text =" Tab Item 1" href =" #item1 " textColor =" WHITE" />
242251 </m : MaterialTabItem >
243252 <m : MaterialTabItem waves =" YELLOW" grid =" s4" >
244- <m : MaterialLink text =" Tab 2" href =" #tab221 " textColor =" WHITE" />
253+ <m : MaterialLink text =" Tab Item 2" href =" #item2 " textColor =" WHITE" />
245254 </m : MaterialTabItem >
246255 <m : MaterialTabItem waves =" YELLOW" grid =" s4" >
247- <m : MaterialLink text =" Tab 3" href =" #tab231 " textColor =" WHITE" />
256+ <m : MaterialLink text =" Tab Item 3" href =" #item3 " textColor =" WHITE" />
248257 </m : MaterialTabItem >
249258 </m : MaterialTab >
250259 </m : MaterialColumn >
251260
252- <m : MaterialColumn m : id =" tab211 " grid =" s12" >
261+ <m : MaterialColumn m : id =" item1 " grid =" s12" >
253262 <m : MaterialLabel text =" Tab 1 Content" />
254263 </m : MaterialColumn >
255- <m : MaterialColumn m : id =" tab221 " grid =" s12" >
264+ <m : MaterialColumn m : id =" item2 " grid =" s12" >
256265 <m : MaterialLabel text =" Tab 2 Content" />
257266 </m : MaterialColumn >
258- <m : MaterialColumn m : id =" tab231 " grid =" s12" >
267+ <m : MaterialColumn m : id =" item3 " grid =" s12" >
259268 <m : MaterialLabel text =" Tab 3 Content" />
260269 </m : MaterialColumn >
261270 </m : MaterialRow >
262271
263- <m : MaterialButton ui : field =" btnGetTabIndex" text =" Get Tab Index" />
264-
265272 <demo : PrettyPre addStyleNames =" lang-java" >
266273 tab.getTabIndex()
267274 </demo : PrettyPre >
415422 </demo : PrettyPre >
416423 </m : MaterialRow >
417424 </g : HTMLPanel >
418- </ui : UiBinder >
425+ </ui : UiBinder >
0 commit comments