Skip to content
Permalink
Browse files

feat(QTabPanels, QCarousel): Add vertical swipeable, vertical navigat…

…ion arrows and left/right/top/bottom navigation

close #5412
  • Loading branch information
pdanpdan committed Jan 13, 2020
1 parent 49a84ad commit 413d755f8ea20912f03c824e70acb576dcfe9f6b
@@ -0,0 +1,35 @@
{
"rules": {
"extends-before-mixins": 2,
"extends-before-declarations": 2,
"placeholder-in-extend": 2,
"mixins-before-declarations": [
2,
{
"exclude": [
"breakpoint",
"mq"
]
}
],
"no-warn": 1,
"no-debug": 1,
"no-ids": 0,
"no-important": 0,
"hex-notation": 0,
"indentation": [
2,
{
"size": 2
}
],
"class-name-format": 0,
"no-color-literals": 0,
"empty-line-between-blocks": 0,
"single-line-per-selector": 1,
"force-element-nesting": 0,
"property-sort-order": 0,
"variable-for-property": 0,
"leading-zero": 0
}
}
@@ -0,0 +1,99 @@
<template>
<div class="q-pa-md">
<div class="q-gutter-md">
<q-carousel
v-model="slide"
transition-prev="scale"
transition-next="scale"
swipeable
swipeable-vertical
navigation
navigation-position="left"
animated
control-color="white"
padding
arrows
arrows-vertical
height="300px"
class="bg-primary text-white shadow-1 rounded-borders"
>
<q-carousel-slide name="style" class="column no-wrap flex-center">
<q-icon name="style" size="56px" />
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="tv" class="column no-wrap flex-center">
<q-icon name="live_tv" size="56px" />
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="layers" class="column no-wrap flex-center">
<q-icon name="layers" size="56px" />
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="map" class="column no-wrap flex-center">
<q-icon name="terrain" size="56px" />
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
</q-carousel>

<q-carousel
v-model="slide"
transition-prev="jump-down"
transition-next="jump-up"
swipeable
swipeable-vertical
animated
control-color="white"
navigation-icon="radio_button_unchecked"
navigation
padding
arrows
height="300px"
class="bg-purple text-white shadow-1 rounded-borders"
>
<q-carousel-slide name="style" class="column no-wrap flex-center">
<q-icon name="style" size="56px" />
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="tv" class="column no-wrap flex-center">
<q-icon name="live_tv" size="56px" />
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="layers" class="column no-wrap flex-center">
<q-icon name="layers" size="56px" />
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="map" class="column no-wrap flex-center">
<q-icon name="terrain" size="56px" />
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
</q-carousel>
</div>
</div>
</template>

<script>
export default {
data () {
return {
slide: 'style',
lorem: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque voluptatem totam, architecto cupiditate officia rerum, error dignissimos praesentium libero ab nemo.'
}
}
}
</script>
@@ -0,0 +1,37 @@
<template>
<div class="q-pa-md" style="max-width: 350px">
<q-tab-panels
v-model="panel"
animated
swipeable
swipeable-vertical
infinite
class="bg-purple text-white shadow-2 rounded-borders"
>
<q-tab-panel name="mails">
<div class="text-h6">Mails</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</q-tab-panel>

<q-tab-panel name="alarms">
<div class="text-h6">Alarms</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</q-tab-panel>

<q-tab-panel name="movies">
<div class="text-h6">Movies</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</q-tab-panel>
</q-tab-panels>
</div>
</template>

<script>
export default {
data () {
return {
panel: 'mails'
}
}
}
</script>
@@ -21,6 +21,8 @@
<q-tab-panels
v-model="tab"
animated
swipeable
swipeable-vertical
transition-prev="jump-up"
transition-next="jump-up"
>
@@ -24,6 +24,8 @@ In the example below there are just a few transitions demoed. For a complete lis

<doc-example title="Transitions, bottom navigation, arrows and auto padding" file="QCarousel/Transitions" />

<doc-example title="Vertical transitions, left navigation, arrows and auto padding" file="QCarousel/VerticalTransitions" />

::: tip
In the examples above, you can also swipe with your finger (or swiping with the mouse -- clicking and quickly dragging to left/right then releasing).
:::
@@ -61,6 +61,10 @@ In the example below, use your mouse to swipe through the panels or, if on a tou

<doc-example title="Swipeable and infinite" file="QTabPanels/Swipeable" />

### Vertical swipeable and infinite

<doc-example title="Vertical swipeable and infinite" file="QTabPanels/VerticalSwipeable" />

## QTabPanels API

<doc-api file="QTabPanels" />
@@ -4,32 +4,53 @@
Basic Carousel. No controls. Just swipe between slides (you can use
mouse to swipe too) to navigate left or right.
</div>
<div>
<q-toggle v-model="arrows" label="Show arrows" class="q-ml-sm" />
<div class="fixed-top full-width z-top row items-center justify-between bg-grey-6">
<q-btn label="fullscreen" color="purple" @click="$refs.carousel.toggleFullscreen()" />
<q-toggle v-model="vertical" label="Vertical swipe" class="q-ml-sm" />
<q-select v-model="navigationPosition" :options="navigationPositions" label="Navigation position" dense borderless style="min-width: 15em" />
<q-toggle v-model="fullscreen" label="Fullscreen" />
</div>
<q-btn label="fullscreen" class="fixed-top-left z-top" color="purple" @click="$refs.carousel.toggleFullscreen()" />
<q-toggle v-model="fullscreen" label="Fullscreen" class="fixed-top-right z-top" />

<q-toggle v-model="arrows" label="Show arrows" class="q-ml-sm" />
<q-responsive :ratio="16/9">
<q-carousel
ref="carousel"
transition-prev="slide-right"
transition-next="slide-left"
swipeable
animated
:swipeable-vertical="vertical"
transition-prev=""
transition-next=""
:fullscreen.sync="fullscreen"
v-model="slide"
control-color="primary"
navigation-icon="radio_button_unchecked"
navigation
navigation-icon="radio_button_unchecked"
:navigation-position="navigationPosition"
padding
:arrows="arrows"
:arrows-vertical="vertical"
class="shadow-1 rounded-borders"
>
<q-carousel-slide :name="0" class="column no-wrap flex-center">
<q-icon name="style" color="primary" size="56px" />
<div class="q-mt-md text-center">
{{ lorem }}
</div>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide :name="1" class="column no-wrap flex-center">
<q-icon name="live_tv" color="primary" size="56px" />
@@ -59,9 +80,11 @@
transition-prev="rotate"
transition-next="rotate"
swipeable
:swipeable-vertical="vertical"
animated
v-model="slide"
arrows
:arrows-vertical="vertical"
padding
height="200px"
class="bg-grey-9 text-white shadow-1 rounded-borders"
@@ -88,6 +111,7 @@
</div>
<q-carousel
arrows
:arrows-vertical="vertical"
animated
v-model="slide4"
height="400px"
@@ -129,14 +153,17 @@
</div>
<q-carousel
swipeable
:swipeable-vertical="vertical"
transition-prev=""
transition-next=""
animated
v-model="slide3"
arrows
:arrows-vertical="vertical"
:autoplay="autoplay"
navigation
:navigation-position="navigationPosition"
infinite
transition-prev="slide-right"
transition-next="slide-left"
>
<q-carousel-slide :name="0" img-src="https://cdn.quasar.dev/img/mountains.jpg" />
<q-carousel-slide :name="1" img-src="https://cdn.quasar.dev/img/parallax1.jpg" />
@@ -159,10 +186,13 @@
</div>
<q-carousel
swipeable
:swipeable-vertical="vertical"
animated
v-model="slide"
arrows
:arrows-vertical="vertical"
thumbnails
:navigation-position="navigationPosition"
infinite
:fullscreen.sync="full"
>
@@ -190,10 +220,12 @@
</div>
<q-carousel
swipeable
:swipeable-vertical="vertical"
animated
navigation
control-color="amber"
navigation-icon="favorite"
:navigation-position="navigationPosition"
control-color="amber"
v-model="slide2"
>
<q-carousel-slide :name="0" img-src="https://cdn.quasar.dev/img/mountains.jpg" />
@@ -227,6 +259,9 @@ export default {
slide4: 'first',
autoplay: true,
arrows: false,
vertical: false,
navigationPosition: 'bottom',
navigationPositions: ['top', 'bottom', 'left', 'right'],
lorem: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus, ratione eum minus fuga, quasi dicta facilis corporis magnam, suscipit at quo nostrum!',
colors: [
'primary',
@@ -238,6 +273,7 @@ export default {
],
modal: false
}),
methods: {
onFullscreen (v) {
console.log('fullscreen-toggle', v)
@@ -28,6 +28,8 @@ export default {
carousel: {
left: 'eva-arrow-ios-back-outline',
right: 'eva-arrow-ios-forward-outline',
up: 'eva-arrow-ios-upward-outline',
down: 'eva-arrow-ios-downward-outline',
navigationIcon: 'eva-radio-button-on',
thumbnails: 'eva-image-outline'
},
@@ -28,6 +28,8 @@ export default {
carousel: {
left: 'fal fa-chevron-left',
right: 'fal fa-chevron-right', // TODO
up: 'fal fa-chevron-up',
down: 'fal fa-chevron-down',
navigationIcon: 'fal fa-circle',
thumbnails: 'fal fa-th'
},
@@ -28,6 +28,8 @@ export default {
carousel: {
left: 'fas fa-chevron-left',
right: 'fas fa-chevron-right', // TODO
up: 'fas fa-chevron-up',
down: 'fas fa-chevron-down',
navigationIcon: 'fas fa-circle',
thumbnails: 'fas fa-th'
},
@@ -28,6 +28,8 @@ export default {
carousel: {
left: 'ion-ios-arrow-back',
right: 'ion-ios-arrow-forward',
up: 'ion-ios-arrow-up',
down: 'ion-ios-arrow-down',
navigationIcon: 'ion-square',
thumbnails: 'ion-grid'
},
@@ -28,6 +28,8 @@ export default {
carousel: {
left: 'o_chevron_left',
right: 'o_chevron_right',
up: 'o_keyboard_arrow_up',
down: 'o_keyboard_arrow_down',
navigationIcon: 'o_lens',
thumbnails: 'o_view_carousel'
},

0 comments on commit 413d755

Please sign in to comment.
You can’t perform that action at this time.