reactstrap
v9.2.3
ส่วนประกอบปฏิกิริยาแบบไร้สัญชาติสำหรับ bootstrap 5
หากคุณใช้ bootstrap 4 คุณจะต้องใช้ ReactStrap v8
ทำตามคำแนะนำ Create-React-App เพื่อเริ่มต้นแล้วทำตาม ReactStrap เวอร์ชันของการเพิ่ม bootstrap
npx create-react-app my-app
cd my-app/
npm start
หรือถ้า NPX (Node> = 6 และ NPM> = 5.2) ไม่พร้อมใช้งาน
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
จากนั้นเปิด http: // localhost: 3000/เพื่อดูแอปของคุณ โครงสร้างเริ่มต้นของแอพของคุณคือการตั้งค่า ถัดไปเรามาเพิ่ม ReactStrap และ Bootstrap
ติดตั้ง ReactStrap และ Bootstrap จาก NPM ReactStrap ไม่รวม Bootstrap CSS ดังนั้นสิ่งนี้จะต้องติดตั้งเช่นกัน:
npm i bootstrap
npm i reactstrap react react-dom
นำเข้า bootstrap CSS ในไฟล์ src/index.js :
import 'bootstrap/dist/css/bootstrap.css' ; นำเข้าส่วนประกอบ ReactStrap ที่ต้องการภายในไฟล์ src/App.js หรือไฟล์ส่วนประกอบที่กำหนดเองของคุณ:
import { Button } from 'reactstrap' ; ตอนนี้คุณพร้อมที่จะใช้ส่วนประกอบ reactStrap ที่นำเข้าภายในลำดับชั้นส่วนประกอบของคุณที่กำหนดไว้ในวิธีการเรนเดอร์ นี่คือตัวอย่าง App.js redone โดยใช้ ReactStrap
ไลบรารีเหล่านี้ไม่ได้รวมกับ ReactStrap และจำเป็นต้องใช้เวลารันไทม์:
ไลบรารีนี้มีส่วนประกอบ bootstrap ที่ตอบสนองซึ่งชอบองค์ประกอบและการควบคุม ห้องสมุดไม่ได้ขึ้นอยู่กับ jQuery หรือ bootstrap javaScript อย่างไรก็ตาม poppers.js ผ่าน React-Popper นั้นพึ่งพาการวางตำแหน่งขั้นสูงของเนื้อหาเช่นคำแนะนำเครื่องมือ, popovers และการเลื่อนออกอัตโนมัติแบบเลื่อนลง
มีแนวคิดหลักที่จะเข้าใจเพื่อใช้ประโยชน์สูงสุดจากห้องสมุดนี้
เนื้อหาของคุณคาดว่าจะถูกแต่งขึ้นผ่าน props.children แทนที่จะใช้อุปกรณ์ประกอบฉากที่มีชื่อเพื่อส่งผ่านส่วนประกอบ
// Content passed in via props
const Example = ( props ) => {
return (
< p > This is a tooltip < TooltipTrigger tooltip = { TooltipContent } > example </ TooltipTrigger > ! </ p >
) ;
}
// Content passed in as children (Preferred)
const PreferredExample = ( props ) => {
return (
< p >
This is a < a href = "#" id = "TooltipExample" > tooltip </ a > example.
< Tooltip target = "TooltipExample" >
< TooltipContent />
</ Tooltip >
</ p >
) ;
}แอตทริบิวต์ในไลบรารีนี้ใช้ในการส่งผ่านรัฐใช้คลาสโมดิฟายเออร์อย่างสะดวกเปิดใช้งานฟังก์ชันการทำงานขั้นสูง (เช่น Tether) หรือรวมองค์ประกอบที่ไม่ใช่เนื้อหาโดยอัตโนมัติ
ตัวอย่าง:
isOpen - สถานะปัจจุบันสำหรับรายการเช่นดรอปดาวน์, ป๊อปโอเวอร์, คำแนะนำเครื่องมือtoggle - การโทรกลับเพื่อสลับไอ isOpen ในส่วนประกอบการควบคุมcolor - ใช้คลาสสี, Ex: <Button color="danger"/>size - สำหรับการควบคุมคลาสขนาด Ex: <Button size="sm"/>tag - ปรับแต่งเอาต์พุตองค์ประกอบโดยผ่านในชื่อองค์ประกอบหรือส่วนประกอบvisually-hidden https://reactstrap.github.io
การค้นหาเอกสารใช้พลังงานจากเอกสารการค้นหาของ Algolia
นี่คือตัวอย่างบางส่วนสำหรับรหัสและกล่องที่คุณสามารถทดลองได้
https://github.com/reactstrap/code-sandbox-examples
ติดตั้งการพึ่งพา:
yarn installรันตัวอย่างที่ http: // localhost: 8080/ด้วย webpack dev server:
yarn startเรียกใช้การทดสอบและรายงานความครอบคลุม:
yarn coverดูการทดสอบ:
yarn test การเปิดตัวสาขา/เวอร์ชัน/โน้ตจะถูกสร้างและบำรุงรักษาโดยอัตโนมัติโดยการดำเนินการ GITHUB ที่ได้รับการปลดปล่อย เมื่อคุณพร้อมที่จะเผยแพร่การเปิดตัวเพียงแค่รวมสาขารุ่น การเปิดตัวจะถูกสร้างขึ้นแพ็คเกจใหม่จะถูกเผยแพร่และเอกสารที่อัปเดตจะถูกนำไปใช้กับ https://reactstrap.github.io/
องค์กรและโครงการที่ใช้ reactstrap
reactstrap พร้อมเพจการเรียงลำดับการกรองการจัดกลุ่มการเลือกการแก้ไขและคุณสมบัติการเลื่อนเสมือนreactstrap ที่แสดงภาพข้อมูลโดยใช้ประเภทซีรีส์ที่หลากหลายรวมถึงแถบ, เส้น, พื้นที่, กระจาย, พายและอื่น ๆreactstrap ของคุณรวมเข้าด้วยกันอย่างราบรื่นโดยใช้ Formikส่ง PR เพื่อเพิ่มในรายการนี้!
กำลังมองหาการสร้างเอกสารและเผยแพร่ส่วนประกอบที่นำกลับมาใช้ใหม่ได้ที่สร้างขึ้นบน reactstrap หรือไม่? ลองใช้ https://github.com/reactstrap/component-template เพื่อเริ่มโครงการของคุณ!
