Skip to content

Commit cb92ac6

Browse files
author
Pablo Henrique
authored
Merge pull request vuematerial#549 from fergardi/components/mdOnboarding
Added Onboarding component
2 parents 8b35fb3 + 8f19e8b commit cb92ac6

File tree

9 files changed

+912
-0
lines changed

9 files changed

+912
-0
lines changed

‎docs/src/App.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,10 @@
9999
<router-link exact to="/components/menu">Menu</router-link>
100100
</md-list-item>
101101

102+
<md-list-item class="md-inset">
103+
<router-link exact to="/components/onboarding">Onboarding</router-link>
104+
</md-list-item>
105+
102106
<md-list-item class="md-inset">
103107
<router-link exact to="/components/progress">Progress</router-link>
104108
</md-list-item>

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

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<template>
2+
<page-content page-title="Components - Onboarding">
3+
<docs-component>
4+
<div slot="description">
5+
<p>The onboarding offers a first and fast look for your page, with custom controls, automatized steps and swipe effects. Can be also used as a custom carousel.</p>
6+
<p>Can be themed used the following:</p>
7+
<ul class="md-body-4">
8+
<li><code>md-primary</code></li>
9+
<li><code>md-warn</code></li>
10+
<li><code>md-accent</code></li>
11+
<li><code>md-transparent</code></li>
12+
</ul>
13+
</div>
14+
15+
<div slot="api">
16+
<api-table name="md-onboarding">
17+
<md-table slot="properties">
18+
19+
<md-table-header>
20+
<md-table-row>
21+
<md-table-head>Name</md-table-head>
22+
<md-table-head>Type</md-table-head>
23+
<md-table-head>Description</md-table-head>
24+
</md-table-row>
25+
</md-table-header>
26+
27+
<md-table-body>
28+
<md-table-row>
29+
<md-table-cell>md-auto</md-table-cell>
30+
<md-table-cell><code>Boolean</code></md-table-cell>
31+
<md-table-cell>Enable auto-slider. Default <code>false</code>.</md-table-cell>
32+
</md-table-row>
33+
34+
<md-table-row>
35+
<md-table-cell>md-infinite</md-table-cell>
36+
<md-table-cell><code>Boolean</code></md-table-cell>
37+
<md-table-cell>Enable infinite loop. Default <code>false</code>.</md-table-cell>
38+
</md-table-row>
39+
40+
<md-table-row>
41+
<md-table-cell>md-duration</md-table-cell>
42+
<md-table-cell><code>Number</code></md-table-cell>
43+
<md-table-cell>Set duration for <code>md-auto</code> in milliseconds. Default <code>5000</code>.</md-table-cell>
44+
</md-table-row>
45+
46+
<md-table-row>
47+
<md-table-cell>md-controls</md-table-cell>
48+
<md-table-cell><code>Boolean</code></md-table-cell>
49+
<md-table-cell>Enable prev/next controls. Default <code>false</code>.</md-table-cell>
50+
</md-table-row>
51+
52+
<md-table-row>
53+
<md-table-cell>md-swipeable</md-table-cell>
54+
<md-table-cell><code>Boolean</code></md-table-cell>
55+
<md-table-cell>Enable the swipe functionality. Default <code>false</code>.</md-table-cell>
56+
</md-table-row>
57+
58+
<md-table-row>
59+
<md-table-cell>md-swipe-distance</md-table-cell>
60+
<md-table-cell><code>Number</code></md-table-cell>
61+
<md-table-cell>Set the swipe distance needed to open/close the sidenav. Default <code>100</code>.</md-table-cell>
62+
</md-table-row>
63+
</md-table-body>
64+
65+
</md-table>
66+
</api-table>
67+
</div>
68+
69+
<div slot="example">
70+
<example-box card-title="Basic, automatic, infinite, uncontrolled, swipeable">
71+
<div slot="demo">
72+
<md-boards :md-auto="true" :md-infinite="true" :md-duration="5000" :md-swipeable="true">
73+
<md-board id="slide1">
74+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
75+
</md-board>
76+
77+
<md-board id="slide2">
78+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
79+
</md-board>
80+
81+
<md-board id="slide3">
82+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
83+
</md-board>
84+
</md-boards>
85+
</div>
86+
87+
<div slot="code">
88+
<code-block lang="xml">
89+
&lt;md-boards :md-auto=&quot;true&quot; :md-infinite=&quot;true&quot; :md-duration=&quot;5000&quot; :md-swipeable=&quot;true&quot;&gt;
90+
&lt;md-board id=&quot;slide1&quot;&gt;
91+
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
92+
&lt;/md-board&gt;
93+
94+
&lt;md-board id=&quot;slide2&quot;&gt;
95+
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
96+
&lt;/md-board&gt;
97+
98+
&lt;md-board id=&quot;slide3&quot;&gt;
99+
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
100+
&lt;/md-board&gt;
101+
&lt;/md-boards&gt;
102+
</code-block>
103+
</div>
104+
</example-box>
105+
106+
<example-box card-title="Themed, finite, controlled">
107+
<div slot="demo">
108+
<md-boards class="md-transparent" :md-controls="true" style="background-color: black">
109+
<md-board id="slide1" style="color: white">
110+
<p>Transparent themed, for background-imaged slides. Background color black added for demonstration purposes.</p>
111+
</md-board>
112+
113+
<md-board id="slide2" style="color: white">
114+
<p>Transparent themed, for background-imaged slides. Background color black added for demonstration purposes.</p>
115+
</md-board>
116+
117+
<md-board id="slide3" style="color: white">
118+
<p>Transparent themed, for background-imaged slides. Background color black added for demonstration purposes.</p>
119+
</md-board>
120+
</md-boards>
121+
122+
<md-boards class="md-primary" :md-controls="true">
123+
<md-board id="slide1">
124+
<p>Primary themed</p>
125+
</md-board>
126+
127+
<md-board id="slide2">
128+
<p>Primary themed</p>
129+
</md-board>
130+
</md-boards>
131+
132+
<md-boards class="md-accent" :md-controls="true">
133+
<md-board id="slide1">
134+
<p>Accent themed</p>
135+
</md-board>
136+
137+
<md-board id="slide2">
138+
<p>Accent themed</p>
139+
</md-board>
140+
141+
<md-board id="slide3">
142+
<p>Accent themed</p>
143+
</md-board>
144+
</md-boards>
145+
146+
<md-boards class="md-warn" :md-controls="true">
147+
<md-board id="slide1">
148+
<p>Warn themed</p>
149+
</md-board>
150+
151+
<md-board id="slide2">
152+
<p>Warn themed</p>
153+
</md-board>
154+
155+
<md-board id="slide3">
156+
<p>Warn themed</p>
157+
</md-board>
158+
159+
<md-board id="slide4">
160+
<p>Warn themed</p>
161+
</md-board>
162+
</md-boards>
163+
</div>
164+
165+
<div slot="code">
166+
<code-block lang="xml">
167+
&lt;md-boards class=&quot;md-transparent&quot; :md-controls=&quot;true&quot;&gt;
168+
&lt;md-board id=&quot;slide1&quot;&gt;
169+
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
170+
&lt;/md-board&gt;
171+
&lt;/md-boards&gt;
172+
173+
&lt;md-boards class=&quot;md-primary&quot; :md-controls=&quot;true&quot;&gt;
174+
&lt;md-board id=&quot;slide1&quot;&gt;
175+
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
176+
&lt;/md-board&gt;
177+
&lt;/md-boards&gt;
178+
179+
&lt;md-boards class=&quot;md-accent&quot; :md-controls=&quot;true&quot;&gt;
180+
&lt;md-board id=&quot;slide1&quot;&gt;
181+
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
182+
&lt;/md-board&gt;
183+
&lt;/md-boards&gt;
184+
185+
&lt;md-boards class=&quot;md-warn&quot; :md-controls=&quot;true&quot;&gt;
186+
&lt;md-board id=&quot;slide1&quot;&gt;
187+
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
188+
&lt;/md-board&gt;
189+
&lt;/md-boards&gt;
190+
</code-block>
191+
</div>
192+
</example-box>
193+
</div>
194+
</docs-component>
195+
</page-content>
196+
</template>
197+
198+
<style>
199+
.md-boards-content {
200+
height: 150px !important;
201+
}
202+
</style>

