Как использовать кнопки переключения в Vuetify

Кнопки-переключатели удобны для создания группы кнопок, отдельные состояния выбора которых зависят от одной переменной. В этой статье мы увидим, как мы можем создавать и настраивать этот компонент в Vuetify.

Компонент v-btn-toggle

Мы можем создать группу кнопок (или кнопку-переключатель) в Vuetify с компонентом v-btn-toggle. Группа кнопок может быть выбрана или переключена под одной v-model, которая привязана к переменной format:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-btn-toggle v-model="format" borderless>
        <v-btn value="left">
          <span>Left</span><v-icon right>mdi-format-align-left</v-icon>
        </v-btn>
        <v-btn value="center">
          <span>Center</span><v-icon right>mdi-format-align-center</v-icon>
        </v-btn>
        <v-btn value="right">
          <span>Right</span><v-icon right>mdi-format-align-right</v-icon>
        </v-btn>
      </v-btn-toggle>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    format: 'center',
  }),
};
</script>

Нажатие одной из кнопок в группе отменяет выбор текущей выбранной:

Обеспечение значения кнопки переключения с помощью обязательной опоры

Vuetify предоставляет реквизит mandatory, используемый для того, чтобы кнопка-переключатель всегда имела значение:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-btn-toggle v-model="format" borderless mandatory>
        <v-btn value="left">
          <span>Left</span><v-icon right>mdi-format-align-left</v-icon>
        </v-btn>
        <v-btn value="center">
          <span>Center</span><v-icon right>mdi-format-align-center</v-icon>
        </v-btn>
        <v-btn value="right">
          <span>Right</span><v-icon right>mdi-format-align-right</v-icon>
        </v-btn>
      </v-btn-toggle>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    format: null,
  }),
};
</script>

Украсьте с помощью Vuetify

Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.

Скачать бесплатную копию здесь!

Множественный выбор кнопки переключения Vuetify

Свойство multiple позволяет нам выбрать более одной кнопки в группе:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-btn-toggle v-model="selectedLetters" multiple>
        <v-btn v-for="(ch, index) in word" :key="index">{{ch}}</v-btn>
      </v-btn-toggle>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    word: 'Beauty'.split(''),
    selectedLetters: []
  }),
};
</script>

Закругленные кнопки переключения Vuetify

Мы можем сделать кнопки-переключатели в Vuetify закругленными с помощью реквизита rounded:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-btn-toggle v-model="letter" rounded>
        <v-btn v-for="(ch, index) in word" :key="index">{{ ch }}</v-btn>
      </v-btn-toggle>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    word: 'Coding'.split(''),
    letter: '',
  }),
};
</script>

Кнопки переключения без полей Vuetify

Установка свойства borderless на true на v-btn-toggle удалит границы с каждой кнопки в группе.

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-btn-toggle v-model="letter" rounded borderless>
        <v-btn v-for="(ch, index) in word" :key="index">{{ ch }}</v-btn>
      </v-btn-toggle>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    word: 'Coding'.split(''),
    letter: '',
  }),
};
</script>

Настройка цветов кнопки переключения в Vuetify

Мы можем изменить цвет выбранной кнопки в группе кнопок с помощью реквизита color:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-btn-toggle v-model="selectedLetters" rounded multiple color="blue">
        <v-btn v-for="(ch, index) in word" :key="index">{{ ch }}</v-btn>
      </v-btn-toggle>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    word: 'Beauty'.split(''),
    selectedLetters: [],
  }),
};
</script>

Краткое содержание

Кнопки-переключатели полезны, когда у нас есть группа логически связанных кнопок, состояния выбора которых должны контролироваться одной переменной. Vuetify предоставляет компонент v-btn-toggle для их создания и различные реквизиты для настройки.

Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе новых полезных материалов.

Первоначально опубликовано на сайте codingbeautydev.com.