Vuetify 轮播不占用全宽高度
Vuetify carousel not taking up full width-height
我想制作一个占据视口全部宽度和高度的旋转木马。
我在 vue.js 2 项目中使用 Vuetify。
这是我的代码:
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container fill-height>
<v-carousel
cycle
hide-delimiters
style="height: 100%;">
<v-carousel-item>
<v-sheet
color="red lighten-1"
fill-height
style="height: 100%">
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
Slide One
</div>
</v-row>
</v-sheet>
</v-carousel-item>
<v-carousel-item>
<v-sheet
color="warning"
style="height: 100%">
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
Slide Two
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>
(这是一个将在堆栈溢出中呈现的版本)
我这边的结果是这样的:
我正在使用最新版本的 Opera GX 来渲染它,我正在使用 vue serve
来提供它。
通过应用 pa-0
的 class
从 v-container
移除填充(设置 p
添加 a
ll 边到 0
).
通过将其 fluid
属性设置为 true
从 v-container
中删除边距和 max-width(添加属性足以将其设置为 true
).
在 v-carousel
上,删除 style
绑定,因为它已被其 height
属性覆盖。相反,将 v-carousel
的 height
设置为 100%
.
<v-container class="pa-0" 1️⃣
fluid 2️⃣
fill-height>
<v-carousel height="100%" 3️⃣ ⋯>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container class="pa-0" fluid fill-height>
<v-carousel height="100%" cycle hide-delimiters>
<v-carousel-item>
<v-sheet color="red lighten-1" fill-height style="height: 100%">
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
Slide One
</div>
</v-row>
</v-sheet>
</v-carousel-item>
<v-carousel-item>
<v-sheet color="warning" style="height: 100%">
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
Slide Two
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>
我想制作一个占据视口全部宽度和高度的旋转木马。 我在 vue.js 2 项目中使用 Vuetify。 这是我的代码:
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container fill-height>
<v-carousel
cycle
hide-delimiters
style="height: 100%;">
<v-carousel-item>
<v-sheet
color="red lighten-1"
fill-height
style="height: 100%">
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
Slide One
</div>
</v-row>
</v-sheet>
</v-carousel-item>
<v-carousel-item>
<v-sheet
color="warning"
style="height: 100%">
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
Slide Two
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>
我正在使用最新版本的 Opera GX 来渲染它,我正在使用 vue serve
来提供它。
通过应用
pa-0
的class
从v-container
移除填充(设置p
添加a
ll 边到0
).通过将其
fluid
属性设置为true
从v-container
中删除边距和 max-width(添加属性足以将其设置为true
).在
v-carousel
上,删除style
绑定,因为它已被其height
属性覆盖。相反,将v-carousel
的height
设置为100%
.
<v-container class="pa-0" 1️⃣
fluid 2️⃣
fill-height>
<v-carousel height="100%" 3️⃣ ⋯>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container class="pa-0" fluid fill-height>
<v-carousel height="100%" cycle hide-delimiters>
<v-carousel-item>
<v-sheet color="red lighten-1" fill-height style="height: 100%">
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
Slide One
</div>
</v-row>
</v-sheet>
</v-carousel-item>
<v-carousel-item>
<v-sheet color="warning" style="height: 100%">
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
Slide Two
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>