Skip to content

Commit a77c814

Browse files
hawkeye64rstoenescu
hawkeye64
authored and
rstoenescu
committed
feat(docs): QCheckbox page (quasarframework#2980)
* feat(docs): QCheckbox page * feat(docs): Minor improvements to QRadio page * Update checkbox.md
1 parent 29294d2 commit a77c814

File tree

11 files changed

+276
-65
lines changed

11 files changed

+276
-65
lines changed

‎docs/src/examples/QCheckbox/ArrayAsModel.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-sm">
4+
<q-checkbox v-model="selection" val="teal" label="Teal" color="teal"/>
5+
<q-checkbox v-model="selection" val="orange" label="Orange" color="orange"/>
6+
<q-checkbox v-model="selection" val="red" label="Red" color="red"/>
7+
<q-checkbox v-model="selection" val="cyan" label="Cyan" color="cyan"/>
8+
</div>
9+
10+
<div class="q-px-sm">
11+
The model data: <strong>{{ selection }}</strong>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
export default {
18+
data () {
19+
return {
20+
selection: ['teal', 'red']
21+
}
22+
}
23+
}
24+
</script>

‎docs/src/examples/QCheckbox/Coloring.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-sm">
4+
<q-checkbox v-model="teal" label="Teal" color="teal"/>
5+
<q-checkbox v-model="orange" label="Orange" color="orange"/>
6+
<q-checkbox v-model="red" label="Red" color="red"/>
7+
<q-checkbox v-model="cyan" label="Cyan" color="cyan"/>
8+
</div>
9+
<div class="q-gutter-sm">
10+
<q-checkbox keep-color v-model="teal" label="Teal" color="teal"/>
11+
<q-checkbox keep-color v-model="orange" label="Orange" color="orange"/>
12+
<q-checkbox keep-color v-model="red" label="Red" color="red"/>
13+
<q-checkbox keep-color v-model="cyan" label="Cyan" color="cyan"/>
14+
</div>
15+
</div>
16+
</template>
17+
18+
<script>
19+
export default {
20+
data () {
21+
return {
22+
teal: true,
23+
orange: false,
24+
red: false,
25+
cyan: true
26+
}
27+
}
28+
}
29+
</script>

‎docs/src/examples/QCheckbox/CustomModel.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+
<div class="q-gutter-sm">
4+
<q-checkbox
5+
v-model="customModel"
6+
color="secondary"
7+
label="Do you agree with the terms & conditions?"
8+
true-value="yes"
9+
false-value="no"
10+
/>
11+
</div>
12+
13+
<div class="q-px-sm">
14+
The model data: <strong>'{{ customModel }}'</strong>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
data () {
22+
return {
23+
customModel: 'no'
24+
}
25+
}
26+
}
27+
</script>

‎docs/src/examples/QCheckbox/Dense.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-sm">
4+
<q-checkbox dense v-model="teal" label="Teal" color="teal"/>
5+
<q-checkbox dense v-model="orange" label="Orange" color="orange"/>
6+
<q-checkbox dense v-model="red" label="Red" color="red"/>
7+
<q-checkbox dense v-model="cyan" label="Cyan" color="cyan"/>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
data () {
15+
return {
16+
teal: true,
17+
orange: false,
18+
red: true,
19+
cyan: false
20+
}
21+
}
22+
}
23+
</script>

‎docs/src/examples/QCheckbox/InaList.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-sm">
4+
<q-list link>
5+
<!--
6+
Rendering a <label> tag (notice tag="label")
7+
so QCheckboxes will respond to clicks on QItems to
8+
change Toggle state.
9+
-->
10+
11+
<q-item tag="label">
12+
<q-item-section side>
13+
<q-checkbox v-model="color" val="teal" color="teal" ></q-checkbox>
14+
</q-item-section>
15+
<q-item-section>
16+
<q-item-label>Teal</q-item-label>
17+
</q-item-section>
18+
</q-item>
19+
20+
<q-item tag="label">
21+
<q-item-section side>
22+
<q-checkbox v-model="color" val="orange" color="orange" ></q-checkbox>
23+
</q-item-section>
24+
<q-item-section>
25+
<q-item-label>Orange</q-item-label>
26+
<q-item-label caption>With description </q-item-label>
27+
</q-item-section>
28+
</q-item>
29+
30+
<q-item tag="label">
31+
<q-item-section side top>
32+
<q-checkbox v-model="color" val="cyan" color="cyan" ></q-checkbox>
33+
</q-item-section>
34+
<q-item-section>
35+
<q-item-label>Cyan</q-item-label>
36+
<q-item-label caption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
37+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
38+
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
39+
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
40+
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
41+
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</q-item-label>
42+
</q-item-section>
43+
</q-item>
44+
</q-list>
45+
</div>
46+
47+
<div class="q-px-sm">
48+
Your selection is: <strong>{{ color }}</strong>
49+
</div>
50+
</div>
51+
</template>
52+
53+
<script>
54+
export default {
55+
data () {
56+
return {
57+
color: ['cyan']
58+
}
59+
}
60+
}
61+
</script>

‎docs/src/examples/QCheckbox/IndeterminateState.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">
3+
<div class="q-gutter-sm">
4+
<q-checkbox toggle-indeterminate indeterminate-value="maybe" v-model="theModel" label="Did you eat lunch today?" />
5+
</div>
6+
7+
<div class="q-px-sm">
8+
The model data: <strong>'{{ theModel }}'</strong>
9+
</div>
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
data () {
16+
return {
17+
theModel: false
18+
}
19+
}
20+
}
21+
</script>

