Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated top stepper example. #541

Merged
merged 6 commits into from
May 1, 2017
Merged

Updated top stepper example. #541

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1a86d37
Update PULL_REQUEST_TEMPLATE.md
smolinari Apr 25, 2017
06c192c
Update PULL_REQUEST_TEMPLATE.md
rstoenescu Apr 25, 2017
141c9f9
Merge branch 'dev' of https://github.com/quasarframework/quasar into dev
smolinari Apr 30, 2017
13a201b
Updated top stepper example. Corrected icon.
smolinari May 1, 2017
11fd1f5
Corrected spelling mistake.
smolinari May 1, 2017
539af81
Updated icon to remove testing junk and updated stepper example 1
smolinari May 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion dev/components/components/icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<template>
<div class="layout-padding">
<p class="caption">To fully test, go to /dev/index.html and uncomment the style tags.</p>
<div>
<q-icon :name="icon" class="gigi" style="font-size: 5rem;" @click="clicked" />
<span style="margin: 0 15px;">{{icon}}</span>
Expand Down Expand Up @@ -35,3 +34,8 @@ export default {
}
}
</script>

<style lang="stylus">
.big-btn
font-size: 5rem
</style>
128 changes: 105 additions & 23 deletions dev/components/components/stepper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,67 +3,106 @@
<div class="layout-padding">
<q-stepper v-model="step" ref="stepper1" :loading="loading">
<q-stepper-header :alternative-labels="alternativeLabels">
<q-step :step="1" icon="alarm" :editable="editable[1]">
<q-step :done="done[1]" :step="1" icon="alarm" :editable="editable[1]">
Step 1
<small v-show="step === 1">Let's get going!</small>
</q-step>

<q-step :step="2" :editable="editable[2]">
<q-step :done="done[2]" :step="2" icon="compare_arrows" :editable="editable[2]">
Step 2
<small>Almost there</small>
<small v-show="step === 2">One small step for man!</small>
</q-step>

<q-step :step="3" icon="bluetooth" error :editable="editable[3]">
<q-step :done="done[3]" :step="3" icon="accessibility" :error="option === 'opt2'" :editable="editable[3]">
Step 3
<small v-show="step === 3">One giant step for mankind!</small>
</q-step>

<q-step :step="4" icon="bluetooth" :editable="editable[4]">
<q-step :done="done[4]" :step="4" icon="bluetooth" :editable="editable[4]">
Step 4
<small v-show="step === 4">Almost there!</small>
</q-step>

<q-step :step="5" icon="wifi" :editable="editable[5]">
Step 5 Step 4 Step 4 Step 4 Step 4 Step 4
Step 5
<small v-show="step === 5">Well Done!</small>
</q-step>

</q-stepper-header>

<q-step-pane :step="1">
For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.

<p>
Hi ! This is the first step. Usually it is for giving instructions for the rest of the wizard.
Go ahead and press "Continue" to move to the next step. If you want to go back a step in the process, press "Back".
</p>
<div style="margin-top: 35px">
<q-btn class="primary" @click="next">Continue</q-btn>
<q-btn class="primary" @click="next">{{ buttonText }}</q-btn>
</div>
</q-step-pane>
<q-step-pane :step="2">
An ad group contains one or more ads which target a shared set of keywords.

<p>
Great! You made it a step further. Usually you'd have some sort of form for the user to add input here.
You would also probably have some logic, which would stop the user from continuing, should he or she not add the right input.
</p>
<label>
<q-toggle v-model="toggeledOn"></q-toggle>
Check to Continue
</label>
<div style="margin-top: 35px">
<q-btn class="primary" @click="next">Continue</q-btn>
<q-btn :disable="toggeled" :class="buttonClasses" @click="next">{{ buttonText }}</q-btn>
<q-btn class="primary clear" @click="$refs.stepper1.previous()">Back</q-btn>
</div>
</q-step-pane>
<q-step-pane :step="3">
Try out different ad text to see what brings in the most customers, and learn how to enhance your ads using features like ad extensions. If you run into any problems with your ads, find out how to tell if they're running and how to resolve approval issues.
<p>
Now were gaining momentum! Notice how the steps in the header are "clickable", once you get past that step.
Cool huh? Play with the selection below. See the icon change?
</p>

<div class="column group">
<label>
<q-radio v-model="option" val="opt1"></q-radio>
Pick this one!
</label>
<label>
<q-radio v-model="option" val="opt2"></q-radio>
Don't pick this one!
</label>
</div>
</br/>
<p>
Go ahead now with the "Continue" button. Or go back. It's nice to be able to go back too, isn't it?
</p>

