Responsive
In Vue Horizontal the default responsive classes are turned off by default. We believe that you should be in control and implement the CSS specified to your design standards to allow for greater control.
Built-in responsive
Built-in responsive are created in CSS with media queries, the viewport of the screen (your browser actual width).
< 640px1 item in container< 768px2 item in container< 1024px3 item in container< 1280px4 item in container> 1280px5 item in container
Responsive.vueimport=design/design-responsive-built-in.vue
<template>
<vue-horizontal responsive>
<section v-for="item in items" :key="item.i">
<h4>{{ item.title }}</h4>
<p>{{ item.content }}</p>
</section>
</vue-horizontal>
</template>
<script>
export default {
data() {
return {
// E.g: creates 20 array items...
items: [...Array(20).keys()].map((i) => {
return {i, title: `Responsive`, content: `Content`};
}),
}
}
}
</script>
<style scoped>
section {
padding: 16px 24px;
background: #f3f3f3;
}
</style>
DIY with Media Query
You should always do it yourself using CSS media query with different breakpoints.
Formula
[] Margin [] Margin [] = 100%
[] [] [] = 100% - (Margin * 2) =
[] * 3 = 100% - (Margin * 2)
[] = (100% - (Margin * 2))/3
Example
Responsive.vueimport=design/design-responsive-diy.vue
<template>
<vue-horizontal>
<section v-for="item in items" :key="item.i">
<h4>{{ item.title }}</h4>
<p>{{ item.content }}</p>
</section>
</vue-horizontal>
</template>
<script>
export default {
data() {
return {
// E.g: creates 20 array items...
items: [...Array(20).keys()].map((i) => {
return {i, title: `Responsive`, content: `Content`};
}),
}
}
}
</script>
<style scoped>
section {
padding: 16px 24px;
background: #f3f3f3;
width: 100%;
margin-right: 24px;
}
@media (min-width: 640px) {
section {
width: calc((100% - (24px)) / 2);
}
}
@media (min-width: 768px) {
section {
width: calc((100% - (2 * 24px)) / 3);
}
}
@media (min-width: 1024px) {
section {
width: calc((100% - (3 * 24px)) / 4);
}
}
@media (min-width: 1280px) {
section {
width: calc((100% - (4 * 24px)) / 5);
}
}
</style>
Best practices
- Responsive item width
- Responsive margin, smaller on small screen
- Responsive navigation, hide on smaller screen
- Responsive peeking, show prev/next on small screen
Responsive.vueimport=design/design-responsive-all.vue padding=0
<template>
<main>
<vue-horizontal class="horizontal">
<section v-for="item in items" :key="item.i">
<div>
<h4>{{ item.title }}</h4>
<p>{{ item.content }}</p>
</div>
</section>
</vue-horizontal>
</main>
</template>
<script>
export default {
data() {
return {
// E.g: creates 20 array items...
items: [...Array(20).keys()].map((i) => {
return {i, title: `Responsive`, content: `Content`};
}),
}
}
}
</script>
<style scoped>
/* Layout/Content Style */
main {
margin: 24px;
}
section > div {
padding: 16px 24px;
background: #f3f3f3;
border-radius: 4px;
border: 1px #ebebeb solid;
}
</style>
<style scoped>
/* Responsive Style */
/* section is used to control sizing, div is for the inner styling. */
@media (max-width: 640px) {
.horizontal {
margin: 0 -24px;
}
.horizontal >>> .v-hl-container {
scroll-padding-left: 16px;
}
.horizontal >>> .v-hl-btn {
display: none;
}
section {
width: calc(100% - (16px + 16px));
padding: 0 8px;
}
section:first-child {
padding-left: 24px;
width: calc(100% - 16px);
}
section:last-child {
padding-right: 24px;
width: calc(100% - 16px);
}
section:only-child {
width: 100%;
}
}
@media (min-width: 640px) {
section {
width: calc((100% - (24px)) / 2);
margin-right: 24px;
}
}
@media (min-width: 768px) {
section {
width: calc((100% - (2 * 24px)) / 3);
}
}
@media (min-width: 1024px) {
section {
width: calc((100% - (3 * 24px)) / 4);
}
}
@media (min-width: 1280px) {
section {
width: calc((100% - (4 * 24px)) / 5);
}
}
</style>
Due to the nature of varying web design, there is no one size fit all. This is just an example with the given condition.