Skip to content

Commit 9970988

Browse files
author
Pablo Henrique
authored
Merge pull request vuematerial#717 from vin-e/develop
Stepper component implementation
2 parents fe8161d + 71afc01 commit 9970988

File tree

13 files changed

+1052
-1
lines changed

13 files changed

+1052
-1
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313

1414
<a href="https://www.npmjs.com/package/vue-material">
1515
<img src="https://img.shields.io/npm/v/vue-material.svg" alt="Version">
16+
</a>
17+
18+
<a href="https://cdnjs.com/libraries/vue-material">
19+
<img src="https://img.shields.io/cdnjs/v/vue-material.svg" alt="Version">
1620
</a>
1721

1822
<a href="https://cdnjs.com/libraries/vue-material">

‎docs/src/App.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,10 @@
131131
<router-link exact to="/components/spinner">Spinner</router-link>
132132
</md-list-item>
133133

134+
<md-list-item class="md-inset">
135+
<router-link exact to="/components/stepper">Stepper</router-link>
136+
</md-list-item>
137+
134138
<md-list-item class="md-inset">
135139
<router-link exact to="/components/subheader">Subheader</router-link>
136140
</md-list-item>

‎docs/src/pages/components/Stepper.vue

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
<template>
2+
<page-content page-title="Components - Stepper">
3+
<docs-component>
4+
<div slot="description">
5+
<p>Step indicators are visual indications of an activity progression.</p>
6+
</div>
7+
8+
<div slot="api">
9+
<api-table name="md-stepper">
10+
<md-table slot="properties">
11+
<md-table-header>
12+
<md-table-row>
13+
<md-table-head>Name</md-table-head>
14+
<md-table-head>Type</md-table-head>
15+
<md-table-head>Description</md-table-head>
16+
</md-table-row>
17+
</md-table-header>
18+
<md-table-body>
19+
<md-table-row>
20+
<md-table-cell>md-alternate-labels</md-table-cell>
21+
<md-table-cell><code>Boolean</code></md-table-cell>
22+
<md-table-cell>On the horizontal display it will place the labels underneigh the step icon. Default: false</md-table-cell>
23+
</md-table-row>
24+
<md-table-row>
25+
<md-table-cell>md-elevation</md-table-cell>
26+
<md-table-cell><code>Number</code></md-table-cell>
27+
<md-table-cell>Sets the elevation of the container for each content and the horizontal header. Default: 1</md-table-cell>
28+
</md-table-row>
29+
<md-table-row>
30+
<md-table-cell>md-vertical</md-table-cell>
31+
<md-table-cell><code>Boolean</code></md-table-cell>
32+
<md-table-cell>Will place the steps in a vertical position. Default: false</md-table-cell>
33+
</md-table-row>
34+
</md-table-body>
35+
</md-table>
36+
</api-table>
37+
38+
<api-table name="md-step">
39+
<md-table slot="properties">
40+
<md-table-header>
41+
<md-table-row>
42+
<md-table-head>Name</md-table-head>
43+
<md-table-head>Type</md-table-head>
44+
<md-table-head>Description</md-table-head>
45+
</md-table-row>
46+
</md-table-header>
47+
<md-table-body>
48+
<md-table-row>
49+
<md-table-cell>md-button-back</md-table-cell>
50+
<md-table-cell><code>String</code></md-table-cell>
51+
<md-table-cell>The text to be displayed in the back button. Default: 'BACK'.</md-table-cell>
52+
</md-table-row>
53+
<md-table-row>
54+
<md-table-cell>md-back-continue</md-table-cell>
55+
<md-table-cell><code>String</code></md-table-cell>
56+
<md-table-cell>The text to be displayed in the coninue button. Default: 'CONTINUE' or 'FINISH' (if is the last step)</md-table-cell>
57+
</md-table-row>
58+
<md-table-row>
59+
<md-table-cell>md-continue</md-table-cell>
60+
<md-table-cell><code>Boolean</code></md-table-cell>
61+
<md-table-cell>Ability to define if the step is completed and allowed to continue. Default: true</md-table-cell>
62+
</md-table-row>
63+
<md-table-row>
64+
<md-table-cell>md-disabled</md-table-cell>
65+
<md-table-cell><code>Boolean</code></md-table-cell>
66+
<md-table-cell>Ability to disable the step. Default: false</md-table-cell>
67+
</md-table-row>
68+
<md-table-row>
69+
<md-table-cell>md-editable</md-table-cell>
70+
<md-table-cell><code>Boolean</code></md-table-cell>
71+
<md-table-cell>If the step is allowed to go 'back' after it has been completed. Default: false</md-table-cell>
72+
</md-table-row>
73+
<md-table-row>
74+
<md-table-cell>md-icon</md-table-cell>
75+
<md-table-cell><code>String</code></md-table-cell>
76+
<md-table-cell>Icon to use instead of the index number. Default: will use the step index</md-table-cell>
77+
</md-table-row>
78+
<md-table-row>
79+
<md-table-cell>md-label</md-table-cell>
80+
<md-table-cell><code>String</code></md-table-cell>
81+
<md-table-cell>The label of step header. Default: undefined</md-table-cell>
82+
</md-table-row>
83+
<md-table-row>
84+
<md-table-cell>md-message</md-table-cell>
85+
<md-table-cell><code>String</code></md-table-cell>
86+
<md-table-cell>The sub message to be used underneigh the step header label. Default: undefined</md-table-cell>
87+
</md-table-row>
88+
</md-table-body>
89+
</md-table>
90+
<md-table slot="classes">
91+
<md-table-header>
92+
<md-table-row>
93+
<md-table-head>Name</md-table-head>
94+
<md-table-head>Description</md-table-head>
95+
</md-table-row>
96+
</md-table-header>
97+
<md-table-body>
98+
<md-table-row>
99+
<md-table-cell>md-disabled</md-table-cell>
100+
<md-table-cell>Disabled class.</md-table-cell>
101+
</md-table-row>
102+
</md-table-body>
103+
</md-table>
104+
</api-table>
105+
</div>
106+
107+
<div slot="example">
108+
<example-box card-title="Default steps">
109+
<div class="stepper-demo" slot="demo">
110+
<md-stepper>
111+
<md-step>
112+
<p>This seems something basic I need to do first before the next step.</p>
113+
</md-step>
114+
<md-step>
115+
<p>This seems something I need to focus on just after the first step.</p>
116+
</md-step>
117+
<md-step>
118+
<p>This seems something important I need to fix just right before the last step.</p>
119+
</md-step>
120+
</md-stepper>
121+
</div>
122+
123+
<div slot="code">
124+
<code-block lang="xml">
125+
&lt;md-stepper&gt;
126+
&lt;md-step&gt;
127+
&lt;p&gt;This seems something basic I need to do first before the next step.&lt;/p&gt;
128+
&lt;/md-step&gt;
129+
&lt;md-step&gt;
130+
&lt;p&gt;This seems something I need to focus on just after the first step.&lt;/p&gt;
131+
&lt;/md-step&gt;
132+
&lt;md-step&gt;
133+
&lt;p&gt;This seems something important I need to fix just right before the last step.&lt;/p&gt;
134+
&lt;/md-step&gt;
135+
&lt;/md-stepper&gt;
136+
</code-block>
137+
</div>
138+
</example-box>
139+
140+
<example-box card-title="Labels">
141+
<div class="stepper-demo" slot="demo">
142+
<md-stepper>
143+
<md-step md-label="Dunder Miflin">
144+
<p>This seems something basic I need to do first before the next step.</p>
145+
</md-step>
146+
<md-step md-label="Scraton" md-message="Pennsylvania">
147+
<p>This seems something I need to focus on just after the first step.</p>
148+
</md-step>
149+
</md-stepper>
150+
</div>
151+
152+
<div slot="code">
153+
<code-block lang="xml">
154+
&lt;md-stepper&gt;
155+
&lt;md-step md-label="Dunder Miflin"&gt;
156+
&lt;p&gt;This seems something basic I need to do first before the next step.&lt;/p&gt;
157+
&lt;/md-step&gt;
158+
&lt;md-step md-label="Scraton" md-message="Pennsylvania"&gt;
159+
&lt;p&gt;This seems something I need to focus on just after the first step.&lt;/p&gt;
160+
&lt;/md-step&gt;
161+
&lt;/md-stepper&gt;
162+
</code-block>
163+
</div>
164+
</example-box>
165+
166+
<example-box card-title="Alternate Labels">
167+
<div class="stepper-demo" slot="demo">
168+
<md-stepper md-alternate-labels>
169+
<md-step md-label="Dunder Miflin">
170+
<p>This seems something basic I need to do first before the next step.</p>
171+
</md-step>
172+
<md-step md-label="Scraton" md-message="Pennsylvania">
173+
<p>This seems something I need to focus on just after the first step.</p>
174+
</md-step>
175+
</md-stepper>
176+
</div>
177+
178+
<div slot="code">
179+
<code-block lang="xml">
180+
&lt;md-stepper md-alternate-labels&gt;
181+
&lt;md-step md-label="Dunder Miflin"&gt;
182+
&lt;p&gt;This seems something basic I need to do first before the next step.&lt;/p&gt;
183+
&lt;/md-step&gt;
184+
&lt;md-step md-label="Scraton" md-message="Pennsylvania"&gt;
185+
&lt;p&gt;This seems something I need to focus on just after the first step.&lt;/p&gt;
186+
&lt;/md-step&gt;
187+
&lt;/md-stepper&gt;
188+
</code-block>
189+
</div>
190+
</example-box>
191+
192+
<example-box card-title="Vertical steps">
193+
<div class="stepper-demo" slot="demo">
194+
<md-stepper md-vertical>
195+
<md-step>
196+
<p>This seems something basic I need to do first before the next step.</p>
197+
</md-step>
198+
<md-step>
199+
<p>This seems something I need to focus on just after the first step.</p>
200+
</md-step>
201+
<md-step>
202+
<p>This seems something important I need to fix just right before the last step.</p>
203+
</md-step>
204+
</md-stepper>
205+
</div>
206+
207+
<div slot="code">
208+
<code-block lang="xml">
209+
&lt;md-stepper md-vertical&gt;
210+
&lt;md-step&gt;
211+
&lt;p&gt;This seems something basic I need to do first before the next step.&lt;/p&gt;
212+
&lt;/md-step&gt;
213+
&lt;md-step&gt;
214+
&lt;p&gt;This seems something I need to focus on just after the first step.&lt;/p&gt;
215+
&lt;/md-step&gt;
216+
&lt;md-step&gt;
217+
&lt;p&gt;This seems something important I need to fix just right before the last step.&lt;/p&gt;
218+
&lt;/md-step&gt;
219+
&lt;/md-stepper&gt;
220+
</code-block>
221+
</div>
222+
</example-box>
223+
224+
<example-box card-title="Vertical with Labels">
225+
<div class="stepper-demo" slot="demo">
226+
<md-stepper md-vertical>
227+
<md-step md-label="Dunder Miflin">
228+
<p>This seems something basic I need to do first before the next step.</p>
229+
</md-step>
230+
<md-step md-label="Scraton" md-message="Pennsylvania">
231+
<p>This seems something I need to focus on just after the first step.</p>
232+
</md-step>
233+
</md-stepper>
234+
</div>
235+
236+
<div slot="code">
237+
<code-block lang="xml">
238+
&lt;md-stepper md-vertical&gt;
239+
&lt;md-step md-label="Dunder Miflin"&gt;
240+
&lt;p&gt;This seems something basic I need to do first before the next step.&lt;/p&gt;
241+
&lt;/md-step&gt;
242+
&lt;md-step md-label="Scraton" md-message="Pennsylvania"&gt;
243+
&lt;p&gt;This seems something I need to focus on just after the first step.&lt;/p&gt;
244+
&lt;/md-step&gt;
245+
&lt;/md-stepper&gt;
246+
</code-block>
247+
</div>
248+
</example-box>
249+
</div>
250+
</docs-component>
251+
</page-content>
252+
</template>

