Skip to content

Commit 416aeab

Browse files
BenDolBenDol
committed
Update the SideNavsView for the latest changes.
1 parent 0008b5b commit 416aeab

File tree

1 file changed

+20
-72
lines changed
  • src/main/java/gwt/material/design/demo/client/application/components/sidenavs

1 file changed

+20
-72
lines changed

‎src/main/java/gwt/material/design/demo/client/application/components/sidenavs/SideNavsView.ui.xml‎

Lines changed: 20 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
&lt;m:MaterialNavBar backgroundColor="blue" activates="mysidenav"><br/>
3232
&emsp;&lt;-- NavBar content here --><br/>
3333
&lt;/m:MaterialNavBar><br/><br/>
34-
&lt;m:MaterialSideNav m:id="mysidenav" type="OPEN" width="200" closeOnClick="false"><br/>
34+
&lt;m:MaterialSideNav m:id="mysidenav" type="FIXED" width="200" closeOnClick="false"><br/>
3535
&emsp;&lt;!-- SideNav Links here --><br/>
3636
&lt;/m:MaterialSideNav><br/>
3737
</demo:PrettyPre>
@@ -43,10 +43,13 @@
4343
<p>m:id - The Id of your sidenav, required by material navbar component.</p>
4444
<p>type - There are 4 Permanent Types (No Nav Menu) [open, float, card, clip] and 2 Persistent Types (With Nav Menu) [close, mini].</p>
4545
<p>closeOnClick - If clicked on the sidemenu items it will be automatically closed if set to true.</p>
46+
<p>alwaysShowActivator - Stop the side nav from hiding your activator element.</p>
47+
<p>allowBodyScroll - Stop the side nav from blocking your body element from scrolling.</p>
48+
<p>showOnAttach - Invoke a deferred show call to show your side nav (this isn't always required as some will automatically show).</p>
4649
</blockquote>
4750

48-
<!-- OPEN Permanent -->
49-
<m:MaterialTitle title="Open Permanent" description="The sidebar will be visible by default on large screen devices. You may require to set your padding-left of your MaterialHeader, MaterialMain and MaterialFooter components based on your SideNav Width "/>
51+
<!-- FIXED -->
52+
<m:MaterialTitle title="Fixed Type" description="The sidebar will be visible by default on large screen devices. You may require to set your padding-left of your MaterialHeader, MaterialMain and MaterialFooter components based on your SideNav Width "/>
5053
<m:MaterialImage addStyleNames="z-depth-1" url="https://cloud.githubusercontent.com/assets/3138071/10042710/e988f530-61a1-11e5-8e25-71ab5adf9d12.png"/>
5154
<demo:PrettyPre addStyleNames="lang-xml z-depth-1">
5255
&lt;m:MaterialNavBar backgroundColor="blue" activates="mysidebar"><br/>
@@ -63,7 +66,7 @@
6366
&emsp;&lt;/m:MaterialNavSection><br/>
6467
&lt;/m:MaterialNavBar><br/><br/>
6568

66-
&lt;m:MaterialSideNav width="300" m:id="mysidebar" type="OPEN" closeOnClick="false"><br/>
69+
&lt;m:MaterialSideNav width="300" m:id="mysidebar" type="FIXED" closeOnClick="false"><br/>
6770
&emsp;&lt;m:MaterialNavBrand href="#Test">Title&lt;/m:MaterialNavBrand><br/>
6871
&emsp;&lt;m:MaterialLink iconType="INBOX" iconPosition="LEFT" textColor="blue" text="Inbox" /><br/>
6972
&emsp;&lt;m:MaterialLink iconType="STARS" iconPosition="LEFT" textColor="grey" text="Starred" /><br/>
@@ -73,35 +76,8 @@
7376
&lt;/m:MaterialSideNav><br/>
7477
</demo:PrettyPre>
7578

76-
<!-- FLOAT PERMANENT -->
77-
<m:MaterialTitle title="Float Permanent" />
78-
<m:MaterialImage addStyleNames="z-depth-1" url="https://cloud.githubusercontent.com/assets/3138071/10065329/1b8c34ec-6239-11e5-9979-18d17224e1aa.png"/>
79-
<demo:PrettyPre addStyleNames="lang-xml z-depth-1">
80-
&lt;m:MaterialNavBar backgroundColor="blue" activates="mysidebar"><br/>
81-
&emsp;&lt;m:MaterialNavSection textAlign="RIGHT"><br/>
82-
&emsp;&emsp;&lt;m:MaterialTooltip text="Starter"><br/>
83-
&emsp;&emsp;&emsp;&lt;m:MaterialLink iconType="WHATSHOT" textColor="white"/><br/>
84-
&emsp;&emsp;&lt;/m:MaterialTooltip><br/>
85-
&emsp;&emsp;&lt;m:MaterialTooltip text="Starter"><br/>
86-
&emsp;&emsp;&emsp;&lt;m:MaterialLink iconType="WHATSHOT" textColor="white"/><br/>
87-
&emsp;&emsp;&lt;/m:MaterialTooltip><br/>
88-
&emsp;&emsp;&lt;m:MaterialTooltip text="Starter"><br/>
89-
&emsp;&emsp;&emsp;&lt;m:MaterialLink iconType="WHATSHOT" textColor="white"/><br/>
90-
&emsp;&emsp;&lt;/m:MaterialTooltip><br/>
91-
&emsp;&lt;/m:MaterialNavSection><br/>
92-
&lt;/m:MaterialNavBar><br/><br/>
93-
94-
&lt;m:MaterialSideNav width="300" m:id="mysidebar" type="FLOAT" closeOnClick="false"><br/>
95-
&emsp;&lt;m:MaterialNavBrand href="#Test">Title&lt;/m:MaterialNavBrand><br/>
96-
&emsp;&lt;m:MaterialLink iconType="INBOX" iconPosition="LEFT" textColor="blue" text="Inbox" /><br/>
97-
&emsp;&lt;m:MaterialLink iconType="STARS" iconPosition="LEFT" textColor="grey" text="Starred" /><br/>
98-
&emsp;&lt;m:MaterialLink iconType="SEND" iconPosition="LEFT" textColor="grey" text="Sent Mail" /><br/>
99-
&emsp;&lt;m:MaterialLink iconType="DRAFTS" iconPosition="LEFT" textColor="grey" text="Drafts" /><br/>
100-
&emsp;&lt;m:MaterialLink iconType="MARKUNREAD" iconPosition="LEFT" textColor="grey" text="All Mail" /><br/>
101-
&lt;/m:MaterialSideNav><br/>
102-
</demo:PrettyPre>
103-
<!-- CARD PERMANENT -->
104-
<m:MaterialTitle title="Card Permanent" />
79+
<!-- CARD -->
80+
<m:MaterialTitle title="Card Type" />
10581
<m:MaterialImage addStyleNames="z-depth-1" url="https://cloud.githubusercontent.com/assets/3138071/10065493/bba5e930-623b-11e5-87c8-79dccfdad431.png"/>
10682
<demo:PrettyPre addStyleNames="lang-xml z-depth-1">
10783
&lt;m:MaterialNavBar backgroundColor="blue" activates="mysidebar"><br/>
@@ -118,35 +94,7 @@
11894
&emsp;&lt;/m:MaterialNavSection><br/>
11995
&lt;/m:MaterialNavBar><br/><br/>
12096

121-
&lt;m:MaterialSideNav width="300" m:id="mysidebar" type="CARD" closeOnClick="false"><br/>
122-
&emsp;&lt;m:MaterialNavBrand href="#Test">Title&lt;/m:MaterialNavBrand><br/>
123-
&emsp;&lt;m:MaterialLink iconType="INBOX" iconPosition="LEFT" textColor="blue" text="Inbox" /><br/>
124-
&emsp;&lt;m:MaterialLink iconType="STARS" iconPosition="LEFT" textColor="grey" text="Starred" /><br/>
125-
&emsp;&lt;m:MaterialLink iconType="SEND" iconPosition="LEFT" textColor="grey" text="Sent Mail" /><br/>
126-
&emsp;&lt;m:MaterialLink iconType="DRAFTS" iconPosition="LEFT" textColor="grey" text="Drafts" /><br/>
127-
&emsp;&lt;m:MaterialLink iconType="MARKUNREAD" iconPosition="LEFT" textColor="grey" text="All Mail" /><br/>
128-
&lt;/m:MaterialSideNav><br/>
129-
</demo:PrettyPre>
130-
131-
<!-- Clip Permanent -->
132-
<m:MaterialTitle title="Clip Permanent" />
133-
<m:MaterialImage addStyleNames="z-depth-1" url="https://cloud.githubusercontent.com/assets/3138071/10043407/ad5f3cbc-61a7-11e5-9d73-90a5bc176c58.png"/>
134-
<demo:PrettyPre addStyleNames="lang-xml z-depth-1">
135-
&lt;m:MaterialNavBar backgroundColor="blue" activates="mysidebar"><br/>
136-
&emsp;&lt;m:MaterialNavSection textAlign="RIGHT"><br/>
137-
&emsp;&emsp;&lt;m:MaterialTooltip text="Starter"><br/>
138-
&emsp;&emsp;&emsp;&lt;m:MaterialLink iconType="WHATSHOT" textColor="white"/><br/>
139-
&emsp;&emsp;&lt;/m:MaterialTooltip><br/>
140-
&emsp;&emsp;&lt;m:MaterialTooltip text="Starter"><br/>
141-
&emsp;&emsp;&emsp;&lt;m:MaterialLink iconType="WHATSHOT" textColor="white"/><br/>
142-
&emsp;&emsp;&lt;/m:MaterialTooltip><br/>
143-
&emsp;&emsp;&lt;m:MaterialTooltip text="Starter"><br/>
144-
&emsp;&emsp;&emsp;&lt;m:MaterialLink iconType="WHATSHOT" textColor="white"/><br/>
145-
&emsp;&emsp;&lt;/m:MaterialTooltip><br/>
146-
&emsp;&lt;/m:MaterialNavSection><br/>
147-
&lt;/m:MaterialNavBar><br/><br/>
148-
149-
&lt;m:MaterialSideNav width="300" m:id="mysidebar" type="CLIP" closeOnClick="false"><br/>
97+
&lt;m:MaterialSideNav width="300" m:id="mysidebar" type="CARD" closeOnClick="false"><br/>
15098
&emsp;&lt;m:MaterialNavBrand href="#Test">Title&lt;/m:MaterialNavBrand><br/>
15199
&emsp;&lt;m:MaterialLink iconType="INBOX" iconPosition="LEFT" textColor="blue" text="Inbox" /><br/>
152100
&emsp;&lt;m:MaterialLink iconType="STARS" iconPosition="LEFT" textColor="grey" text="Starred" /><br/>
@@ -156,8 +104,8 @@
156104
&lt;/m:MaterialSideNav><br/>
157105
</demo:PrettyPre>
158106

159-
<!-- MINI Persistent -->
160-
<m:MaterialTitle title="Mini Variant Persistent" />
107+
<!-- MINI -->
108+
<m:MaterialTitle title="Mini Type" />
161109
<m:MaterialImage addStyleNames="z-depth-1" url="https://cloud.githubusercontent.com/assets/3138071/10043841/edc85e3e-61aa-11e5-8f78-0ab2e257befd.gif"/>
162110
<demo:PrettyPre addStyleNames="lang-xml z-depth-1">
163111
&lt;m:MaterialNavBar backgroundColor="blue" activates="mysidebar"><br/>
@@ -174,7 +122,7 @@
174122
&emsp;&lt;/m:MaterialNavSection><br/>
175123
&lt;/m:MaterialNavBar><br/><br/>
176124

177-
&lt;m:MaterialSideNav width="300" m:id="mysidebar" type="OPEN" closeOnClick="false"><br/>
125+
&lt;m:MaterialSideNav width="300" m:id="mysidebar" type="MINI" closeOnClick="false"><br/>
178126
&emsp;&lt;m:MaterialNavBrand href="#Test">Title&lt;/m:MaterialNavBrand><br/>
179127
&emsp;&lt;m:MaterialIcon iconType="INBOX" iconColor="blue"/><br/>
180128
&emsp;&lt;m:MaterialIcon iconType="STARS" iconColor="blue"/><br/>
@@ -184,8 +132,8 @@
184132
&lt;/m:MaterialSideNav><br/>
185133
</demo:PrettyPre>
186134

187-
<!-- Close Persistent -->
188-
<m:MaterialTitle title="Close Persistent" />
135+
<!-- PUSH -->
136+
<m:MaterialTitle title="Push Type" />
189137
<m:MaterialImage addStyleNames="z-depth-1" url="https://cloud.githubusercontent.com/assets/3138071/10043075/f0355e0c-61a4-11e5-8a1c-367a682a8bec.gif"/>
190138
<demo:PrettyPre addStyleNames="lang-xml z-depth-1">
191139
&lt;m:MaterialNavBar backgroundColor="blue" activates="mysidebar"><br/>
@@ -202,7 +150,7 @@
202150
&emsp;&lt;/m:MaterialNavSection><br/>
203151
&lt;/m:MaterialNavBar><br/><br/>
204152

205-
&lt;m:MaterialSideNav width="300" m:id="mysidebar" type="CLOSE" closeOnClick="false"><br/>
153+
&lt;m:MaterialSideNav width="300" m:id="mysidebar" type="PUSH" closeOnClick="false"><br/>
206154
&emsp;&lt;m:MaterialNavBrand href="#Test">Title&lt;/m:MaterialNavBrand><br/>
207155
&emsp;&lt;m:MaterialLink iconType="INBOX" iconPosition="LEFT" textColor="blue" text="Inbox" /><br/>
208156
&emsp;&lt;m:MaterialLink iconType="STARS" iconPosition="LEFT" textColor="grey" text="Starred" /><br/>
@@ -212,10 +160,10 @@
212160
&lt;/m:MaterialSideNav><br/>
213161
</demo:PrettyPre>
214162

215-
<!-- Close Persistent -->
216-
<m:MaterialTitle title="Collapsible SideNav" description="Using collapsible component you can add easily a sub menu into your sidenav."/>
163+
<!-- Collapsible -->
164+
<m:MaterialTitle title="Collapsible Items" description="Using collapsible component you can add easily a sub menu into your sidenav."/>
217165
<demo:PrettyPre addStyleNames="lang-xml z-depth-1">
218-
&emsp;&lt;m:MaterialSideNav ui:field="sideNav" m:id="sideBar" width="250" type="OPEN" closeOnClick="false"><br/><br/>
166+
&emsp;&lt;m:MaterialSideNav ui:field="sideNav" m:id="sideBar" width="250" type="FIXED" closeOnClick="false"><br/><br/>
219167
&emsp;&lt;m:MaterialCollapsible><br/><br/>
220168
&emsp;&emsp;&lt;m:MaterialCollapsibleItem><br/>
221169
&emsp;&emsp;&lt;m:MaterialCollapsibleHeader waves="DEFAULT"><br/>
@@ -239,7 +187,7 @@
239187
<m:MaterialTitle title="Profile SideNav" description="Attach in sidenav to indicate the user profile information."/>
240188
<m:MaterialImage url="https://cloud.githubusercontent.com/assets/3138071/11274662/ccdb1e7c-8f14-11e5-821f-f88eb34ff438.png"/>
241189
<demo:PrettyPre addStyleNames="lang-xml z-depth-1">
242-
&emsp;&lt;m:MaterialSideNav type="OPEN" m:id="sideNav" closeOnClick="false" width="280"><br/>
190+
&emsp;&lt;m:MaterialSideNav type="FIXED" m:id="sideNav" closeOnClick="false" width="280"><br/>
243191
&emsp;&lt;m:MaterialSideProfile url="http://static1.squarespace.com/static/51609147e4b0715db61d32b6/521b97cee4b05f031fd12dde/5519e33de4b06a1002802805/1431718693701/?format=1500w"><br/>
244192
&emsp;&emsp;&lt;m:MaterialImage url="http://b.vimeocdn.com/ps/339/488/3394886_300.jpg" /><br/>
245193
&emsp;&emsp;&lt;m:MaterialLabel text="GWT Material" textColor="white"/><br/>

0 commit comments

Comments
 (0)