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

หมากฝรั่ง

โครงการนี้มีองค์ประกอบตอบสนอง JavaScript ที่สามารถนำกลับมาใช้ใหม่ได้ซึ่งคุณสามารถนำเข้าสู่โครงการของคุณได้

ข้อกำหนดเบื้องต้น

หมากฝรั่งจะต้องใช้กับระบบออกแบบ Gumgum (คอนกรีต) ซึ่งจัดการกับสไตล์ทั้งหมดรวมถึงเขี้ยว

เพิ่มการออกแบบ Gumgum และ Sass ลงในโครงการของคุณ

ดูเอกสารประกอบระบบการออกแบบคอนกรีตสำหรับธีมยูทิลิตี้ CSS และอื่น ๆ

เอกสาร

ดูเอกสารประกอบสำหรับไลบรารีนี้และส่วนประกอบของมัน

การติดตั้ง

ในการเพิ่มเวอร์ชันเฉพาะคุณสามารถใช้ yarn add [email protected] (แทนที่ 1.0.0 ด้วยรุ่นใดก็ได้ที่คุณต้องการหรือละเว้นเพื่อรับเวอร์ชันล่าสุด)

รุ่นปัจจุบันและรุ่นก่อนหน้าสามารถพบได้ใน changelog.md

การใช้งาน

ห้องสมุดส่งออกส่วนประกอบเป็นโมดูล ES ดังนั้นคุณสามารถนำเข้าเฉพาะสิ่งที่คุณต้องการตัวอย่างเช่น: 

 import Button from 'gumdrops/Button';
import Badge from 'gumdrops/Badge';
import Toggle from 'gumdrops/Toggle';

ติดตามเอกสารเพื่อใช้ส่วนประกอบของคุณด้วยอุปกรณ์ประกอบฉากที่ถูกต้อง

สำหรับการเข้ากันได้ retrocompatible จะมีการจัดกลุ่ม CommonJS มันมีห้องสมุดทั้งหมดและสามารถใช้กับ: 

 const gumdrops = require('gumdrops');
// Or
import gumdrops from 'gumdrops';

เพื่อความสะดวกและการใช้งานโดยตรงในเบราว์เซอร์นอกจากนี้ยังมี UMD ที่ให้ไว้ใน: 

 node_modules/gumdrops/gumdrops.umd.js

การทดสอบการแก้ไขปัญหา

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

  • สำหรับ JEST : JEST ใช้การใช้งานของตัวเองและจะพยายามแยกวิเคราะห์ไฟล์ด้วยและ Babel-jest โดยค่าเริ่มต้นจะไม่สนใจ Node_Modules ซึ่งจะส่งผลให้เกิดข้อผิดพลาดทางไวยากรณ์จากคำสั่งนำเข้า เพิ่มบรรทัดถัดไปในการกำหนดค่า jest ของคุณเพื่อที่จะละเว้นทุกอย่างใน node_modules ยกเว้นไลบรารีนี้: 

     "transformIgnorePatterns": ["/node_modules/(?!gumdrops)"]

  • สำหรับ Mocha + Webpack : เป็นไปได้มากที่การกำหนดค่ามอคค่าและ Webpack ของคุณจะไม่สนใจไดเรกทอรี Node_Modules เพื่อป้องกันข้อผิดพลาดทางไวยากรณ์ใด ๆ ให้โหลด Babel ผ่านไฟล์การกำหนดค่าแทนการโทร --compilers js:babel-register หรือ --require babel-register โดยตรง

เนื้อหาไฟล์สามารถทำได้ง่ายเท่า: 

 // testSetup.js
require('babel-register')({
    ignore: /node_modules/(?!gumdrops)/
});

// Import it into mocha or mocha-webpack:
--require ./testSetup.js

ข้อกำหนดเบื้องต้นสำหรับการดำเนินโครงการในพื้นที่

  • Git และ Git Flow
  • nodejs/npm & yarn: เวอร์ชันขั้นต่ำที่ต้องการ - เราได้ทดสอบกับเวอร์ชันต่อไปนี้ - node: ^16.16.0, npm: ^5.5.1, yarn ^1.2.1
  • ติดตั้งตัวตรวจสอบ ESLINT และสวยกว่าในบรรณาธิการที่คุณเลือก เรามีไฟล์การกำหนดค่าบนรูทของโครงการ. .eslinrc และ .prettierrc มีเบ็ดล่วงหน้าที่จะเรียกใช้สคริปต์ที่สวยงามบนไฟล์

Running Book ในพื้นที่ 

 yarn # install dependencies
yarn run storybook

จากนั้นเปิด http://localhost:6006 บนเบราว์เซอร์ของคุณ สำหรับข้อมูลเพิ่มเติมโปรดเยี่ยมชม React Storybook Repo

การบริจาค

โปรดดูที่ข้อมูล MD สำหรับข้อมูลเกี่ยวกับการมีส่วนร่วมในโครงการนี้

ผู้มีส่วนร่วม

ขอขอบคุณเป็นพิเศษสำหรับผู้มีส่วนร่วมของเราทุกคน! บวกกับผู้ที่มีส่วนร่วมก่อนที่เราจะย้ายไปที่ GitHub: David Mejorado, Jose Santos, Mike Watt

ใบอนุญาต

Apache 2.0

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

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