Cara Menggunakan Tombol Toggle di Vuetify

Tombol alih berguna untuk membuat sekelompok "tombol" yang status pemilihannya bergantung pada satu variabel. Pada artikel ini, kita akan melihat cara membuat dan menyesuaikan komponen ini di Vuetify.

Komponen v-btn-toggle

Kita dapat membuat grup tombol (atau tombol sakelar) di Vuetify dengan komponen v-btn-toggle. Kelompok tombol dapat dipilih atau diubah dalam satu v-model, yang terikat pada variabel 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>

Mengklik salah satu tombol dalam grup akan membatalkan pilihan yang sedang dipilih:

Memastikan Nilai Tombol Toggle dengan Prop wajib

Vuetify menyediakan prop mandatory, yang digunakan untuk memastikan bahwa tombol sakelar akan selalu memiliki nilai:

<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>

Percantik dengan Vuetify

Panduan lengkap untuk membuat aplikasi web yang elegan dengan kerangka Vuetify Material Design.

Unduh salinannya secara gratis di sini!

Vuetify Toggle Button Beberapa Pilihan

Prop multiple memungkinkan kita memilih lebih dari satu tombol dalam grup:

<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>

Tombol Toggle Bulat Vuetify

Kita dapat membuat tombol sakelar di Vuetify dibulatkan dengan prop 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 Tombol Toggle Tanpa Batas

Menyetel prop borderless ke true pada v-btn-toggle akan menghapus batas dari setiap tombol dalam grup.

<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>

Menyesuaikan Warna Tombol Toggle di Vuetify

Kita dapat mengubah warna dari tombol yang dipilih dalam grup tombol dengan prop 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>

Ringkasan

Tombol pengalih berguna ketika kita memiliki sekelompok "tombol" yang terkait secara logis dan status pemilihannya perlu dikontrol oleh satu variabel. Vuetify menyediakan komponen v-btn-toggle untuk membuatnya dan berbagai alat peraga untuk penyesuaian.

"Daftar" ke buletin mingguan kami untuk mendapatkan informasi terbaru tentang konten menarik lainnya.

Awalnya diterbitkan di codingbeautydev.com.