Vuetify.js: как разместить действия кнопок в v-card слева и справа?

В компоненте v-card-actionsv-card я хочу разместить одну кнопку слева, а другую справа, используя mr-0 (margin-right = 0), но две кнопки всегда остаются рядом друг с другом.

Что я пробовал:

  • Подставка left и right для кнопок
  • Компонент v-spacer между кнопками

Код:

<v-card>
  <v-card-title primary-title>
    <div>
      <h3 class = "headline mb-0">Ttile</h3>
      <div>Located two hours south of Sydney in the <br>Southern Highlands of New South </div>
    </div>
  </v-card-title>

  <v-card-actions>
    <v-btn left>Share</v-btn>
    <v-spacer />
    <v-btn right>Explore</v-btn>
  </v-card-actions>
</v-card>

Codepen.

Как это решить?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
23
0
29 838
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Ваш код правильный. Просто используйте это:

      <v-card-actions>
        <v-btn>Share</v-btn>
        <v-spacer></v-spacer>
        <v-btn>Explore</v-btn>
      </v-card-actions>

Так что просто измените v-spacer так, чтобы он не был самозакрывающимся тегом.

Что странно, мне показалось, что v-spacer - это самозакрывающийся компонент. Спасибо

Billal Begueradj 29.10.2018 11:51

У меня работает странная самозакрывающаяся нотация (с использованием Vueitfy 2.4.0).

Haltarys 07.07.2021 16:21

@Haltarys странно. См. Этот CodePen ⇾ codepen.io/Roland1993/pen/qBmZKJP?editors=1011, где он не работает даже в 2.4.0.

roli roli 07.07.2021 17:22

Просто оберните их в v-flex и добавьте класс text-xs-right ко второму, чтобы потянуть вправо вторую кнопку.

<v-card-actions>
    <v-flex>
      <v-btn>Share</v-btn>
    </v-flex>
    <v-flex class = "text-xs-right">
      <v-btn>Explore</v-btn>
    </v-flex>
</v-card-actions>

CodePen


Редактировать Vuetify 2.1.0 (спасибо @J. Unkrass):

Просто оберните их в v-col и добавьте класс text-right ко второму, чтобы потянуть вправо вторую кнопку.

<v-card-actions>
    <v-col>
      <v-btn>Share</v-btn>
    </v-col>
    <v-col class = "text-right">
      <v-btn>Explore</v-btn>
    </v-col>
</v-card-actions>

Я использую Vuetify 2.1.0, и после одного из последних обновлений text-xs-right теперь должен быть text-right, так как xs больше не нужно указывать. Если вы хотите начать использовать это при ширине sm, вы можете использовать text-sm-right и выше. Надеюсь, это кому-то поможет, так как я боролся с этим сначала после обновления.

J. Unkrass 03.02.2020 14:55

Также я думаю, что <v-flex> теперь должен быть <v-col>, но <v-flex> по-прежнему работает нормально.

J. Unkrass 03.02.2020 15:27

Другие вопросы по теме