หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

ตอบสนอง

ทำปฏิกิริยากับโปรไฟล์และโครงการของคุณ

ค้นหารายการที่สมบูรณ์มากกว่า 1,400 ป้ายใน Badges.md

ติดตั้ง 

pnpm add react-simple-badges
npm i react-simple-badges
yarn add react-simple-badges
bun add react-simple-badges

องค์ประกอบนี้คืออะไร?

ส่วนประกอบที่แสดงภาพของป้ายจาก shields.io โดยใช้รายการไอคอน simpleicons.org ทุก 24 ชั่วโมงการกระทำของ GitHub จะทำงานเพื่อตรวจสอบไอคอนใหม่ หากพวกเขาเป็นรุ่นใหม่เป็นโมดูล NPM ใหม่จะถูกปล่อยออกมาด้วย โมดูลนี้มีวัตถุประสงค์เพื่อใช้เป็นส่วนประกอบเซิร์ฟเวอร์ React ใช้องค์ประกอบ Async ใหม่ ซึ่งหมายความว่าสามารถนำเข้ารายการไอคอนขนาดใหญ่เพื่อรับสีพื้นหลังที่คุณต้องการ แต่ไม่เพิ่มเวลาโหลดหน้าผู้ใช้ปลายทาง แต่นี่หมายความว่าคุณต้องการเฟรมเวิร์กที่รองรับส่วนประกอบเซิร์ฟเวอร์และตอบสนอง 18.2.0 หรือใหม่กว่า

การใช้งาน 

 import { Badge } from "react-simple-badges"

export default async function HomePage ( ) {
  return (
    < >
      < Badge name = "Node.js" style = { { width : 200 } } logoColor = "#eb4034" />
      < Badge name = "YouTube Gaming" label = "Youtube" />
      < Badge name = "Valve" label = "Value Please fix" style = { { padding : 10 } } />
      < Badge name = "Tesla" backgroundColor = "#32a853" />
    </ >
  )
}

ตัวอย่างโครงการบน stackblitz.com

อุปกรณ์ประกอบฉากสำหรับ <Badge />

<Badge name="" /> จำเป็น: สตริง

ชื่อของป้ายที่คุณพยายามใช้เช่น "Instagram"

<Badge label="" /> ตัวเลือก: สตริง

สตริงที่กำหนดเองเพื่อแทนที่คำบนป้ายเช่น "Insta"

<Badge logoColor="" /> ตัวเลือก: สตริง: สี hex

แทนที่สีของโลโก้ที่ค่าเริ่มต้นเป็นสีขาวเช่น "#FFB900"

<Badge backgroundColor="" /> ตัวเลือก: String: hex color

แทนที่สีของพื้นหลังของป้ายเช่น "#00e1ff"

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด