แบนเนอร์

คอมโพเนนต์ Banner ใช้เพื่อแสดงข้อความสำคัญ สถานะ หรือการแจ้งเตือนให้กับผู้ใช้ รองรับประเภทต่างๆ (success, error, info, pending, caution) สามารถปิดได้โดยผู้ใช้ และอนุญาตให้ปรับแต่งเนื้อหาผ่านสล็อต

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

แสดงแบนเนอร์ของประเภทต่างๆ โดยใช้ prop type

นี่คือแบนเนอร์ความสำเร็จ

นี่คือแบนเนอร์ข้อผิดพลาด

นี่คือแบนเนอร์ข้อมูล

นี่คือแบนเนอร์รอดำเนินการ

นี่คือแบนเนอร์คำเตือน

<template>
  <spr-banner v-model:show="showBannerSuccess" type="success" message="นี่คือแบนเนอร์ความสำเร็จ" />
  <spr-banner v-model:show="showBannerError" type="error" message="นี่คือแบนเนอร์ข้อผิดพลาด" />
  <spr-banner v-model:show="showBannerInfo" type="info" message="นี่คือแบนเนอร์ข้อมูล" />
  <spr-banner v-model:show="showBannerPending" type="pending" message="นี่คือแบนเนอร์รอดำเนินการ" />
  <spr-banner v-model:show="showBannerCaution" type="caution" message="นี่คือแบนเนอร์คำเตือน" />
</template>

<script setup lang="ts">
import SprBanner from '@/components/banner/banner.vue';
import { ref } from 'vue';

const showBannerSuccess = ref(true);
const showBannerError = ref(true);
const showBannerInfo = ref(true);
const showBannerPending = ref(true);
const showBannerCaution = ref(true);
</script>

ปิด

แบนเนอร์สามารถปิดได้โดยผู้ใช้หาก showCloseButton เป็น true ใช้ v-model:show เพื่อควบคุมการแสดงผล

	นี่คือแบนเนอร์ความสำเร็จที่ปิดได้
	นี่คือแบนเนอร์ข้อผิดพลาดที่ปิดได้
	นี่คือแบนเนอร์ข้อมูลที่ปิดได้
	นี่คือแบนเนอร์รอดำเนินการที่ปิดได้
	นี่คือแบนเนอร์คำเตือนที่ปิดได้

<template>
  ...
  <spr-banner
    v-model:show="showBannerCloseSuccess"
    type="success"
    show-close-button
    message="นี่คือแบนเนอร์ความสำเร็จที่ปิดได้"
  />
  <spr-banner
    v-model:show="showBannerCloseError"
    type="error"
    show-close-button
    message="นี่คือแบนเนอร์ข้อผิดพลาดที่ปิดได้"
  />
  <spr-banner
    v-model:show="showBannerCloseInfo"
    type="info"
    show-close-button
    message="นี่คือแบนเนอร์ข้อมูลที่ปิดได้"
  />
  <spr-banner
    v-model:show="showBannerClosePending"
    type="pending"
    show-close-button
    message="นี่คือแบนเนอร์รอดำเนินการที่ปิดได้"
  />
  <spr-banner
    v-model:show="showBannerCloseCaution"
    type="caution"
    show-close-button
    message="นี่คือแบนเนอร์คำเตือนที่ปิดได้"
  />
  ...
  <spr-button tone="success" @click="showBannerCloseSuccess = true">แสดงความสำเร็จ</spr-button>
  <spr-button tone="danger" @click="showBannerCloseError = true">แสดงข้อผิดพลาด</spr-button>
  <spr-button tone="info" @click="showBannerCloseInfo = true">แสดงข้อมูล</spr-button>
  <spr-button tone="pending" @click="showBannerClosePending = true">แสดงรอดำเนินการ</spr-button>
  <spr-button tone="caution" @click="showBannerCloseCaution = true">แสดงคำเตือน</spr-button>
  ...
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SprBanner from '@/components/banner/banner.vue';
import SprButton from '@/components/button/button.vue';

