Snackbar

แถบข้อความป๊อปอัปเพื่อแสดงข้อความและดำเนินการ

การใช้งานพื้นฐาน

Snackbar ใช้คอมโพเนนต์ <Teleport> ของ Vue เพื่อแนบคอมโพเนนต์ snackbar เข้ากับ HTML body และยังใช้ defineExpose ของ Vue เพื่อเปิดเผยฟังก์ชันห้าฟังก์ชันสำหรับแสดง snackbar ต่างๆ

<template>
  <spr-snackbar ref="snackbar" />

  <spr-button @click="showSnackbar1">แสดง Snackbar</spr-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const snackbar = ref(null);

const showSnackbar1 = () => {
  snackbar.value.showSnackbar({
    text: 'นี่คือข้อความตัวอย่าง',
  });
};
</script>

โทนสี

Snackbar สามารถมีโทนสีได้สี่แบบ: success, information, danger, caution

<template>
  <div class="spr-flex spr-items-center spr-gap-2">
    <spr-snackbar ref="snackbar" />
    <spr-button @click="showInformation">แสดงข้อมูล</spr-button>
    <spr-button @click="showSuccess" tone="success">แสดงความสำเร็จ</spr-button>
    <spr-button @click="showDanger" tone="danger">แสดงความผิดพลาด</spr-button>
    <spr-button @click="showCaution" tone="danger" variant="secondary">แสดงคำเตือน</spr-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const snackbar = ref(null);

const showSuccess = () => {
  snackbar.value.showSuccess({
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    showIcon: true,
  });
};

const showInformation = () => {
  snackbar.value.showInformation({
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    showIcon: true,
  });
};

const showDanger = () => {
  snackbar.value.showDanger({
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    showIcon: true,
  });
};

const showCaution = () => {
  snackbar.value.showCaution({
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    showIcon: true,
  });
};
</script>

TIP

หรือคุณสามารถใช้ showSnackbar() เริ่มต้นและกำหนดพร็อพเพอร์ตี้ tone เป็น success, information, danger, caution

การดำเนินการ

พร็อพเพอร์ตี้ action เป็นป้ายชื่อที่คลิกได้บน snackbar ซึ่งเราสามารถกำหนดฟังก์ชันได้ เมื่อไม่ได้กำหนด action ค่าเริ่มต้นคือลบ snackbar

<template>
  <spr-snackbar ref="snackbar" />

  <spr-button @click="showWithCloseButton">แสดง snackbar ที่มีปุ่มปิด</spr-button>
  <spr-button @click="showWithFunction">แสดง snackbar ที่มีฟังก์ชัน</spr-button>
  <spr-button @click="showWithActionIconOnly">แสดง snackbar ที่มีไอคอนการดำเนินการ</spr-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const snackbar = ref(null);

const showWithCloseButton = () => {
  snackbar.value.showInformation({
    text: 'Snackbar นี้จะปิดเมื่อคุณคลิกปุ่มปิด',
    showIcon: true,
    actionText: 'ปิด',
    showAction: true,
  });
};

const showWithFunction = () => {
  snackbar.value.showCaution({
    text: 'Snackbar นี้เรียกใช้ฟังก์ชัน',
    showIcon: true,
    actionText: 'ดำเนินการ',
    showAction: true,
    action: () => alert('คลิกดำเนินการแล้ว'),
  });
};

const showWithActionIconOnly = () => {
  snackbar.value.showSnackbar({
    text: 'Snackbar นี้เรียกใช้ฟังก์ชัน',
    tone: 'danger',
    showIcon: true,
    actionText: '',
    showAction: true,
    actionIconProps: {
      icon: 'ph:trash-fill',
      tone: 'danger',
    },
    action: () => alert('Snackbar ที่มีไอคอนการดำเนินการ'),
  });
};
</script>

ช่องการดำเนินการของ Snackbar

ช่องนี้ช่วยให้คุณปรับแต่งส่วนการดำเนินการของ snackbar คุณสามารถใช้คอมโพเนนต์หรือองค์ประกอบ HTML ใดก็ได้เป็นการดำเนินการ

WARNING

ต้องตั้งค่า showAction เป็น true เพื่อให้แสดงช่องนี้

<template>
  <spr-snackbar ref="slottedActionSnackbar">
    <template #snackbarActions>
      <div class="spr-flex spr-cursor-pointer spr-items-center">
        <spr-button class="spr-mr-2" @click="handleSlottedAction"> การดำเนินการแบบช่อง </spr-button>
        ข้อความการดำเนินการ
      </div>
    </template>
  </spr-snackbar>
  <spr-button @click="showSlottedSnackbarAction">แสดง snackbar ที่มีฟังก์ชัน</spr-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const slottedActionSnackbar = ref(null);

const handleSlottedAction = () => {
  // จัดการการคลิกการดำเนินการแบบช่อง
  alert('คลิกการดำเนินการแบบช่องแล้ว');
};

