PavelUstyugov
@PavelUstyugov
Самозанятый веб-разработчик

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

дело в том, что в фреймворке vuetify показано как размещать радиокнопки друг под другом и и в один ряд. но получается некрасиво.
eSxA3ij.png
а мне хотелось бы, чтобы пункты размещались равномерно и растягивались на ширину формы.
понимаю, что можно это сделать при помощи флекс и стилей. Но это же костыль. У них свои компоненты и вот такой код они дают:

<v-radio-group v-model="form.regType" row>
                    <v-radio label="Юридическое Лицо" value="jurLic"></v-radio>
                    <v-radio label="Индивидуальный Предприниматель" value="IP"></v-radio>
                    <v-radio label="Физическое Лицо" value="Fiz"></v-radio>
                  </v-radio-group>


но судя по всему можно что-то сделать с этим. Подскажите братья.
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
0xD34F
@0xD34F
понимаю, что можно это сделать при помощи флекс и стилей. Но это же костыль.

Ну, поскольку в документации v-radio-group нет ничего, что могло бы помочь в решении вашей проблемы, надо понимать, что костылём в той или иной степени будет любое решение.

Можно для v-radio-group задать класс d-flex или d-block (это даст ширину в 100%), а сами кнопки обернуть в v-layout (что позволит настроить нужное выравнивание). Как-то так.

UPD. Следует признать, я был неправ, сказав, что костыльным будет любое решение. Вариант за авторством nvdfxx таковым явно не является. Надо только довести его до ума (ширина была не 100%, ну и сами радиокнопки создавались не динамически).
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@nvdfxx
Senior Pomidor developer
<v-layout>
    <v-radio-group v-model="form.regType" row>
        <v-radio label="Юридическое Лицо" value="jurLic"></v-radio>
        <v-spacer/>
        <v-radio label="Индивидуальный Предприниматель" value="IP"></v-radio>
        <v-spacer/>
        <v-radio label="Физическое Лицо" value="Fiz"></v-radio>
    </v-radio-group>
</v-layout>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы