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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(QSlider/QRange): add slot for custom markers #7095 #11690

Closed
wants to merge 3 commits into from
Closed

feat(QSlider/QRange): add slot for custom markers #7095 #11690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7db76aa
feat(QSlider/QRange): add value-min and value-max restrictions #11456
pdanpdan Dec 15, 2021
e1b1844
feat(QSlider/QRange): changes to align with Qv2 naming
pdanpdan Dec 15, 2021
13f587c
feat(QSlider/QRange): add slot for custom markers #7095
pdanpdan Nov 30, 2021
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
115 changes: 115 additions & 0 deletions docs/src/examples/QRange/CustomMarkers.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<template>
<div class="q-px-md q-py-lg">
<div class="row items-center q-gutter-sm q-mb-lg">
<q-toggle v-model="vertical" dense label="Vertical" />
<q-toggle v-model="reverse" dense label="Reverse" />
<q-badge color="secondary">
Model: {{ model.min }} to {{ model.max }}
</q-badge>
</div>

<q-range
style="max-width: 350px"
:style="vertical === true ? 'height: 20em' : void 0"
v-model="model"
:min="0"
:max="20"
:vertical="vertical"
:reverse="reverse"
color="primary"
markers
snap
drag-range
>
<template v-slot:markers="{ min, max, value, reverse, vertical, styleFn }">
<div
class="text-grey-6"
:class="`test-marker test-marker--${vertical === true ? 'v' : 'h'}${reverse === true ? '-r' : ''}`"
:style="styleFn(min).style"
>{{ min }}</div>

<div
class="text-grey-6"
:class="`test-marker test-marker--${vertical === true ? 'v' : 'h'}${reverse === true ? '-r' : ''}`"
:style="styleFn(max).style"
>{{ max }}</div>

<q-icon
:class="`test-marker test-marker--${vertical === true ? 'v' : 'h'}${reverse === true ? '-r' : ''}`"
:style="styleFn(value.min).style"
size="sm"
color="primary"
:name="icons.start"
/>

<q-icon
:class="`test-marker test-marker--${vertical === true ? 'v' : 'h'}${reverse === true ? '-r' : ''}`"
:style="styleFn(value.max).style"
size="sm"
color="primary"
:name="icons.end"
/>
</template>
</q-range>
</div>
</template>

<script>
export default {
data () {
return {
vertical: false,
reverse: false,

model: {
min: 2,
max: 5
}
}
},

computed: {
icons () {
if (this.vertical === true) {
return this.reverse === true
? {
start: 'keyboard_double_arrow_up',
end: 'keyboard_double_arrow_down'
}
: {
start: 'keyboard_double_arrow_down',
end: 'keyboard_double_arrow_up'
}
}

return this.reverse === true
? {
start: 'keyboard_double_arrow_left',
end: 'keyboard_double_arrow_right'
}
: {
start: 'keyboard_double_arrow_right',
end: 'keyboard_double_arrow_left'
}
}
}
}
</script>

<style lang="sass" scoped>
.test-marker
position: absolute

&--h
top: 16px
transform: translateX(-50%)
&--h-r
top: 16px
transform: translateX(50%)
&--v
left: 16px
transform: translateY(-50%)
&--v-r
left: 16px
transform: translateY(50%)
</style>
23 changes: 23 additions & 0 deletions docs/src/examples/QRange/InnerMinMax.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<template>
<div class="q-pa-md">
<q-badge color="secondary">
Model: {{ model.min }} to {{ model.max }} (0 to 50 w/ selection 10 to 35 or 15 to 40)
</q-badge>

<q-range v-model="model" :min="0" :max="50" :inner-min="10" :inner-max="35" />
<q-range v-model="model" :min="0" :max="50" color="green" :inner-min="15" :inner-max="40" />
</div>
</template>

<script>
export default {
data () {
return {
model: {
min: 20,
max: 25
}
}
}
}
</script>
90 changes: 90 additions & 0 deletions docs/src/examples/QSlider/CustomMarkerIcons.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<template>
<div class="q-pa-lg">
<div class="row items-center q-gutter-sm q-mb-lg">
<q-toggle v-model="vertical" dense label="Vertical" />
<q-toggle v-model="reverse" dense label="Reverse" />
<q-badge class="q-py-sm q-px-md text-right" color="warning">{{ model }}</q-badge>
</div>

<q-slider
style="max-width: 350px"
:style="vertical === true ? 'height: 20em' : 'margin-bottom: 7em'"
v-model="model"
:min="0"
:max="5"
:step="0.5"
snap
:vertical="vertical"
:reverse="reverse"
color="warning"
>
<template v-slot:markers="{ editable, reverse, vertical, styleFn, setFn, stopEvents }">
<div
v-for="val in 6"
:key="val"
:class="`test-marker test-marker--${vertical === true ? 'v' : 'h'}${reverse === true ? '-r' : ''}`"
:style="styleFn(val - 1).style"
>
<q-icon
v-if="val === 1"
size="sm"
color="warning"
name="star_outline"
v-on="stopEvents"
@click="() => editable === true && setFn(0)"
/>

<template v-else>
<q-icon
v-for="i in val - 1"
:key="i"
size="sm"
color="warning"
name="star_rate"
v-on="stopEvents"
@click="() => editable === true && setFn(val - 1)"
/>
</template>
</div>
</template>
</q-slider>
</div>
</template>

<script>
export default {
data () {
return {
vertical: false,
reverse: false,

model: 3
}
}
}
</script>

<style lang="sass" scoped>
.test-marker
position: absolute
cursor: pointer

&--h
text-align: center
width: 3em
top: 16px
transform: translateX(-50%)
&--h-r
text-align: center
width: 3em
top: 16px
transform: translateX(50%)
&--v
white-space: nowrap
left: 16px
transform: translateY(-50%)
&--v-r
white-space: nowrap
left: 16px
transform: translateY(50%)
</style>
89 changes: 89 additions & 0 deletions docs/src/examples/QSlider/CustomMarkerLabels.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<template>
<div class="q-pa-lg">
<div class="row items-center q-gutter-sm q-mb-lg">
<q-toggle v-model="vertical" dense label="Vertical" />
<q-toggle v-model="reverse" dense label="Reverse" />
<q-badge class="q-py-sm q-px-md text-right" color="deep-orange">{{ model }}</q-badge>
</div>

<q-slider
style="max-width: 350px"
:style="vertical === true ? 'height: 300px; margin-left: 50px' : void 0"
v-model="model"
:min="0"
:max="100"
:vertical="vertical"
:reverse="reverse"
color="deep-orange"
label-always
:markers="10"
>
<template v-slot:markers="{ min, max, editable, reverse, vertical, styleFn, setFn, stopEvents }">
<div
v-for="val in 9"
:key="val"
class="q-px-sm q-py-xs"
:class="`text-deep-orange-${2 + Math.ceil(val / 2) } test-marker test-marker--${vertical === true ? 'v' : 'h'}${reverse === true ? '-r' : ''}`"
:style="styleFn(10 * val).style"
v-on="stopEvents"
@click="() => editable === true && setFn(10 * val)"
>{{ val }}</div>

<q-icon
v-for="val in [min, max]"
:key="val"
:class="`test-marker test-marker--${vertical === true ? 'v' : 'h'}${reverse === true ? '-r' : ''}`"
:style="styleFn(val).style"
size="sm"
:color="val === min ? 'deep-orange-2' : 'deep-orange-8'"
:name="val === min ? 'volume_off' : 'volume_up'"
v-on="stopEvents"
@click="() => editable === true && setFn(val)"
/>
</template>
</q-slider>
</div>
</template>

<script>
export default {
data () {
return {
vertical: false,
reverse: false,

model: 10
}
}
}
</script>

<style lang="sass" scoped>
.test-marker
position: absolute
cursor: pointer

&--h
top: -24px
transform: translate(-50%, -50%)
&--h-r
top: -24px
transform: translate(50%, -50%)
&--v
left: -32px
transform: translate(-50%, -50%)
&--v-r
left: -32px
transform: translate(-50%, 50%)

.q-slider--v::v-deep
.q-slider__pin--v
left: auto
right: 20px
transform: translateX(-5px) !important

.q-slider__arrow--v
left: auto
right: 15px
transform: rotate(180deg) translateX(5px) !important
</style>
Loading