วิธีใช้ปุ่มสลับใน 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>

การคลิกปุ่มใดปุ่มหนึ่งในกลุ่มจะเป็นการยกเลิกการเลือกปุ่มที่เลือกในปัจจุบัน:

ตรวจสอบให้แน่ใจว่าค่าปุ่มสลับด้วย Prop บังคับ

Vuetify จัดเตรียม mandatory prop ซึ่งใช้เพื่อให้แน่ใจว่าปุ่มสลับจะมีค่าอยู่เสมอ:

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

<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