Skip to content

Commit 652d7b2

Browse files
rstoenescurstoenescu
committed
feat(docs): QInput page [WIP]
1 parent cdfb643 commit 652d7b2

File tree

15 files changed

+624
-14
lines changed

15 files changed

+624
-14
lines changed

‎docs/src/examples/QInput/Autogrow.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div class="q-pa-md" style="max-width: 300px">
3+
<q-input
4+
v-model="text"
5+
filled
6+
autogrow
7+
/>
8+
</div>
9+
</template>
10+
11+
<script>
12+
export default {
13+
data () {
14+
return {
15+
text: ''
16+
}
17+
}
18+
}
19+
</script>

‎docs/src/examples/QInput/Basic.vue‎

Whitespace-only changes.

‎docs/src/examples/QInput/Borderless.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-md column" style="max-width: 300px">
4+
<q-toolbar class="bg-primary text-white rounded-borders">
5+
<q-btn round dense flat icon="menu" />
6+
<q-avatar class="q-ml-xs">
7+
<img src="https://cdn.quasar-framework.org/img/quasar-logo.png">
8+
</q-avatar>
9+
10+
<q-input dark class="col" borderless v-model="text" input-class="text-right">
11+
<q-icon slot="append" v-if="text === ''" color="white" name="search" />
12+
<q-icon slot="append" v-else color="white" name="clear" class="cursor-pointer" @click="text = ''" />
13+
</q-input>
14+
</q-toolbar>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
data () {
22+
return {
23+
text: ''
24+
}
25+
}
26+
}
27+
</script>

‎docs/src/examples/QInput/Dark.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<div class="q-pa-md bg-grey-10 text-white">
3+
<div class="q-gutter-md column" style="max-width: 300px">
4+
<q-input dark v-model="text">
5+
<q-icon slot="prepend" name="event" />
6+
</q-input>
7+
8+
<q-input dark filled v-model="text">
9+
<q-icon slot="prepend" name="event" />
10+
</q-input>
11+
12+
<q-input dark outlined v-model="text">
13+
<q-avatar slot="append">
14+
<img src="https://cdn.quasar-framework.org/img/quasar-logo.png">
15+
</q-avatar>
16+
</q-input>
17+
18+
<q-input dark standout bottom-slots v-model="text" label="Label" counter>
19+
<q-icon slot="prepend" name="place" />
20+
<q-icon slot="append" name="close" @click="text = ''" class="cursor-pointer" />
21+
22+
<div slot="hint">Field hint</div>
23+
</q-input>
24+
25+
<q-input dark borderless v-model="text">
26+
<q-icon slot="append" name="search" />
27+
</q-input>
28+
</div>
29+
</div>
30+
</template>
31+
32+
<script>
33+
export default {
34+
data () {
35+
return {
36+
text: ''
37+
}
38+
}
39+
}
40+
</script>

‎docs/src/examples/QInput/Debouncing.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" style="max-width: 350px">
3+
<div class="q-gutter-md">
4+
<div>
5+
<q-badge color="teal">Model: "{{ search }}"</q-badge>
6+
</div>
7+
8+
<q-input
9+
v-model="search"
10+
debounce="500"
11+
filled
12+
placeholder="Search"
13+
hint="Debouncing 500ms"
14+
>
15+
<q-icon slot="append" name="search" />
16+
</q-input>
17+
18+
<q-input
19+
v-model="search"
20+
debounce="1000"
21+
filled
22+
placeholder="Search"
23+
hint="Debouncing 1000ms"
24+
>
25+
<q-icon slot="append" name="search" />
26+
</q-input>
27+
</div>
28+
</div>
29+
</template>
30+
31+
<script>
32+
export default {
33+
data () {
34+
return {
35+
search: ''
36+
}
37+
}
38+
}
39+
</script>

‎docs/src/examples/QInput/DesignFilled.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md column" style="max-width: 300px">
4+
<q-toggle v-model="dense" label="Dense QInput" :dense="dense" />
5+
6+
<q-input filled v-model="text" :dense="dense" />
7+
8+
<q-input filled v-model="text" label="Label (stacked)" stack-label :dense="dense" />
9+
10+
<q-input filled v-model="text" label="Label" :dense="dense" />
11+
12+
<q-input filled v-model="ph" label="Label" placeholder="Placeholder" hint="With placeholder" :dense="dense" />
13+
14+
<q-input filled v-model="ph" placeholder="Placeholder" hint="With placeholder" :dense="dense" />
15+
16+
<q-input filled v-model="text" :dense="dense">
17+
<q-icon slot="prepend" name="event" />
18+
</q-input>
19+
20+
<q-input filled v-model="text" :dense="dense">
21+
<q-avatar slot="append">
22+
<img src="https://cdn.quasar-framework.org/img/quasar-logo.png">
23+
</q-avatar>
24+
</q-input>
25+
26+
<q-input filled bottom-slots v-model="text" label="Label" counter :dense="dense">
27+
<q-icon slot="prepend" name="place" />
28+
<q-icon slot="append" name="close" @click="text = ''" class="cursor-pointer" />
29+
30+
<div slot="hint">Field hint</div>
31+
</q-input>
32+
33+
<q-input filled bottom-slots v-model="text" label="Label" counter maxlength="12" :dense="dense">
34+
<q-icon slot="before" name="flight_takeoff" />
35+
36+
<q-icon v-if="text !== ''" slot="append" name="close" @click="text = ''" class="cursor-pointer" />
37+
<q-icon slot="append" name="search" />
38+
39+
<div slot="hint">Field hint</div>
40+
</q-input>
41+
42+
<q-input filled bottom-slots v-model="text" label="Label" counter maxlength="12" :dense="dense">
43+
<q-avatar slot="before">
44+
<img src="https://cdn.quasar-framework.org/img/avatar5.jpg">
45+
</q-avatar>
46+
47+
<q-icon v-if="text !== ''" slot="append" name="close" @click="text = ''" class="cursor-pointer" />
48+
<q-icon slot="append" name="schedule" />
49+
50+
<div slot="hint">Field hint</div>
51+
52+
<q-btn slot="after" round dense flat icon="send" />
53+
</q-input>
54+
55+
<q-input filled bottom-slots v-model="text" label="Label" counter maxlength="12" :dense="dense">
56+
<q-icon slot="before" name="event" />
57+
58+
<div slot="hint">Field hint</div>
59+
60+
<q-btn slot="append" round dense flat icon="add" />
61+
</q-input>
62+
</div>
63+
</div>
64+
</template>
65+
66+
<script>
67+
export default {
68+
data () {
69+
return {
70+
text: '',
71+
ph: '',
72+
73+
dense: false
74+
}
75+
}
76+
}
77+
</script>

‎docs/src/examples/QInput/DesignOutlined.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md column" style="max-width: 300px">
4+
<q-toggle v-model="dense" label="Dense QInput" :dense="dense" />
5+
6+
<q-input outlined v-model="text" :dense="dense" />
7+
8+
<q-input outlined v-model="text" label="Label (stacked)" stack-label :dense="dense" />
9+
10+
<q-input outlined v-model="text" label="Label" :dense="dense" />
11+
12+
<q-input outlined v-model="ph" label="Label" placeholder="Placeholder" hint="With placeholder" :dense="dense" />
13+
14+
<q-input outlined v-model="ph" placeholder="Placeholder" hint="With placeholder" :dense="dense" />
15+
16+
<q-input outlined v-model="text" :dense="dense">
17+
<q-icon slot="prepend" name="event" />
18+
</q-input>
19+
20+
<q-input outlined v-model="text" :dense="dense">
21+
<q-avatar slot="append">
22+
<img src="https://cdn.quasar-framework.org/img/quasar-logo.png">
23+
</q-avatar>
24+
</q-input>
25+
26+
<q-input outlined bottom-slots v-model="text" label="Label" counter :dense="dense">
27+
<q-icon slot="prepend" name="place" />
28+
<q-icon slot="append" name="close" @click="text = ''" class="cursor-pointer" />
29+
30+
<div slot="hint">Field hint</div>
31+
</q-input>
32+
33+
<q-input outlined bottom-slots v-model="text" label="Label" counter maxlength="12" :dense="dense">
34+
<q-icon slot="before" name="flight_takeoff" />
35+
36+
<q-icon v-if="text !== ''" slot="append" name="close" @click="text = ''" class="cursor-pointer" />
37+
<q-icon slot="append" name="search" />
38+
39+
<div slot="hint">Field hint</div>
40+
</q-input>
41+
42+
<q-input outlined bottom-slots v-model="text" label="Label" counter maxlength="12" :dense="dense">
43+
<q-avatar slot="before">
44+
<img src="https://cdn.quasar-framework.org/img/avatar5.jpg">
45+
</q-avatar>
46+
47+
<q-icon v-if="text !== ''" slot="append" name="close" @click="text = ''" class="cursor-pointer" />
48+
<q-icon slot="append" name="schedule" />
49+
50+
<div slot="hint">Field hint</div>
51+
52+
<q-btn slot="after" round dense flat icon="send" />
53+
</q-input>
54+
55+
<q-input outlined bottom-slots v-model="text" label="Label" counter maxlength="12" :dense="dense">
56+
<q-icon slot="before" name="event" />
57+
58+
<div slot="hint">Field hint</div>
59+
60+
<q-btn slot="append" round dense flat icon="add" />
61+
</q-input>
62+
</div>
63+
</div>
64+
</template>
65+
66+
<script>
67+
export default {
68+
data () {
69+
return {
70+
text: '',
71+
ph: '',
72+
73+
dense: false
74+
}
75+
}
76+
}
77+
</script>

