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

ชุด UI ของ WPDS

ชุด UI ของ Washington Post Design Kit (WPDS) เป็นโมโนรีเปาของชุด UI ของเราและเว็บไซต์เอกสารของเรา

กราฟการพึ่งพา

ตัวอย่างของกราฟการพึ่งพาสำหรับปุ่มนำเข้าจาก KIT 

 ผังงาน LR
A ["@WashingtonPost/WPDS-theMe"]-> B ["@WashingtonPost/WPDS-UI-KIT"]
c ["@washingtonpost/wpds-button"]-> b ["@washingtonpost/wpds-ui-kit"]
A ["@WashingtonPost/WPDS-theMe"]-> C ["@WashingtonPost/WPDS-BUTTON"]
คลิก "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/theme"
คลิก b "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/kit"
คลิก c "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/button"
การโหลด

โครงสร้างโครงการนี้ได้รับแรงบันดาลใจอย่างมากจาก Chakra UI, Radix UI และอื่น ๆ

การนำเข้าครั้งเดียวสำหรับผู้ใช้แพ็คเกจจำนวนมากที่นำเข้าใน @washingtonpost/wpds-ui-kit 

npm i @washingtonpost/wpds-ui-kit

ข้อมูลเพิ่มเติม

  • อ่านเกี่ยวกับวิธีการสร้างฟีเจอร์สำหรับไซต์ React ของคุณโดยใช้ชุด UI ของเราบนคู่มือ React ของเรา
  • หากคุณต้องการมีส่วนร่วมในชุด WPDS UI ของเราโปรดดูเอกสารการบริจาค
  • อย่าลังเลที่จะติดต่อ #WPDS ใน Slack หากคุณมีคำถามหรือพบปัญหาใด ๆ
  • สำรวจไซต์เอกสารสำหรับตัวอย่างการใช้งานและเอกสารเพิ่มเติมเกี่ยวกับแต่ละองค์ประกอบ นอกจากนี้คุณยังสามารถค้นหาทรัพยากรเพิ่มเติมภายใต้ทรัพยากรคู่มือและหน้าสนับสนุน
  • นอกจากนี้ยังมีเว็บไซต์นิทานที่ใช้สำหรับการพัฒนาส่วนประกอบเท่านั้น หากคุณกำลังมองหาตัวอย่างรหัสหรือข้อมูลเกี่ยวกับวิธีการใช้องค์ประกอบเฉพาะโปรดดูที่ build.washingtonpost.com

การอัพเกรด

  • ก่อนหน้า v1.5.1 ส่วนประกอบ Button มี density: "compact" หลังจากการอัพเกรดค่าเริ่มต้นจะมี density: "default" ดังนั้นคุณจะต้องตรวจสอบปุ่มใด ๆ ที่ใช้ในรหัสของคุณสำหรับการถดถอยและใช้ density: "compact" ตามต้องการ 
     < Button
  density = "compact"
  . . .
  • ก่อนหน้า v0.12, globalStyles มีการเปลี่ยนผ่านไปทั่วโลกไปยังคุณสมบัติ CSS ทั้งหมดในองค์ประกอบทั้งหมด หลังจากอัพเกรดองค์ประกอบส่วนประกอบใด ๆ ที่อาศัยการเปลี่ยนแปลงนั้นจะต้องใช้หนึ่งในเครื่องโดยใช้ตัวแปรธีม WPDS 
     transition : theme . transitions . allFast ,
// or
transition : `background ${ theme . transitions . fast } ${ theme . transitions . inOut `
  • ก่อนหน้า V0.15 globalStyles มีการกำจัดอัตรากำไรขั้นต้นและช่องว่างภายในทั่วโลกสำหรับองค์ประกอบทั้งหมด หลังจากอัพเกรดองค์ประกอบส่วนประกอบใด ๆ ที่ต้องอาศัยการเว้นระยะห่างนั้นจะต้องเพิ่มกฎการเว้นวรรคด้วยสไตล์ท้องถิ่นกับส่วนประกอบ

ใบอนุญาต

โครงการนี้ได้รับการพัฒนาภายใต้ใบอนุญาต MIT

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