Блог

Главная - Вопросы по программированию - Vuetify v-флажок скрыть-сведения и текст в одной строке

Vuetify v-флажок скрыть-сведения и текст в одной строке

#vue.js #vuetify.js

#vue.js #vuetify.js

Вопрос:

Я пытаюсь получить простой v-checkbox и текст рядом (не Надпись) в одной строке рядом с флажком. Мой код так же прост, как:

 <v-container fluid>
  <v-row>
    <v-col>
      <v-checkbox>
      </v-checkbox>
      Some text
    </v-col>
  </v-row>
</v-container>

и его можно найти по адресу : https://codepen.io/SomeUserName678905/pen/GRqaVYL

Мои версии:

  • Vuetify v2.3.x
  • Vue v2.x

Я пытался поиграть с различными помощниками класса Vuetify Flex, но пока безуспешно.

Что я здесь упускаю из виду?

ОБНОВЛЕНИЕ после ответа @tony19

 <v-container fluid>
  <v-row align="center">
    <v-checkbox hide-details></v-checkbox>
    Some text
  </v-row>
</v-container>

успешно создает текст и флажок в одной строке, но как только я включаю hide-details свойство v-checkbox , текст и флажок больше не выравниваются.

Я создал этот новый codepen, чтобы проиллюстрировать новую проблему.

Ответ №1:

Поместите v-checkbox и текст в то же v-row самое и используйте align="center" для выравнивания их по вертикали в строке:

 <v-row align="center">
  <v-checkbox></v-checkbox>
  Some text
</v-row>

демонстрация 1

При использовании v-checkbox.hideDetails поля компонента корректируются, что приводит к смещению выравнивания align="center" , но вы можете обойти это с помощью align="end" :

 <v-row align="end">
  <v-checkbox hide-details></v-checkbox>
  Some text
</v-row>

демонстрация 2

В качестве альтернативы вы можете использовать v-simple-checkbox , у которого нет настройки поля:

 <v-row align="center">
  <v-simple-checkbox></v-simple-checkbox>
  Some text
</v-row>

демонстрация 3

Комментарии:

1. Из любопытства, почему вы избегаете метки флажка?

2. Я пытаюсь учиться Vuetify , пытаясь воспроизвести этот менеджер задач на основе vuetify, и текст должен быть заголовком задачи , выбираемым и т. Д… . Я не думаю, что метки флажков хорошо подходят для такого длинного текста, но я могу ошибаться///

3. Вместо этого вы могли бы использовать a v-simple-checkbox , что также решает проблему: codepen.io/tony19/pen/OJXeLZR

4.Еще раз спасибо! Это именно то, что я хотел! Однако я не понимаю, почему v-simple-checkbox это решает мою проблему здесь. Есть идеи, в чем проблема, связанная с этим v-checkbox hide-details свойством?

Метки: