Skip to content

Commit 394fa40

Browse files
kevzlou7979kevzlou7979
committed
Added Stepper Mobile Demo showcase
1 parent a6d58d8 commit 394fa40

File tree

2 files changed

+57
-14
lines changed

2 files changed

+57
-14
lines changed

‎src/main/java/gwt/material/design/demo/client/application/addins/steppers/SteppersView.java‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ interface Binder extends UiBinder<Widget, SteppersView> {
4141
}
4242

4343
@UiField
44-
MaterialStepper stepper, stepperCard, stepperModal, stepperHori, stepperFeedback, stepperError, stepperEvent;
44+
MaterialStepper stepper, stepperCard, stepperModal, stepperHori, stepperFeedback, stepperError, stepperEvent, stepperMobile;
4545

4646

4747
@UiField
@@ -166,6 +166,21 @@ void onCompleteEvent(CompleteEvent e) {
166166
reset(stepperEvent);
167167
}
168168

169+
@UiHandler({"btnMobileContinue1", "btnMobileContinue2", "btnMobileContinue3"})
170+
void onNextStepMobile(ClickEvent e){
171+
stepperMobile.nextStep();
172+
}
173+
174+
@UiHandler({"btnMobilePrev1", "btnMobilePrev2", "btnMobilePrev3"})
175+
void onPrevStepMobile(ClickEvent e){
176+
stepperMobile.prevStep();
177+
}
178+
179+
@UiHandler("stepperMobile")
180+
void onCompleteMobile(CompleteEvent e) {
181+
reset(stepperMobile);
182+
}
183+
169184
protected void reset(MaterialStepper stepper) {
170185
MaterialToast.fireToast("All done");
171186
stepper.reset();

‎src/main/java/gwt/material/design/demo/client/application/addins/steppers/SteppersView.ui.xml‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<m:MaterialPanel>
3232
<m:MaterialPanel addStyleNames="code">
3333
<m:MaterialTitle title="Usage" />
34-
<demo:PrettyPre marginTop="100" addStyleNames="lang-xml">
34+
<demo:PrettyPre addStyleNames="lang-xml">
3535
&emsp;&lt;!-- Addin Import --><br/>
3636
xmlns:ma="urn:import:gwt.material.design.addins.client"<br/><br/>
3737
&lt;!-- Addin Usage --><br/>
@@ -64,7 +64,7 @@
6464
<m:MaterialButton ui:field="btnPrev3" text="Cancel" grid="l4" marginTop="12" type="FLAT" waves="DEFAULT"/>
6565
</ma:stepper.MaterialStep>
6666
</ma:stepper.MaterialStepper>
67-
<demo:PrettyPre marginTop="100" addStyleNames="lang-xml">
67+
<demo:PrettyPre addStyleNames="lang-xml">
6868
&emsp;&lt;ma:stepper.MaterialStepper ui:field="stepper"><br/>
6969
&emsp;&lt;ma:stepper.MaterialStep step="1" title="Name of Step 1" description="Description of Step 1"><br/>
7070
&emsp;&emsp;&lt;m:MaterialPanel width="100%" addStyleNames="{style.block}" backgroundColor="GREY_LIGHTEN_2"/><br/>
@@ -83,7 +83,7 @@
8383
&emsp;&lt;/ma:stepper.MaterialStep><br/>
8484
&lt;/ma:stepper.MaterialStepper><br/>
8585
</demo:PrettyPre>
86-
<demo:PrettyPre marginTop="100" addStyleNames="lang-xml">
86+
<demo:PrettyPre addStyleNames="lang-xml">
8787
&emsp;@UiHandler({"btnContinue1", "btnContinue2", "btnContinue3"})<br/>
8888
void onNextStep(ClickEvent e){<br/>
8989
&emsp;stepper.nextStep();<br/>
@@ -101,11 +101,39 @@
101101
}<br/>
102102
</demo:PrettyPre>
103103
</m:MaterialPanel>
104+
105+
<m:MaterialPanel addStyleNames="code">
106+
<m:MaterialTitle title="Mobile" description="Open this stepper on a mobile device to test." />
107+
<m:MaterialPanel height="600px">
108+
<ma:stepper.MaterialStepper ui:field="stepperMobile" detectOrientation="true" shadow="1">
109+
<ma:stepper.MaterialStep step="1" title="Name of Step 1" description="Description of Step 1">
110+
<m:MaterialPanel width="100%" addStyleNames="{style.block}" backgroundColor="GREY_LIGHTEN_2"/>
111+
<m:MaterialButton ui:field="btnMobileContinue1" text="Continue to Step 2" grid="l4" marginTop="12" textColor="WHITE" waves="DEFAULT"/>
112+
<m:MaterialButton ui:field="btnMobilePrev1" text="Cancel" grid="l4" marginTop="12" type="FLAT" waves="DEFAULT"/>
113+
</ma:stepper.MaterialStep>
114+
<ma:stepper.MaterialStep step="2" title="Name of Step 2" description="Description of Step 1">
115+
<m:MaterialPanel width="100%" addStyleNames="{style.block}" backgroundColor="GREY_LIGHTEN_2"/>
116+
<m:MaterialButton ui:field="btnMobileContinue2" text="Continue to Step 3" grid="l4" marginTop="12" textColor="WHITE" waves="DEFAULT"/>
117+
<m:MaterialButton ui:field="btnMobilePrev2" text="Cancel" grid="l4" marginTop="12" type="FLAT" waves="DEFAULT"/>
118+
</ma:stepper.MaterialStep>
119+
<ma:stepper.MaterialStep step="3" title="Name of Step 3" description="Description of Step 1">
120+
<m:MaterialPanel width="100%" addStyleNames="{style.block}" backgroundColor="GREY_LIGHTEN_2"/>
121+
<m:MaterialButton ui:field="btnMobileContinue3" text="Finish" grid="l4" marginTop="12" textColor="WHITE" waves="DEFAULT"/>
122+
<m:MaterialButton ui:field="btnMobilePrev3" text="Cancel" grid="l4" marginTop="12" type="FLAT" waves="DEFAULT"/>
123+
</ma:stepper.MaterialStep>
124+
</ma:stepper.MaterialStepper>
125+
</m:MaterialPanel>
126+
<demo:PrettyPre addStyleNames="lang-xml">
127+
&lt;m:MaterialStepper detectOrientation="true" shadow="1">
128+
&lt;!-- Steps here -->
129+
&lt;/m:MaterialStepper>
130+
</demo:PrettyPre>
131+
</m:MaterialPanel>
104132

105133
<m:MaterialPanel addStyleNames="code">
106-
<m:MaterialTitle hideOn="HIDE_ON_SMALL" title="Horizontal Steppers" description="Vertical steppers are designed for narrow screen sizes. They are ideal for mobile." />
107-
<m:MaterialPanel hideOn="HIDE_ON_SMALL" height="500px" width="100%">
108-
<ma:stepper.MaterialStepper ui:field="stepperHori" axis="HORIZONTAL" shadow="1">
134+
<m:MaterialTitle title="Horizontal Steppers" description="Vertical steppers are designed for narrow screen sizes. They are ideal for mobile." />
135+
<m:MaterialPanel height="600px" width="100%">
136+
<ma:stepper.MaterialStepper ui:field="stepperHori" axis="HORIZONTAL" detectOrientation="true" shadow="1">
109137
<ma:stepper.MaterialStep step="1" title="Name of Step 1" description="Description of Step 1">
110138
<m:MaterialPanel width="100%" addStyleNames="{style.block}" backgroundColor="GREY_LIGHTEN_2"/>
111139
<m:MaterialButton ui:field="btnContinue01" text="Continue to Step 2" grid="l4" marginTop="12" textColor="WHITE" waves="DEFAULT"/>
@@ -124,7 +152,7 @@
124152
</ma:stepper.MaterialStepper>
125153
</m:MaterialPanel>
126154

127-
<demo:PrettyPre marginTop="100" addStyleNames="lang-xml">
155+
<demo:PrettyPre addStyleNames="lang-xml">
128156
&emsp;&lt;!-- You need to contain your horizontal Stepper into a MaterialPanel to specify the width and height of your stepper --><br/>
129157
&lt;m:MaterialPanel height="500px" width="100%"><br/>
130158
&emsp;&lt;ma:stepper.MaterialStepper axis="HORIZONTAL" shadow="1"><br/>
@@ -153,7 +181,7 @@
153181
<m:MaterialButton ui:field="btnEventPrev3" text="Cancel" grid="l4" marginTop="12" type="FLAT" waves="DEFAULT"/>
154182
</ma:stepper.MaterialStep>
155183
</ma:stepper.MaterialStepper>
156-
<demo:PrettyPre marginTop="100" addStyleNames="lang-java">
184+
<demo:PrettyPre addStyleNames="lang-java">
157185
&emsp;@UiHandler("stepper") <br/>
158186
void onCompleteEvent(CompleteEvent event) { <br/>
159187
&emsp;event.getLastStep(); // Get the last step <br/>
@@ -226,9 +254,9 @@
226254
</m:MaterialPanel>
227255

228256
<m:MaterialPanel addStyleNames="code">
229-
<m:MaterialTitle hideOn="HIDE_ON_SMALL" title="Error on Steppers" description="You can specify a global stepper error by : setError('Error Message'); " />
230-
<m:MaterialPanel hideOn="HIDE_ON_SMALL" height="500px" width="100%">
231-
<ma:stepper.MaterialStepper ui:field="stepperError" axis="HORIZONTAL" shadow="1">
257+
<m:MaterialTitle title="Error on Steppers" description="You can specify a global stepper error by : setError('Error Message'); " />
258+
<m:MaterialPanel height="500px" width="100%">
259+
<ma:stepper.MaterialStepper ui:field="stepperError" axis="HORIZONTAL" detectOrientation="true" shadow="1">
232260
<ma:stepper.MaterialStep step="1" title="Name of Step 1" description="Description of Step 1">
233261
<m:MaterialPanel width="100%" addStyleNames="{style.block}" backgroundColor="GREY_LIGHTEN_2"/>
234262
<m:MaterialButton ui:field="btnError" text="Set Error" grid="l4" marginTop="12" textColor="WHITE" waves="DEFAULT"/>
@@ -254,8 +282,8 @@
254282

255283
<m:MaterialPanel addStyleNames="code">
256284
<m:MaterialTitle title="Feedback on Steppers" description="Steppers may display a transient feedback message after a step is saved. Stepper feedback should only be used if there is a long latency between steps"/>
257-
<m:MaterialPanel hideOn="HIDE_ON_SMALL" height="500px" width="100%">
258-
<ma:stepper.MaterialStepper ui:field="stepperFeedback" axis="HORIZONTAL" shadow="1">
285+
<m:MaterialPanel height="500px" width="100%">
286+
<ma:stepper.MaterialStepper ui:field="stepperFeedback" axis="HORIZONTAL" detectOrientation="true" shadow="1">
259287
<ma:stepper.MaterialStep step="1" title="Name of Step 1" description="Description of Step 1">
260288
<m:MaterialPanel width="100%" backgroundColor="GREY_LIGHTEN_2" addStyleNames="{style.block}"/>
261289
<m:MaterialButton ui:field="btnContinue41" text="Continue with Feedback Loader" grid="l4" marginTop="12" textColor="WHITE" waves="DEFAULT"/>

0 commit comments

Comments
 (0)