const showSlottedSnackbarAction = () => {
  slottedActionSnackbar.value.showSnackbar({
    text: 'Snackbar นี้มีการดำเนินการแบบช่อง',
    tone: 'success',
    showIcon: true,
    showAction: true,
    actionText: '',
  });
};
</script>

การอ้างอิง API

Props

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
text	ข้อความที่จะแสดงใน snackbar นี่คือเนื้อหาหลักที่สื่อสารข้อมูลกับผู้ใช้	string	จำเป็น
tone	กำหนดโทนสีและไอคอนของ snackbar เพื่อสื่อสารข้อความประเภทต่างๆ: success: โทนสีเขียวพร้อมไอคอนวงกลมถูก information: โทนสีน้ำเงินพร้อมไอคอนข้อมูล danger: โทนสีแดงพร้อมไอคอนวงกลมคำเตือน caution: โทนสีส้มพร้อมไอคอนคำเตือน	'success' | 'information' | 'danger' | 'caution'	'information'
showIcon	ควบคุมการมองเห็นของไอคอนเฉพาะโทนสีใน snackbar	boolean	false
actionText	ข้อความป้ายชื่อสำหรับปุ่มการดำเนินการ ซึ่งจะปรากฏเป็นข้อความที่คลิกได้ซึ่งสามารถเรียกใช้ฟังก์ชันการดำเนินการ	string	'ดำเนินการ'
showAction	ควบคุมการมองเห็นของปุ่ม/ข้อความการดำเนินการใน snackbar เมื่อตั้งค่าเป็น true ปุ่ม/ข้อความการดำเนินการจะแสดง	boolean	false
action	ฟังก์ชันที่จะดำเนินการเมื่อคลิกข้อความ/ปุ่มการดำเนินการ หากไม่ได้ระบุ การดำเนินการเริ่มต้นคือปิด snackbar	Function	() => {}
duration	ระยะเวลาเป็นมิลลิวินาทีที่ snackbar จะแสดงก่อนที่จะหายไปโดยอัตโนมัติ ตั้งค่าผ่าน snackbar store	number	4000
actionIconProps	ออบเจกต์การกำหนดค่าสำหรับปุ่มไอคอนการดำเนินการ ประกอบด้วย: icon: ชื่อไอคอน Iconify ที่จะแสดงบนปุ่ม tone: โทนสีสำหรับปุ่มไอคอน	{ icon: string; tone: 'neutral' | 'success' | 'danger' }	undefined

Events

ชื่อ	คำอธิบาย	พารามิเตอร์
click	ปล่อยออกมาเมื่อคลิก snackbar อีเวนต์นี้มาจากคอมโพเนนต์ Snack	(evt: MouseEvent) - ออบเจกต์อีเวนต์เมาส์

Slots

ชื่อ	คำอธิบาย
default / snackbarActions	ช่องสำหรับปรับแต่งส่วนการดำเนินการของ snackbar โปรดทราบว่า showAction ต้องตั้งค่าเป็น true เพื่อให้ช่องนี้แสดงผล
icon	ช่องสำหรับปรับแต่งไอคอนที่แสดงใน snackbar พร้อมใช้งานในคอมโพเนนต์ Snack
label	ช่องสำหรับปรับแต่งเนื้อหาป้ายข้อความ พร้อมใช้งานในคอมโพเนนต์ Snack

เมธอดที่เปิดเผย

เมธอด	คำอธิบาย	พารามิเตอร์
showSnackbar	แสดง snackbar ด้วยการกำหนดค่าที่ระบุ ใช้เมธอดนี้เมื่อคุณต้องการปรับแต่ง snackbar อย่างเต็มรูปแบบ	(payload: SnackPropTypes) - ออบเจกต์การกำหนดค่าที่มี props ที่อธิบายข้างต้น
showSuccess	แสดง snackbar ความสำเร็จ (สีเขียว) ด้วยการกำหนดค่าที่ระบุ ตั้งค่าโทนเป็น 'success' โดยอัตโนมัติ	(payload: SnackPropTypes) - ออบเจกต์การกำหนดค่า (โทนจะถูกแทนที่)
showInformation	แสดง snackbar ข้อมูล (สีน้ำเงิน) ด้วยการกำหนดค่าที่ระบุ ตั้งค่าโทนเป็น 'information' โดยอัตโนมัติ	(payload: SnackPropTypes) - ออบเจกต์การกำหนดค่า (โทนจะถูกแทนที่)
showDanger	แสดง snackbar ความผิดพลาด (สีแดง) ด้วยการกำหนดค่าที่ระบุ ตั้งค่าโทนเป็น 'danger' โดยอัตโนมัติ	(payload: SnackPropTypes) - ออบเจกต์การกำหนดค่า (โทนจะถูกแทนที่)
showCaution	แสดง snackbar คำเตือน (สีส้ม) ด้วยการกำหนดค่าที่ระบุ ตั้งค่าโทนเป็น 'caution' โดยอัตโนมัติ	(payload: SnackPropTypes) - ออบเจกต์การกำหนดค่า (โทนจะถูกแทนที่)