Используя VueJS и Vuetify, как я могу вертикально и горизонтально центрировать v-переключатель в v-flex? - PullRequest
Новая
       2

Используя VueJS и Vuetify, как я могу вертикально и горизонтально центрировать v-переключатель в v-flex?

0 голосов
/ 02 июля 2019

Кажется, я не могу центрировать компонент v-switch внутри v-flex, когда элементы ориентированы в ряд.

Такое ощущение, что я попробовал все документированные реквизиты v-container, v-layout и v-flex на странице документации Grid system , и кажется, что ничего не получается сделать (например, justify-center, text-xs-center и т. Д.).

Я пытался решить подобные проблемы, но безрезультатно. 

new Vue({
  el: '#app',
  data () {
    return {
      enabled: false
    }
  }
})
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/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>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-container grid-list-xl style="background: IndianRed;">
      <v-layout text-xs-center row wrap align-center style="height: 100px;">

        <v-flex xs4>
          <v-card color="success">
            Content
          </v-card>
        </v-flex>

<!–– This guy right here -->
        <v-flex xs4>
          <v-switch prepend-icon="cloud" v-model="enabled"></v-switch>
        </v-flex>

        <v-flex xs4>
          <v-card color="success">
            Content
          </v-card>
        </v-flex>

      </v-layout>
    </v-container>
  </v-app>
</div>

Ответы [ 2 ]

0 голосов
/ 03 июля 2019

Решение, которое я получил, заключалось в использовании столбца, ориентированного на v-layout, с align-center, обернутым вокруг v-switch компонента. 

new Vue({
  el: '#app',
  data () {
    return {
      enabled: false
    }
  }
})
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/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>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-container grid-list-xl style="background: IndianRed;">
      <v-layout text-xs-center row wrap align-center style="height: 100px;">

        <v-flex xs4>
          <v-card color="success">
            Content
          </v-card>
        </v-flex>

<!–– This guy right here -->
        <v-flex xs4>
          <v-layout column align-center>
            <v-switch prepend-icon="cloud" v-model="enabled"></v-switch>
          </v-layout>
        </v-flex>

        <v-flex xs4>
          <v-card color="success">
            Content
          </v-card>
        </v-flex>

      </v-layout>
    </v-container>
  </v-app>
</div>
0 голосов
/ 03 июля 2019 
<v-flex xs4>
    <v-layout justify-center align-center>
         <v-switch prepend-icon="cloud" v-model="enabled"></v-switch>
    </v-layout>
</v-flex>

Используя вложенный макет с выравниванием по центру и выравниванию, вы получите желаемый эффект.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...