‎docs/src/routes.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const Sidenav = (r) => require.ensure([], () => r(require('./pages/components/Si
2929
const Snackbar = (r) => require.ensure([], () => r(require('./pages/components/Snackbar')), 'snackbar');
3030
const SpeedDial = (r) => require.ensure([], () => r(require('./pages/components/SpeedDial')), 'speed-dial');
3131
const Spinner = (r) => require.ensure([], () => r(require('./pages/components/Spinner')), 'spinner');
32+
const Stepper = (r) => require.ensure([], () => r(require('./pages/components/Stepper')), 'stepper');
3233
const Subheader = (r) => require.ensure([], () => r(require('./pages/components/Subheader')), 'subheader');
3334
const Switch = (r) => require.ensure([], () => r(require('./pages/components/Switch')), 'switch');
3435
const Table = (r) => require.ensure([], () => r(require('./pages/components/Table')), 'table');
@@ -189,6 +190,11 @@ const components = [
189190
name: 'components:spinner',
190191
component: Spinner
191192
},
193+
{
194+
path: '/components/stepper',
195+
name: 'components:stepper',
196+
component: Stepper
197+
},
192198
{
193199
path: '/components/subheader',
194200
name: 'components:subheader',

‎src/components/mdSpinner/mdSpinner.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<transition name="md-spinner" appear>
33
<div class="md-spinner" :class="[themeClass, classes]":style="styles">
44
<svg class="md-spinner-draw" viewBox="25 25 50 50">
5-
<circle class="md-spinner-path" cx="50" cy="50" r="20" :stroke-width="mdStroke" :stroke-dasharray="dashProgress" />
5+
<circle class="md-spinner-path" cx="50" cy="50" r="20" :stroke-width="mdStroke" :stroke-dasharray="dashProgress"></circle>
66
</svg>
77
</div>
88
</transition>

‎src/components/mdStepper/index.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import mdStepper from './mdStepper.vue';
2+
import mdStep from './mdStep.vue';
3+
import mdStepHeaderContainer from './mdStepHeaderContainer.js';
4+
import mdStepHeader from './mdStepHeader.vue';
5+
import mdStepperTheme from './mdStepper.theme';
6+
7+
export default function install(Vue) {
8+
Vue.component('md-stepper', mdStepper);
9+
Vue.component('md-step', mdStep);
10+
Vue.component('md-step-header-container', mdStepHeaderContainer);
11+
Vue.component('md-step-header', mdStepHeader);
12+
13+
Vue.material.styles.push(mdStepperTheme);
14+
}

0 commit comments

Comments
 (0)