‎docs/src/examples/QCheckbox/Label.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-sm">
4+
<q-checkbox v-model="teal" label="Teal" />
5+
</div>
6+
<div class="q-gutter-sm">
7+
<q-checkbox left-label v-model="orange" label="Orange" />
8+
</div>
9+
10+
<div class="q-px-sm">
11+
</div>
12+
</div>
13+
</template>
14+
15+
<script>
16+
export default {
17+
data () {
18+
return {
19+
teal: true,
20+
orange: false
21+
}
22+
}
23+
}
24+
</script>

‎docs/src/examples/QCheckbox/OnDarkBackground.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-sm">
4+
<q-checkbox dark v-model="teal" label="Teal" color="teal"/>
5+
<q-checkbox dark v-model="orange" label="Orange" color="orange"/>
6+
<q-checkbox dark v-model="red" label="Red" color="red"/>
7+
<q-checkbox dark v-model="cyan" label="Cyan" color="cyan"/>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
data () {
15+
return {
16+
teal: true,
17+
orange: false,
18+
red: true,
19+
cyan: false
20+
}
21+
}
22+
}
23+
</script>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-sm">
4+
<q-checkbox v-model="val" />
5+
</div>
6+
7+
<div class="q-px-sm">
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
data () {
15+
return {
16+
val: true
17+
}
18+
}
19+
}
20+
</script>

‎docs/src/pages/vue-components/checkbox.md‎

Lines changed: 22 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,42 @@
11
---
2-
title: Docs
2+
title: Checkbox
33
---
44

5-
[Internal Link](/docs), [External Link](https://vuejs.org)
5+
The Quasar Checkbox component is another basic element for user input. You can use this to supply a way for the user to toggle an option.
66

7-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non laoreet eros. `token` Morbi non ipsum ac purus dignissim rutrum. Nulla nec ante congue, rutrum tortor facilisis, aliquet ligula. Fusce vitae odio elit. `/quasar.conf.js`
7+
::: tip
8+
Please also refer to the [QOptionGroup](/vue-components/option-group) on other possibilities for creating groups of Checkboxes.
9+
:::
810

9-
## Heading 2
10-
### Heading 3
11-
#### Heading 4
12-
##### Heading 5
13-
###### Heading 6
1411

15-
```
16-
const m = 'lala'
17-
```
12+
## Installation
13+
<doc-installation components="QCheckbox" />
1814

19-
```html
20-
<div>
21-
<q-btn @click="doSomething">Do something</q-btn>
22-
<q-icon name="alarm" />
23-
</div>
24-
```
15+
## Usage
16+
<doc-example title="Standard" file="QCheckbox/Standard" />
2517

26-
```vue
27-
<template>
28-
<!-- you define your Vue template here -->
29-
</template>
18+
In the example below, we are using the `label` property to assign text to the checkbox. In the second row in the example below, the property `left-label` is being used to display the text on the left-side of the checkbox.
3019

31-
<script>
32-
// This is where your Javascript goes
33-
// to define your Vue component, which
34-
// can be a Layout, a Page or your own
35-
// component used throughout the app.
20+
<doc-example title="Label" file="QCheckbox/Label" />
3621

37-
export default {
38-
//
39-
}
40-
</script>
22+
In the example below, we are using the `color` property to assign color to the checkbox. In the second row in the example below, the property `keep-color` is being used to retain the passed in color when the checkbox is not in a toggled state.
4123

42-
<style>
43-
/* This is where your CSS goes */
44-
</style>
45-
```
24+
<doc-example title="Coloring" file="QCheckbox/Coloring" />
4625

47-
| Table Example | Type | Description |
48-
| --- | --- | --- |
49-
| infinite | Boolean | Infinite slides scrolling |
50-
| size | String | Thickness of loading bar. |
26+
<doc-example title="Dense" file="QCheckbox/Dense" />
5127

52-
> Something...
28+
<doc-example title="On Dark Background" file="QCheckbox/OnDarkBackground" dark />
5329

54-
::: tip
55-
Some tip
56-
:::
30+
In the example below, the checkbox is using the property `toggle-indeterminate`. When used, you can optionally set the property `indeterminate-value`, otherwise the indeterminate value will be `null`.
31+
<doc-example title="Indeterminate State" file="QCheckbox/IndeterminateState" />
5732

58-
::: warning
59-
Some tip
60-
:::
33+
<doc-example title="Array as Model" file="QCheckbox/ArrayAsModel" />
6134

62-
::: danger
63-
Some tip
64-
:::
65-
66-
::: warning CUSTOM TITLE
67-
Some tip
68-
:::
35+
<doc-example title="Custom Model Values" file="QCheckbox/CustomModel" />
6936

70-
* Something
71-
* something
72-
* else
73-
* Back
74-
* wee
37+
> In the example below, we are rendering a `<label>` tag (notice `tag="label"`) so the QCheckbox will respond to clicks on QItems to change toggle state.
7538
76-
## Installation
77-
<doc-installation components="QBtn" :plugins="['Meta', 'Cookies']" directives="Ripple" :config="{ notify: 'Notify' }" />
78-
79-
## Usage
80-
<doc-example title="Standard" file="QBtn/Standard" />
39+
<doc-example title="In a List" file="QCheckbox/InaList" />
8140

8241
## API
83-
<doc-api file="QTh" />
42+
<doc-api file="QCheckbox" />

0 commit comments

Comments
 (0)