ปุ่ม

คอมโพเนนต์ปุ่มเป็นองค์ประกอบที่หลากหลายและใช้กันทั่วไปในอินเทอร์เฟซผู้ใช้ ออกแบบมาเพื่อเรียกใช้การดำเนินการหรือเหตุการณ์เมื่อถูกคลิก สามารถปรับแต่งได้หลายวิธี รวมถึงขนาด โทน และตัวแปร เพื่อให้เหมาะกับความต้องการการออกแบบที่แตกต่างกัน ปุ่มยังสามารถรวมไอคอนเพื่อการสื่อสารภาพที่เพิ่มขึ้น และสามารถปิดใช้งานเพื่อป้องกันการโต้ตอบของผู้ใช้เมื่อจำเป็น

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

<spr-button>ปุ่ม</spr-button>

โทน

<spr-button>เป็นกลาง/เริ่มต้น</spr-button>
<spr-button tone="success">สำเร็จ</spr-button>
<spr-button tone="danger">อันตราย</spr-button>

ขนาด

<spr-button size="small">เล็ก</spr-button>
<spr-button>กลาง/เริ่มต้น</spr-button>
<spr-button size="large">ใหญ่</spr-button>

ตัวแปร

// หลัก/เริ่มต้น
<spr-button>หลัก/เริ่มต้น</spr-button>
<spr-button variant="secondary">รอง</spr-button>
<spr-button variant="tertiary">ระดับสาม</spr-button>

// สำเร็จ
<spr-button tone="success">หลัก/เริ่มต้น</spr-button>
<spr-button tone="success" variant="secondary">รอง</spr-button>
<spr-button tone="success" variant="tertiary">ระดับสาม</spr-button>

// อันตราย
<spr-button tone="danger">หลัก/เริ่มต้น</spr-button>
<spr-button tone="danger" variant="secondary">รอง</spr-button>
<spr-button tone="danger" variant="tertiary">ระดับสาม</spr-button>

ปิดใช้งาน

<spr-button disabled size="small">เล็ก</spr-button>
<spr-button disabled>กลาง/เริ่มต้น</spr-button>
<spr-button disabled size="large">ใหญ่</spr-button>

ไอคอน

ไอคอนพร้อมข้อความ

ไอคอนเท่านั้น

<template>
  <spr-button hasIcon>
    <Icon icon="ph:trash" />
    <span>ปุ่ม</span>
  </spr-button>

  <spr-button iconOnly>
    <Icon icon="ph:trash" />
    <span>ปุ่ม</span>
  </spr-button>
</template>

<script lang="ts" setup>
import { Icon } from '@iconify/vue';
</script>

เต็มความกว้าง

<spr-button fullwidth>ปุ่ม</spr-button>

API Reference

Props

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
tone	ควบคุมธีมสีของปุ่ม ใช้ neutral สำหรับการดำเนินการมาตรฐาน success สำหรับการดำเนินการเชิงบวก และ danger สำหรับการดำเนินการที่มีลักษณะทำลาย	'neutral' | 'success' | 'danger'	'neutral'
size	กำหนดขนาดของปุ่ม ส่งผลต่อการเว้นระยะ ขนาดตัวอักษร และมิติโดยรวม	'small' | 'medium' | 'large'	'medium'
variant	ควบคุมสไตล์ภาพของปุ่ม primary ให้การเน้นที่แข็งแกร่งที่สุด secondary มีการเน้นปานกลางพร้อมโครงร่าง และ tertiary ให้สไตล์ที่ละเอียดที่สุด	'primary' | 'secondary' | 'tertiary'	'primary'
type	ระบุแอตทริบิวต์ประเภทปุ่ม HTML ดั้งเดิม	'button' | 'submit' | 'reset'	'button'
state	กำหนดสถานะภาพของปุ่ม ใช้ภายในส่วนใหญ่	'base' | 'hover' | 'pressed' | 'focus'	'base'
disabled	เมื่อตั้งค่าเป็น true จะป้องกันการโต้ตอบของผู้ใช้และใช้สถานะปิดใช้งานภาพ	boolean	false
hasIcon	ระบุว่าปุ่มมีไอคอน ซึ่งส่งผลต่อการเว้นระยะและเลย์เอาต์	boolean	false
fullwidth	เมื่อตั้งค่าเป็น true ปุ่มจะขยายเพื่อเติมความกว้างของคอนเทนเนอร์	boolean	false

Events

ชื่อ	คำอธิบาย	พารามิเตอร์
click	ถูกปล่อยออกมาหากปุ่มถูกคลิกและไม่ได้ปิดใช้งาน	(event: MouseEvent)

Slots

ชื่อ	คำอธิบาย
default	เนื้อหาที่จะแสดงภายในปุ่ม สามารถรวมข้อความ ไอคอน หรือองค์ประกอบอื่นๆ

การเข้าถึง

คอมโพเนนต์ปุ่มปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดด้านการเข้าถึง:

• ใช้องค์ประกอบ <button> ดั้งเดิมสำหรับการนำทางแป้นพิมพ์ที่เหมาะสมและการสนับสนุนโปรแกรมอ่านหน้าจอ
• ตั้งค่า aria-disabled="true" เมื่อปุ่มถูกปิดใช้งาน
• รักษาสถานะโฮเวอร์และโฟกัสสำหรับผู้ใช้แป้นพิมพ์
• รักษาความคมชัดของสีที่เพียงพอในทุกสถานะและตัวแปร
• สนับสนุนการโฟกัสอัตโนมัติเมื่อ prop state ถูกตั้งค่าเป็น 'focus'

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