Как мне применить больше отступов к моему мнению в vuetify? - PullRequest
Новая
       11

Как мне применить больше отступов к моему мнению в vuetify?

0 голосов
/ 19 января 2019

Я пытаюсь заполнить содержимое моего представления, используя класс «px-5» для контейнера в представлении.Но почему-то я не могу дополнить контент столько, сколько захочу.То, что я ищу, это заполнение, эквивалентное тому, что на этом скриншоте firebase:

fantasy pic

My App.Vue выглядит так: 

  <v-content>
      <div class="page-wrapper">
        <page-header></page-header>
          <router-view/>
      </div>        
  </v-content>

По мнению: 

<template>
  <div id="pageTable">
    <v-container grid-list-xl fluid px-5 pt-1 mx-auto>
      <h2>Mina ordrar</h2>
      <v-layout row wrap>
     <v-flex xs12 md12 lg12>
<v-data-table
      :headers="headers"
      :items="orders"
      class="elevation-1"
    >
    </v-data-table>
        </v-flex>
    </v-layout>
     </v-container>
  </div>
</template>

Любые идеи Что я делаю не так?

Заполнение на моем сайте:

My site

1 Ответ

0 голосов
/ 19 января 2019

Если вы используете загрузчики стилусов, вы можете переопределить переменную $spacer перед импортом стилей.По умолчанию установлено 16 пикселей.При переопределении этой переменной будет пересчитан интервал между каждым элементом, который будет поддерживать постоянный интервал в вашем приложении.

Если вы хотите полностью выполнить что-то еще, вы можете переопределить $spacer-x, $spacer-yили $spacers переменные.Их значения по умолчанию следующие: 

$spacer := 16px
$spacer-x := $spacer
$spacer-y := $spacer
$spacers := {
  zero: {
    x: 0,
    y: 0
  },
  one: {
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  },
  two: {
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  },
  three: {
    x: $spacer-x,
    y: $spacer-y
  },
  four: {
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  },
  five: {
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  }
}

( source )

Если изменение общих полей компонентов vuetify не то, что вам нужноВы можете просто определить свои собственные служебные классы, которые выходят за пределы m-5 / p-5.

...