<html>
<head>
<meta charset="UTF-8" />
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/quasar@^1.0.0-beta.0/dist/quasar.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet">
</head>
<body>
<div id="app" class="q-pa-sm">
<!-- Page layout -->
<q-layout>
<q-header>
<q-toolbar>
<q-btn icon="menu" flat></q-btn>
<q-toolbar-title>Services</q-toolbar-title>
</q-toolbar>
</q-header>
<q-page-container>
<q-page>
<!-- Listing -->
<swiper :options="swiperOption" class="swipeFullWrap">
<swiper-slide class="swipeFull">
<q-table row-key="id" :data="data" :columns="fields" class="oTable">
<template v-slot:body="props">
<q-tr :props="props" @mouseenter.native="props.row.hover=true" @mouseleave.native="props.row.hover=false">
<q-td :key="field.name" v-for="field in fields" :props="props">
{{ props.row[field.name] }}
</q-td>
</q-tr>
</template>
</q-table>
</swiper-slide>
</swiper>
</q-page>
</q-page-container>
</q-layout>
</div>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0-beta.0/dist/quasar.umd.min.js"></script>
<script src="index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.2/dist/vue-awesome-swiper.js"></script>
</body>
</html>.swipeFull {
width: fit-content;
min-width: 100%;
}
.swiper-container.swipeFullWrap > .swiper-wrapper {
width: 100%;
}
.swipe-container {
display: block;
position: relative;
width: fit-content;
min-width: 100%;
}
.oTable {
width: fit-content;
width: fit-content;
width: fit-content;
min-width: 100%;
max-width: fit-content;
max-width: fit-content;
max-width: fit-content;
}Vue.use(VueAwesomeSwiper)
new Vue({
el: '#app',
data: {
data: {},
// для drag scrolling
swiperOption: {
direction: 'horizontal',
slidesPerView: 'auto',
freeMode: true
}
},
created()
{
this.data = [
{
id: 1,
descr: "Plumbing",
start_date: "2019-03-09",
notes: "Libero non voluptas est",
notes2: "something2",
notes3: "something3",
notes4: "something4",
notes5: "something5",
notes6: "something6",
notes7: "something7",
notes8: "something8",
notes9: "something9",
notes10: "something10",
notes11: "something11",
notes12: "something12"
},
{
id: 2,
descr: "Electric",
start_date: "2019-04-19",
notes: "Vel exercitationem nam cumque",
notes2: "something2",
notes3: "something3",
notes4: "something4",
notes5: "something5",
notes6: "something6",
notes7: "something7",
notes8: "something8",
notes9: "something9",
notes10: "something10",
notes11: "something11",
notes12: "something12"
},
{
id: 3,
descr: "Freight",
start_date: "2019-05-17",
notes: "Quisquam molestiae in dicta dolores",
notes2: "something2",
notes3: "something3",
notes4: "something4",
notes5: "something5",
notes6: "something6",
notes7: "something7",
notes8: "something8",
notes9: "something9",
notes10: "something10",
notes11: "something11",
notes12: "something12"
}
];
this.fields = [
{
name: "id",
label: "Id",
align: "right",
type: "number"
},
{
name: "descr",
label: "Description",
align: "left",
type: "text"
},
{
name: "start_date",
label: "Start date",
align: "left",
type: "date"
},
{
name: "notes",
label: "Notes",
align: "left",
type: "text"
},
{
name: "notes2",
label: "Notes2",
align: "left",
type: "text"
},
{
name: "notes3",
label: "Notes3",
align: "left",
type: "text"
},
{
name: "notes4",
label: "Notes4",
align: "left",
type: "text"
},
{
name: "notes5",
label: "Notes5",
align: "left",
type: "text"
},
{
name: "notes6",
label: "Notes6",
align: "left",
type: "text"
},
{
name: "notes7",
label: "Notes7",
align: "left",
type: "text"
},
{
name: "notes8",
label: "Notes8",
align: "left",
type: "text"
},
{
name: "notes9",
label: "Notes9",
align: "left",
type: "text"
},
{
name: "notes10",
label: "Notes10",
align: "left",
type: "text"
},
{
name: "notes11",
label: "Notes11",
align: "left",
type: "text"
},
{
name: "notes12",
label: "Notes12",
align: "left",
type: "text"
}
];
},
methods: {
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.