Skip to content

Commit 8a86df4

Browse files
panstromekrstoenescu
panstromek
authored and
rstoenescu
committed
QToggle docs (quasarframework#2994)
* [wip] examples * array value example * fix custom values + dark background example * add option group example * list example * QToggle doc text + remove empty script tag * Update toggle.md
1 parent efb987d commit 8a86df4

File tree

11 files changed

+395
-70
lines changed

11 files changed

+395
-70
lines changed

‎docs/src/examples/QToggle/ArrayValue.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div class="q-pa-md q-gutter-sm">
3+
<q-toggle color="blue" label="Blue" v-model="selection" val="blue"/>
4+
<q-toggle color="yellow" label="Yellow" v-model="selection" val="yellow"/>
5+
<q-toggle color="green" label="Green" v-model="selection" val="green"/>
6+
<q-toggle color="red" label="Red" v-model="selection" val="red"/>
7+
<div>
8+
Model: {{selection}}
9+
</div>
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
data () {
16+
return {
17+
selection: ['yellow', 'red']
18+
}
19+
}
20+
}
21+
</script>

‎docs/src/examples/QToggle/CustomValues.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div class="q-pa-md q-gutter-sm">
3+
<q-toggle
4+
:label="`Model is ${blueModel} (default behaviour)`"
5+
v-model="blueModel"/>
6+
<br>
7+
<q-toggle
8+
:label="pinkModel"
9+
color="pink"
10+
false-value="Disagreed"
11+
true-value="Agreed"
12+
v-model="pinkModel"
13+
/>
14+
<br>
15+
<q-toggle
16+
:false-value="13"
17+
:label="`Model is number ${greenModel}`"
18+
:true-value="42"
19+
color="green"
20+
v-model="greenModel"
21+
/>
22+
<br>
23+
<q-toggle
24+
:false-value="true"
25+
:label="`Model is ${redModel} (flipped boolean)`"
26+
:true-value="false"
27+
color="red"
28+
v-model="redModel"
29+
/>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
data () {
36+
return {
37+
blueModel: true,
38+
pinkModel: 'Agreed',
39+
greenModel: 42,
40+
redModel: true
41+
}
42+
}
43+
}
44+
</script>

‎docs/src/examples/QToggle/DarkBackground.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-toggle
4+
color="blue"
5+
dark
6+
v-model="blue"/>
7+
8+
<q-toggle
9+
color="green"
10+
dark
11+
v-model="green"
12+
/>
13+
14+
<q-toggle
15+
color="yellow"
16+
dark
17+
v-model="yellow"
18+
/>
19+
20+
<q-toggle
21+
color="red"
22+
dark
23+
v-model="red"
24+
/>
25+
</div>
26+
</template>
27+
28+
<script>
29+
export default {
30+
data () {
31+
return {
32+
blue: false,
33+
green: true,
34+
yellow: true,
35+
red: false
36+
}
37+
}
38+
}
39+
</script>

‎docs/src/examples/QToggle/Disabled.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-toggle
4+
v-model="value"
5+
color="primary"
6+
disable
7+
/>
8+
<q-toggle
9+
v-model="value"
10+
color="green"
11+
disable
12+
/>
13+
<q-toggle
14+
v-model="value"
15+
color="yellow"
16+
disable
17+
/>
18+
<q-toggle
19+
v-model="value"
20+
color="red"
21+
disable
22+
/>
23+
</div>
24+
</template>
25+
26+
<script>
27+
export default {
28+
data () {
29+
return {
30+
value: true
31+
}
32+
}
33+
}
34+
</script>

‎docs/src/examples/QToggle/Icons.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div class="q-pa-md q-gutter-sm">
3+
<div>
4+
<q-toggle
5+
v-model="first"
6+
icon="alarm"
7+
/>
8+
<q-toggle
9+
v-model="second"
10+
color="pink"
11+
icon="mail"
12+
label="Same Icon for each state"
13+
/>
14+
</div>
15+
<div>
16+
<q-toggle
17+
v-model="third"
18+
checked-icon="check"
19+
color="green"
20+
unchecked-icon="clear"
21+
/>
22+
<q-toggle
23+
v-model="fourth"
24+
checked-icon="check"
25+
color="red"
26+
label="Different icon for each state"
27+
unchecked-icon="clear"
28+
/>
29+
</div>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
data () {
36+
return {
37+
first: true,
38+
second: true,
39+
third: false,
40+
fourth: true
41+
}
42+
}
43+
}
44+
</script>

‎docs/src/examples/QToggle/KeepColor.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-toggle
4+
v-model="value"
5+
color="primary"
6+
keep-color
7+
/>
8+
<q-toggle
9+
v-model="value"
10+
color="green"
11+
keep-color
12+
/>
13+
<q-toggle
14+
v-model="value"
15+
color="yellow"
16+
keep-color
17+
/>
18+
<q-toggle
19+
v-model="value"
20+
color="red"
21+
keep-color
22+
readonly
23+
/>
24+
</div>
25+
</template>
26+
27+
<script>
28+
29+
export default {
30+
data () {
31+
return {
32+
value: false
33+
}
34+
}
35+
}
36+
</script>

‎docs/src/examples/QToggle/Labels.vue‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<div class="q-pa-md q-gutter-lg">
3+
<q-toggle
4+
v-model="value"
5+
label="On Right"
6+
/>
7+
<q-toggle
8+
v-model="value"
9+
color="green"
10+
label="On Right"
11+
/>
12+
<q-toggle
13+
v-model="value"
14+
color="yellow"
15+
label="On Right"
16+
/>
17+
<q-toggle
18+
v-model="value"
19+
color="red"
20+
label="On Right"
21+
/>
22+
<br>
23+
<q-toggle
24+
v-model="value"
25+
label="On Left"
26+
left-label
27+
/>
28+
<q-toggle
29+
v-model="value"
30+
color="green"
31+
label="On Left"
32+
left-label
33+
/>
34+
<q-toggle
35+
v-model="value"
36+
color="yellow"
37+
label="On Left"
38+
left-label
39+
/>
40+
<q-toggle
41+
v-model="value"
42+
color="red"
43+
label="On Left"
44+
left-label
45+
/>
46+
</div>
47+
</template>
48+
49+
<script>
50+
export default {
51+
data () {
52+
return {
53+
value: true
54+
}
55+
}
56+
}
57+
</script>

‎docs/src/examples/QToggle/List.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-list bordered separator>
4+
<q-item tag="label">
5+
<q-item-section>
6+
<q-item-label>Battery too low</q-item-label>
7+
</q-item-section>
8+
<q-item-section avatar>
9+
<q-toggle color="blue" v-model="notifications" val="battery"/>
10+
</q-item-section>
11+
</q-item>
12+
<q-item multiline tag="label">
13+
<q-item-section>
14+
<q-item-label>Friend request</q-item-label>
15+
<q-item-label caption>Allow notification</q-item-label>
16+
</q-item-section>
17+
<q-item-section avatar>
18+
<q-toggle color="green" v-model="notifications" val="friend"/>
19+
</q-item-section>
20+
</q-item>
21+
<q-item multiline tag="label">
22+
<q-item-section>
23+
<q-item-label>Picture uploaded</q-item-label>
24+
<q-item-label caption>Allow notification when uploading images</q-item-label>
25+
</q-item-section>
26+
<q-item-section avatar>
27+
<q-toggle color="red" v-model="notifications" val="picture"/>
28+
</q-item-section>
29+
</q-item>
30+
</q-list>
31+
</div>
32+
</template>
33+
34+
<script>
35+
export default {
36+
data () {
37+
return {
38+
notifications: ['friend']
39+
}
40+
}
41+
}
42+
</script>

‎docs/src/examples/QToggle/OptionGroup.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-option-group
4+
:options="options"
5+
label="Notifications"
6+
type="toggle"
7+
v-model="group"
8+
/>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
data () {
15+
return {
16+
group: [],
17+
options: [
18+
{ label: 'Battery too low', value: 'bat' },
19+
{ label: 'Friend request', value: 'friend', color: 'green' },
20+
{ label: 'Picture uploaded', value: 'upload', color: 'red' }
21+
]
22+
}
23+
}
24+
}
25+
</script>

‎docs/src/examples/QToggle/Standard.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-toggle v-model="value" />
4+
<q-toggle
5+
v-model="value"
6+
color="green"
7+
/>
8+
<q-toggle
9+
v-model="value"
10+
color="yellow"
11+
/>
12+
<q-toggle
13+
v-model="value"
14+
color="red"
15+
/>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
data () {
22+
return {
23+
value: true
24+
}
25+
}
26+
}
27+
</script>

0 commit comments

Comments
 (0)