‎docs/src/routes.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const InkRipple = (r) => require.ensure([], () => r(require('./pages/components/
2121
const Input = (r) => require.ensure([], () => r(require('./pages/components/Input')), 'input');
2222
const List = (r) => require.ensure([], () => r(require('./pages/components/List')), 'list');
2323
const Menu = (r) => require.ensure([], () => r(require('./pages/components/Menu')), 'menu');
24+
const Onboarding = (r) => require.ensure([], () => r(require('./pages/components/Onboarding')), 'onboarding');
2425
const Progress = (r) => require.ensure([], () => r(require('./pages/components/Progress')), 'progress');
2526
const Radio = (r) => require.ensure([], () => r(require('./pages/components/Radio')), 'radio');
2627
const Select = (r) => require.ensure([], () => r(require('./pages/components/Select')), 'select');
@@ -148,6 +149,11 @@ const components = [
148149
name: 'components:menu',
149150
component: Menu
150151
},
152+
{
153+
path: '/components/onboarding',
154+
name: 'components:onboarding',
155+
component: Onboarding
156+
},
151157
{
152158
path: '/components/progress',
153159
name: 'components:progress',

‎src/components/mdOnboarding/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import mdBoards from './mdBoards.vue';
2+
import mdBoard from './mdBoard.vue';
3+
import mdBoardsTheme from './mdBoards.theme';
4+
5+
export default function install(Vue) {
6+
Vue.component('md-boards', mdBoards);
7+
Vue.component('md-board', mdBoard);
8+
9+
Vue.material.styles.push(mdBoardsTheme);
10+
}

‎src/components/mdOnboarding/mdBoard.vue

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<div class="md-board" :id="boardId" :style="styles">
3+
<slot></slot>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import uniqueId from '../../core/utils/uniqueId';
9+
import getClosestVueParent from '../../core/utils/getClosestVueParent';
10+
11+
export default {
12+
props: {
13+
id: [String, Number],
14+
mdLabel: [String, Number],
15+
mdIcon: String,
16+
mdActive: Boolean,
17+
mdDisabled: Boolean,
18+
mdTooltip: String,
19+
mdTooltipDelay: {
20+
type: String,
21+
default: '0'
22+
},
23+
mdTooltipDirection: {
24+
type: String,
25+
default: 'bottom'
26+
}
27+
},
28+
data() {
29+
return {
30+
mounted: false,
31+
boardId: this.id || 'board-' + uniqueId(),
32+
width: '0px',
33+
left: '0px'
34+
};
35+
},
36+
watch: {
37+
mdActive() {
38+
this.updateBoardData();
39+
},
40+
mdDisabled() {
41+
this.updateBoardData();
42+
},
43+
mdIcon() {
44+
this.updateBoardData();
45+
},
46+
mdLabel() {
47+
this.updateBoardData();
48+
},
49+
mdTooltip() {
50+
this.updateBoardData();
51+
},
52+
mdTooltipDelay() {
53+
this.updateBoardData();
54+
},
55+
mdTooltipDirection() {
56+
this.updateBoardData();
57+
}
58+
},
59+
computed: {
60+
styles() {
61+
return {
62+
width: this.width,
63+
left: this.left
64+
};
65+
}
66+
},
67+
methods: {
68+
getBoardData() {
69+
return {
70+
id: this.boardId,
71+
label: this.mdLabel,
72+
icon: this.mdIcon,
73+
active: this.mdActive,
74+
disabled: this.mdDisabled,
75+
tooltip: this.mdTooltip,
76+
tooltipDelay: this.mdTooltipDelay,
77+
tooltipDirection: this.mdTooltipDirection,
78+
ref: this
79+
};
80+
},
81+
updateBoardData() {
82+
this.parentBoards.updateBoard(this.getBoardData());
83+
}
84+
},
85+
mounted() {
86+
let boardData = this.getBoardData();
87+
88+
this.parentBoards = getClosestVueParent(this.$parent, 'md-boards');
89+
90+
if (!this.parentBoards) {
91+
throw new Error('You must wrap the md-board in a md-boards');
92+
}
93+
94+
this.mounted = true;
95+
this.parentBoards.updateBoard(boardData);
96+
97+
if (this.mdActive) {
98+
this.parentBoards.setActiveBoard(boardData);
99+
}
100+
},
101+
beforeDestroy() {
102+
this.parentBoards.unregisterBoard(this.getBoardData());
103+
}
104+
};
105+
</script>

0 commit comments

Comments
 (0)