โลโก้ผลิตภัณฑ์
คอมโพเนนต์โลโก้ผลิตภัณฑ์ช่วยให้แสดงโลโก้ผลิตภัณฑ์ Sprout ต่างๆ อย่างง่ายและสม่ำเสมอในแอปพลิเคชันของคุณ รองรับผลิตภัณฑ์ต่างๆ ชุดสี และตัวเลือกขนาด
ภาพรวม
คอมโพเนนต์โลโก้ผลิตภัณฑ์มีคุณสมบัติ:
- คอลเลกชันครบถ้วนของโลโก้ผลิตภัณฑ์ Sprout
- ชุดสีหลายแบบสำหรับพื้นหลังและบริบทที่แตกต่างกัน
- ปรับแต่งขนาดได้ตามความต้องการของเลย์เอาต์
- แอตทริบิวต์การเข้าถึงที่เหมาะสมสำหรับโปรแกรมอ่านหน้าจอ
การใช้งานพื้นฐาน
วิธีที่ง่ายที่สุดในการใช้คอมโพเนนต์โลโก้คือไม่ต้องใช้ props ใดๆ ซึ่งจะแสดงโลโก้ Sprout HR เริ่มต้นด้วยธีมสีเข้ม
<template>
<spr-logo />
</template>
<script setup lang="ts">
import SprLogo from '@/components/logo/logo.vue';
</script>TIP
คอมโพเนนต์จะใช้แอตทริบิวต์ alt text และ title ที่เหมาะสมสำหรับการเข้าถึงโดยอัตโนมัติ โดยอิงตามชื่อผลิตภัณฑ์
ชุดสี
คอมโพเนนต์โลโก้รองรับชุดสีสี่แบบเพื่อให้เข้ากับสีพื้นหลังและบริบทการออกแบบต่างๆ ใช้ prop theme เพื่อระบุธีมที่ต้องการ
<template>
<!-- ธีมสีขาว (เหมาะสำหรับพื้นหลังสีเข้ม) -->
<spr-logo theme="white" name="hr" />
<!-- ธีมสีเข้ม (ค่าเริ่มต้น) -->
<spr-logo theme="dark" name="hr" />
<!-- ธีมสีเทา (ตัวเลือกที่ละเอียดอ่อนสำหรับพื้นหลังสีอ่อน) -->
<spr-logo theme="gray" name="hr" />
<!-- ธีมสีเขียว (เน้นสีแบรนด์) -->
<spr-logo theme="green" name="hr" />
</template>การเลือกธีม
- ใช้ธีม
whiteบนพื้นหลังสีเข้มเพื่อความคมชัดที่ดีที่สุด - ใช้ธีม
dark(ค่าเริ่มต้น) บนพื้นหลังสีอ่อนสำหรับการสร้างแบรนด์มาตรฐาน - ใช้ธีม
grayสำหรับรูปลักษณ์ที่ละเอียดอ่อนกว่าบนพื้นหลังสีอ่อน - ใช้ธีม
greenเมื่อคุณต้องการเน้นสีแบรนด์
โลโก้ผลิตภัณฑ์
คอมโพเนนต์โลโก้รองรับผลิตภัณฑ์ Sprout หลากหลาย ใช้ prop name เพื่อระบุโลโก้ผลิตภัณฑ์ที่ต้องการ
<template>
<spr-logo name="benchmark" />
<spr-logo name="ecosystem" />
<spr-logo name="engage" />
<spr-logo name="finances" />
<spr-logo name="hr-mobile" />
<spr-logo name="hr" />
<!-- ค่าเริ่มต้น -->
<spr-logo name="inbound" />
<spr-logo name="insight" />
<spr-logo name="readycash" />
<spr-logo name="readywage" />
<spr-logo name="payroll" />
<spr-logo name="performance-plus" />
<spr-logo name="procurement" />
<spr-logo name="professional-services" />
<spr-logo name="recruit" />
<spr-logo name="recruit-plus" />
<spr-logo name="sail" />
<spr-logo name="sidekick" />
<spr-logo name="wellness" />
</template>การปรับแต่งขนาด
คอมโพเนนต์โลโก้ช่วยให้คุณปรับแต่งขนาดได้โดยใช้ prop width คุณสามารถระบุตัวเลข (ตีความเป็นพิกเซล) หรือสตริงที่มีหน่วย CSS
<template>
<spr-logo width="30" />
<!-- 30px -->
<spr-logo width="50" />
<!-- ขนาดเริ่มต้น 50px -->
<spr-logo width="80" />
<!-- 80px -->
<spr-logo width="120" />
<!-- 120px -->
<spr-logo width="5em" />
<!-- ใช้หน่วย em -->
</template>TIP
เมื่อระบุตัวเลขโดยไม่มีหน่วย (เช่น 50) จะถูกตีความเป็นพิกเซล สำหรับหน่วยอื่นๆ ให้ระบุอย่างชัดเจน (เช่น 5em หรือ 10rem)
กรณีการใช้งานทั่วไป
คอมโพเนนต์โลโก้มักใช้ใน:
- ส่วนหัวของแอปพลิเคชัน: แสดงโลโก้ผลิตภัณฑ์ในแถบนำทางด้านบน
- หน้าเข้าสู่ระบบ: แสดงโลโก้ผลิตภัณฑ์อย่างเด่นชัดระหว่างการตรวจสอบสิทธิ์
- เทมเพลตอีเมล: รวมการสร้างแบรนด์ผลิตภัณฑ์ในการแจ้งเตือน
- หน้าเกี่ยวกับเรา: แสดงโลโก้ผลิตภัณฑ์หลายรายการในส่วนผลงาน
- วัสดุทางการตลาด: นำเสนอโลโก้ผลิตภัณฑ์ด้วยขนาดและธีมที่สม่ำเสมอ
API Reference
Props
| ชื่อ | คำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
name | ระบุโลโก้ผลิตภัณฑ์ที่จะแสดง | string | 'hr' |
theme | ระบุธีมสีของโลโก้ | string | 'dark' |
width | กำหนดความกว้างของโลโก้ สามารถเป็นตัวเลข (ตีความเป็นพิกเซล) หรือสตริงที่มีหน่วย CSS | string | number | 50 (50px) |
ผลิตภัณฑ์ที่มีให้
ชื่อผลิตภัณฑ์ต่อไปนี้ได้รับการรองรับผ่าน prop name:
benchmarkecosystemengagefinanceshr-mobilehr(ค่าเริ่มต้น)inboundinsightreadycashreadywagepayrollperformance-plusprocurementprofessional-servicesrecruitrecruit-plussailsidekickwellness
ธีมที่มีให้
ธีมต่อไปนี้ได้รับการรองรับผ่าน prop theme:
white- เหมาะสำหรับพื้นหลังสีเข้มdark(ค่าเริ่มต้น) - การสร้างแบรนด์มาตรฐานสำหรับพื้นหลังสีอ่อนgray- ตัวเลือกที่ละเอียดอ่อนสำหรับพื้นหลังสีอ่อนgreen- เน้นสีแบรนด์
การเข้าถึง
คอมโพเนนต์โลโก้จะจัดเตรียมแอตทริบิวต์ alt และ title ที่เหมาะสมสำหรับโลโก้ผลิตภัณฑ์แต่ละรายการโดยอัตโนมัติเพื่อให้มั่นใจถึงการเข้าถึงสำหรับโปรแกรมอ่านหน้าจอ แอตทริบิวต์เหล่านี้ถูกสร้างขึ้นตามชื่อผลิตภัณฑ์ (เช่น "Sprout HR" สำหรับ name="hr")