<div style="margin-top: 35px">
<q-btn class="primary" @click="next">Continue</q-btn>
<q-btn :disable="buttonDisabled" :class="buttonClasses" @click="next">{{ buttonText }}</q-btn>
<q-btn class="primary clear" @click="$refs.stepper1.previous()">Back</q-btn>
</div>
</q-step-pane>

<q-step-pane :step="4">
Try out different ad text to see what brings in the most customers, and learn how to enhance your ads using features like ad extensions. If you run into any problems with your ads, find out how to tell if they're running and how to resolve approval issues.
<p>
Let's get some more input. Notice the "Continue" button is once again disabled. Go ahead and add your first name.
</p>
<p class="caption">First Name:</p>
<input v-model="firstName" placeholder="Add your first name here!">

<div style="margin-top: 35px">
<q-btn class="primary" @click="next">Continue</q-btn>
<q-btn :disable="buttonDisabled" :class="buttonClasses" @click="next">{{ buttonText }}</q-btn>
<q-btn class="primary clear" @click="$refs.stepper1.previous()">Back</q-btn>
</div>
</q-step-pane>

<q-step-pane :step="5">
Try out different ad text to see what brings in the most customers, and learn how to enhance your ads using features like ad extensions. If you run into any problems with your ads, find out how to tell if they're running and how to resolve approval issues.

<p>
All right {{ firstName }}! You've just enjoyed the coolness of Quasar's stepper component.
If you click "Finish", you'll be taken back to step one again and everything will be reset.
</p>
<p>
Enjoy Quasar and have fun!
</p>
<div style="margin-top: 35px">
<q-btn class="primary" @click="$refs.stepper1.goToStep(1)">Continue</q-btn>
<q-btn class="primary" @click="reset()">{{ buttonText }}</q-btn>
<q-btn class="primary clear" @click="$refs.stepper1.previous()">Back</q-btn>
</div>
</q-step-pane>
Expand All @@ -82,7 +121,7 @@
<small>Almost there</small>
</q-step>

<q-step :step="3" icon="bluetooth" error>
<q-step :step="3" icon="bluetooth">
Step 3
</q-step>

Expand All @@ -108,7 +147,7 @@
<q-stepper-navigation>
<q-btn slot="left" class="primary clear" :disabled="step < 2" @click="$refs.stepper2.previous()">Back</q-btn>
<q-btn class="primary clear">Cancel</q-btn>
<q-btn class="primary" @click="$refs.stepper2.next()">Continue</q-btn>
<q-btn class="primary" @click="$refs.stepper2.next()">{{ buttonText }}</q-btn>
</q-stepper-navigation>
</q-stepper>

Expand Down Expand Up @@ -185,28 +224,71 @@
</template>

<script>

export default {
data () {
return {
step: 1,
alternativeLabels: true,
lastStep: 5,
alternativeLabels: false,
loading: false,
editable: {1: true, 2: false, 3: false, 4: false, 5: false}
firstName: '',
toggeledOn: false,
editable: {1: true, 2: false, 3: false, 4: false, 5: false},
done: {1: false, 2: false, 3: false, 4: false, 5: false},
option: ''
}
},
computed: {
stepMessage () {
return `Step ${this.step}`
},
buttonText () {
return this.step !== this.lastStep
? 'Continue'
: 'Finish'
},
buttonClasses () {
if ((this.step === 2 && !this.toggeledOn) ||
(this.step === 3 && this.option === 'opt2') ||
(this.step === 4 && this.firstName === '')
) {
return 'primary disabled'
}
return 'primary'
},
buttonDisabled () {
if ((this.step === 3 && this.option === 'opt2') ||
(this.step === 4 && this.firstName === '')) {
return true
}
return false
},
toggeled () {
if (this.toggeledOn) {
this.editable = {1: true, 3: true}
return false
}
else if (this.step === 2) {
this.editable = {1: true, 3: false}
return true
}
}
},
methods: {
next () {
this.done[this.step] = true
this.editable[this.step] = true
this.$refs.stepper1.next()
},
reset () {
this.$refs.stepper1.reset()
this.$refs.stepper2.reset()
this.step = 1
this.firstName = ''
this.toggeledOn = false
this.editable = {1: false, 2: false, 3: false, 4: false, 5: false}
this.done = {1: false, 2: false, 3: false, 4: false, 5: false}
}
}
}
Expand Down