‎docs/src/examples/QInput/DesignStandard.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md column" style="max-width: 300px">
4+
<q-toggle v-model="dense" label="Dense QInput" :dense="dense" />
5+
6+
<q-input v-model="text" :dense="dense" />
7+
8+
<q-input v-model="text" label="Label (stacked)" stack-label :dense="dense" />
9+
10+
<q-input v-model="text" label="Label" :dense="dense" />
11+
12+
<q-input v-model="ph" label="Label" placeholder="Placeholder" hint="With placeholder" :dense="dense" />
13+
14+
<q-input v-model="ph" placeholder="Placeholder" hint="With placeholder" :dense="dense" />
15+
16+
<q-input v-model="text" :dense="dense">
17+
<q-icon slot="prepend" name="event" />
18+
</q-input>
19+
20+
<q-input v-model="text" :dense="dense">
21+
<q-avatar slot="append">
22+
<img src="https://cdn.quasar-framework.org/img/quasar-logo.png">
23+
</q-avatar>
24+
</q-input>
25+
26+
<q-input bottom-slots v-model="text" label="Label" counter :dense="dense">
27+
<q-icon slot="prepend" name="place" />
28+
<q-icon slot="append" name="close" @click="text = ''" class="cursor-pointer" />
29+
30+
<div slot="hint">Field hint</div>
31+
</q-input>
32+
33+
<q-input bottom-slots v-model="text" label="Label" counter maxlength="12" :dense="dense">
34+
<q-icon slot="before" name="flight_takeoff" />
35+
36+
<q-icon v-if="text !== ''" slot="append" name="close" @click="text = ''" class="cursor-pointer" />
37+
<q-icon slot="append" name="search" />
38+
39+
<div slot="hint">Field hint</div>
40+
</q-input>
41+
42+
<q-input bottom-slots v-model="text" label="Label" counter maxlength="12" :dense="dense">
43+
<q-avatar slot="before">
44+
<img src="https://cdn.quasar-framework.org/img/avatar5.jpg">
45+
</q-avatar>
46+
47+
<q-icon v-if="text !== ''" slot="append" name="close" @click="text = ''" class="cursor-pointer" />
48+
<q-icon slot="append" name="schedule" />
49+
50+
<div slot="hint">Field hint</div>
51+
52+
<q-btn slot="after" round dense flat icon="send" />
53+
</q-input>
54+
55+
<q-input bottom-slots v-model="text" label="Label" counter maxlength="12" :dense="dense">
56+
<q-icon slot="before" name="event" />
57+
58+
<div slot="hint">Field hint</div>
59+
60+
<q-btn slot="append" round dense flat icon="add" />
61+
</q-input>
62+
</div>
63+
</div>
64+
</template>
65+
66+
<script>
67+
export default {
68+
data () {
69+
return {
70+
text: '',
71+
ph: '',
72+
73+
dense: false
74+
}
75+
}
76+
}
77+
</script>

0 commit comments

Comments
 (0)