const showBannerCloseSuccess = ref(true);
const showBannerCloseError = ref(true);
const showBannerCloseInfo = ref(true);
const showBannerClosePending = ref(true);
const showBannerCloseCaution = ref(true);
</script>

ปรับแต่ง

คุณสามารถปรับแต่งเนื้อหาของแบนเนอร์โดยใช้สล็อตเริ่มต้น

ความสำเร็จแบบกำหนดเอง!นี่คือข้อความแบนเนอร์แบบกำหนดเอง

<template>
  <spr-banner v-model:show="showBannerCustom" type="success" show-close-button>
    <div class="spr-flex spr-flex-col spr-gap-2">
      <strong>ความสำเร็จแบบกำหนดเอง!</strong> <span>นี่คือข้อความแบนเนอร์แบบกำหนดเอง</span>
    </div>
  </spr-banner>
  <spr-button tone="success" @click="showBannerCustom = true">แสดงแบนเนอร์แบบกำหนดเอง</spr-button>
</template>

<script setup lang="ts">
import SprBanner from '@/components/banner/banner.vue';
import SprButton from '@/components/button/button.vue';
import { ref } from 'vue';

const showBannerCustom = ref(true);
</script>

API Reference

Props

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
type	กำหนดลักษณะภาพและความหมายเชิงความหมายของแบนเนอร์: success: บ่งชี้การดำเนินการที่สำเร็จหรือข้อความเชิงบวก error: บ่งชี้ข้อผิดพลาดหรือปัญหาที่สำคัญที่ต้องการความสนใจ info: ให้ข้อมูลทั่วไปแก่ผู้ใช้ pending: บ่งชี้การดำเนินการที่กำลังดำเนินอยู่หรือรอการดำเนินการ caution: บ่งชี้คำเตือนหรือปัญหาที่อาจเกิดขึ้นที่อาจต้องการความสนใจ แต่ละประเภทใช้สีและไอคอนเฉพาะเพื่อเสริมความหมาย	'success' | 'error' | 'info' | 'pending' | 'caution'	'success'
showCloseButton	เมื่อ true จะแสดงปุ่มปิดที่อนุญาตให้ผู้ใช้ปิดแบนเนอร์ เมื่อคลิก จะตั้งค่าโมเดล show เป็น false	boolean	false
message	เนื้อหาข้อความที่จะแสดงในแบนเนอร์ สิ่งนี้ใช้เฉพาะเมื่อไม่ได้ระบุเนื้อหาผ่านสล็อตเริ่มต้น หากมีการระบุทั้งสล็อตและ prop ข้อความ เนื้อหาสล็อตจะมีความสำคัญเหนือกว่า	string	undefined
show (v-model)	ควบคุมการแสดงผลของแบนเนอร์ การใช้ v-model:show เปิดใช้งานการผูกสองทางสำหรับการแสดงหรือซ่อนแบนเนอร์โดยทางโปรแกรม แบนเนอร์จะถูกลบออกจาก DOM อย่างสมบูรณ์เมื่อไม่แสดง	boolean	true

Events

ชื่อ	คำอธิบาย	พารามิเตอร์
update:show	ถูกปล่อยออกมาเมื่อการแสดงผลของแบนเนอร์เปลี่ยนแปลง ไม่ว่าจะจากการโต้ตอบของผู้ใช้กับปุ่มปิดหรือการเปลี่ยนแปลงโดยทางโปรแกรมกับ prop show เหตุการณ์นี้ใช้สำหรับการผูก v-model:show	(value: boolean) - สถานะการแสดงผลใหม่

Slots

ชื่อ	คำอธิบาย
default	ใช้เพื่อปรับแต่งเนื้อหาของแบนเนอร์ เมื่อระบุแล้ว เนื้อหานี้จะแทนที่การแสดงข้อความมาตรฐาน หากไม่ได้ระบุ แบนเนอร์จะแสดงไอคอนที่เหมาะสมสำหรับประเภทที่เลือก ตามด้วยข้อความที่ระบุใน prop message

การใช้ผลิตภัณฑ์