web-dev-qa-db-fra.com

vuetify.js comment obtenir toute la largeur du v-container

Je suis nouveau sur vuetify.js Et j'ai commencé à jouer avec.

enter image description here

Ceci est mon code.

Admin-panel.vue 

<v-content class="yellow">
  <v-container>
    <v-layout>
      <router-view></router-view>
    </v-layout>
  </v-container>
</v-content>

create-user.vue 

<template>
    <v-container class="red">
        <v-layout class="blue">
            <v-flex md12>
                form
            </v-flex>
        </v-layout>
    </v-container>
</template>

Ici, je peux voir que l'élément v-container Obtient toute la largeur disponible. Ce que je veux, c'est mon v-container À l'intérieur du composant create-user pour obtenir la même largeur. (Le jaune disparaîtra et le rouge remplira l'écran)

Comment puis-je y parvenir?

vue.jsvuejs2vuetify.js
7
Pathum Kalhan

Utilisez l'accessoire fluid:

<v-container 
  fluid
/>

Codepen .

7
Begueradj

J'avais le même problème.

J'ai réalisé que dans mon cas, j'avais un <v-content> sur les pages parent et enfant. Le <v-content> est utilisé pour rendre l'application jolie et gérer l'espacement sur la barre de navigation et la barre de titre.

Assurez-vous que vous n'en avez déclaré qu'un dans votre application.

2
jacstrong

Avez-vous essayé d'utiliser les classes/accessoires de marge et de remplissage?

<v-container class="red ma-0">

ou

<v-container class="red" :ma-0="$vuetify.breakpoint.mdAndDown">

pour avoir le plein écran uniquement pour les appareils mobiles?

1
Philip Müller

vous pouvez essayer comme ça

master.vue

<v-app id="app">
<v-navigation-drawer
        v-model="drawer"
        temporary
        absolute
>
    <sidebar></sidebar>
</v-navigation-drawer>
<v-toolbar dark color="primary" fixed app>
    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    <v-toolbar-title class="white--text">MyBlog</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items>
        <v-text-field
                color="purple"
                id="globalSearch"
                name="globalSearch"
                label="Search"
                v-model="globalSearch"
                v-validate="'required'"
        ></v-text-field>
        <v-btn to="dashboard" flat>Dashboard</v-btn>
        <v-btn to="login" flat>Login</v-btn>
        <v-btn flat>Register</v-btn>
    </v-toolbar-items>
</v-toolbar>
<v-content>
    <v-container fluid>
        <router-view></router-view>
    </v-container>
</v-content>
<v-footer height="auto">
    <v-card
            flat
            tile
            class="Indigo lighten-1 white--text text-xs-center"
    >
        <v-card-text>
            <v-btn
                    v-for="icon in icons"
                    :key="icon"
                    icon
                    class="mx-3 white--text"
            >
                <v-icon size="24px">@{{ icon }}</v-icon>
            </v-btn>
        </v-card-text>
        <v-card-text class="white--text">
            &copy;2018 — <strong>Eliyas Hossain</strong>
        </v-card-text>
    </v-card>
</v-footer>
</v-app>

category.vue

<template>
<v-card>
        <v-card-title>
            <div>
                <h2 class="pl-2">Categories</h2>
                <v-btn @click="dialog = !dialog" color="primary" dark>New Category</v-btn>
            </div>
            <v-spacer></v-spacer>
            <v-text-field
                    v-model="search"
                    append-icon="search"
                    label="Search"
                    single-line
                    hide-details
            ></v-text-field>
        </v-card-title>
</v-card>
</template>

il prendra donc tout l'espace sur le côté droit.

0
Eliyas Hossain