Skip to content

Commit e33d2ca

Browse files
rstoenescurstoenescu
committed
feat(ui): New component -> QResponsive
1 parent ff6f9f9 commit e33d2ca

File tree

24 files changed

+584
-46
lines changed

24 files changed

+584
-46
lines changed

‎docs/src/assets/menu.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -932,6 +932,11 @@ const components = [
932932
badge: 'update',
933933
path: 'rating'
934934
},
935+
{
936+
name: 'Responsive',
937+
badge: 'new',
938+
path: 'responsive'
939+
},
935940
{
936941
name: 'Scroll Area',
937942
path: 'scroll-area'

‎docs/src/examples/QCarousel/Controls.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
<q-carousel-control
1818
position="top-right"
1919
:offset="[18, 18]"
20-
class="text-white"
21-
style="background: rgba(0, 0, 0, .3); padding: 4px 8px 4px 0; border-radius: 4px"
20+
class="text-white rounded-borders"
21+
style="background: rgba(0, 0, 0, .3); padding: 4px 8px;"
2222
>
2323
<q-toggle dense dark color="orange" v-model="autoplay" label="Auto Play" />
2424
</q-carousel-control>

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md" style="max-width: 300px">
4+
<q-responsive :ratio="16/9">
5+
<div class="rounded-borders bg-primary text-white flex flex-center">
6+
Ratio 16:9
7+
</div>
8+
</q-responsive>
9+
10+
<q-responsive :ratio="1">
11+
<div class="rounded-borders bg-primary text-white flex flex-center">
12+
Ratio 1:1
13+
</div>
14+
</q-responsive>
15+
</div>
16+
</div>
17+
</template>

‎docs/src/examples/QResponsive/Card.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="row items-start q-gutter-md">
4+
<q-responsive :ratio="16/9" class="col">
5+
<q-card class="column">
6+
<q-img class="col" src="https://cdn.quasar.dev/img/parallax2.jpg" />
7+
8+
<q-card-section>
9+
<div>Ratio 16:9</div>
10+
</q-card-section>
11+
</q-card>
12+
</q-responsive>
13+
14+
<q-responsive :ratio="1" class="col">
15+
<q-card class="column">
16+
<q-img class="col" src="https://cdn.quasar.dev/img/parallax1.jpg" />
17+
18+
<q-card-section>
19+
<div>Ratio 1:1</div>
20+
</q-card-section>
21+
</q-card>
22+
</q-responsive>
23+
</div>
24+
</div>
25+
</template>
26+
27+
<script>
28+
export default {
29+
data () {
30+
return {
31+
slide: 1
32+
}
33+
}
34+
}
35+
</script>

‎docs/src/examples/QResponsive/CardSection.vue‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="row items-start q-gutter-md">
4+
<q-card flat bordered class="col">
5+
<q-item>
6+
<q-item-section avatar>
7+
<q-avatar>
8+
<img src="https://cdn.quasar.dev/img/boy-avatar.png">
9+
</q-avatar>
10+
</q-item-section>
11+
12+
<q-item-section>
13+
<q-item-label>Title</q-item-label>
14+
<q-item-label caption>
15+
Subhead
16+
</q-item-label>
17+
</q-item-section>
18+
</q-item>
19+
20+
<q-separator />
21+
22+
<q-responsive :ratio="16/9">
23+
<!-- notice "border-radius-inherit" below; it's important when in a QCard -->
24+
<q-card-section class="border-radius-inherit flex flex-center bg-grey-1">
25+
<div>QCardSection with ratio 16:9</div>
26+
</q-card-section>
27+
</q-responsive>
28+
</q-card>
29+
30+
<q-card flat bordered class="col">
31+
<q-item>
32+
<q-item-section avatar>
33+
<q-avatar>
34+
<img src="https://cdn.quasar.dev/img/boy-avatar.png">
35+
</q-avatar>
36+
</q-item-section>
37+
38+
<q-item-section>
39+
<q-item-label>Title</q-item-label>
40+
<q-item-label caption>
41+
Subhead
42+
</q-item-label>
43+
</q-item-section>
44+
</q-item>
45+
46+
<q-separator />
47+
48+
<q-responsive :ratio="1">
49+
<!-- notice "border-radius-inherit" below; it's important when in a QCard -->
50+
<q-card-section class="border-radius-inherit flex flex-center bg-grey-1">
51+
<div>QCardSection with ratio 1:1</div>
52+
</q-card-section>
53+
</q-responsive>
54+
</q-card>
55+
</div>
56+
</div>
57+
</template>
58+
59+
<script>
60+
export default {
61+
data () {
62+
return {
63+
slide: 1
64+
}
65+
}
66+
}
67+
</script>

‎docs/src/examples/QResponsive/Carousel.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-responsive :ratio="16/9" style="width: 500px; max-width: 100%;">
4+
<q-carousel
5+
swipeable
6+
animated
7+
arrows
8+
v-model="slide"
9+
infinite
10+
>
11+
<q-carousel-slide :name="1" img-src="https://cdn.quasar.dev/img/mountains.jpg" />
12+
<q-carousel-slide :name="2" img-src="https://cdn.quasar.dev/img/parallax1.jpg" />
13+
<q-carousel-slide :name="3" img-src="https://cdn.quasar.dev/img/parallax2.jpg" />
14+
<q-carousel-slide :name="4" img-src="https://cdn.quasar.dev/img/quasar.jpg" />
15+
16+
<template v-slot:control>
17+
<q-carousel-control
18+
position="bottom"
19+
:offset="[16, 8]"
20+
class="text-white text-center rounded-borders"
21+
style="background: rgba(255, 255, 255, .2); padding: 4px 8px;"
22+
>
23+
Ratio 16:9
24+
</q-carousel-control>
25+
</template>
26+
</q-carousel>
27+
</q-responsive>
28+
</div>
29+
</template>
30+
31+
<script>
32+
export default {
33+
data () {
34+
return {
35+
slide: 1
36+
}
37+
}
38+
}
39+
</script>

‎docs/src/examples/QResponsive/FlexRow.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="row items-start q-gutter-md">
4+
<q-responsive :ratio="16/9" class="col">
5+
<div class="rounded-borders bg-primary text-white flex flex-center">
6+
Ratio 16:9
7+
</div>
8+
</q-responsive>
9+
10+
<q-responsive :ratio="1" class="col">
11+
<div class="rounded-borders bg-primary text-white flex flex-center">
12+
Ratio 1:1
13+
</div>
14+
</q-responsive>
15+
</div>
16+
</div>
17+
</template>

‎docs/src/examples/QResponsive/MaxHeight.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+
<div class="row items-start q-gutter-md">
4+
<q-responsive :ratio="4/3" class="col" style="max-height: 100px">
5+
<q-card class="column">
6+
<q-img class="col" src="https://cdn.quasar.dev/img/parallax1.jpg" />
7+
8+
<q-card-section>
9+
<div>Ratio 4:3, but max height of 100px</div>
10+
</q-card-section>
11+
</q-card>
12+
</q-responsive>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
export default {
19+
data () {
20+
return {
21+
slide: 1
22+
}
23+
}
24+
}
25+
</script>

‎docs/src/pages/style/other-helper-classes.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,5 @@ The list below is not complete. Also check the other CSS documentation pages lik
4949
| `no-border` | Removes any border |
5050
| `no-border-radius` | Removes any radius the border might have |
5151
| `rounded-borders` | Applies a generic border radius |
52+
| `borders-radius-inherit` | Inherit border radius from the parent element (**v1.9+**) |
5253

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: Responsive
3+
badge: "v1.9+"
4+
desc: The QResponsive Vue component forces the content to maintain an aspect ratio based on its width.
5+
---
6+
7+
QResponsive is a component which forces the content to maintain an aspect ratio based on its width.
8+
9+
## Installation
10+
<doc-installation components="QResponsive" />
11+
12+
## Usage
13+
14+
::: tip TIPS
15+
* The component can be used with any content, as long you specify **only one direct child**. If you need multiple elements inside of it, wrap them in a `<div>`.
16+
* It is your responsibility to make sure that your content won't overflow the container.
17+
:::
18+
19+
::: warning
20+
Do not use it on Quasar components that already have a `ratio` property, like QImg or QVideo, or on components that have a forced height.
21+
:::
22+
23+
### Basic
24+
25+
<doc-example title="Basic usage" file="QResponsive/Basic" />
26+
27+
### Flex row
28+
29+
Note below that we are using a vertical alignment (`items-start`) other than the default, so that flexbox won't force the height on each QResponsive component.
30+
31+
<doc-example title="Basic usage" file="QResponsive/FlexRow" />
32+
33+
### On some components
34+
35+
Below are just a few examples. QResponsive is not restricted to only QCard and QCarousel.
36+
37+
<doc-example title="On QCard" file="QResponsive/Card" />
38+
39+
<doc-example title="On QCardSection" file="QResponsive/CardSection" />
40+
41+
Notice that we will not supply a `height` prop to QCarousel when we use QResponsive on it, since it's QResponsive who will take care of that.
42+
43+
<doc-example title="On QCarousel" file="QResponsive/Carousel" />
44+
45+
### Maximum height
46+
47+
Apply the max height (or max width, etc etc) directly on the QResponsive component through a CSS class or inline. Remember that it is still your responsibility to ensure that the content won't overflow the container.
48+
49+
<doc-example title="On QCard" file="QResponsive/MaxHeight" />
50+
51+
## QResponsive API
52+
<doc-api file="QResponsive" />

0 commit comments

Comments
 (0)