reactstrap
Các Thành phần React Stateless cho Bootstrap 5.
Nếu bạn đang sử dụng Bootstrap 4, bạn cần sử dụng Reactstrap v8
Bắt đầu
Theo đường dẫn create-react-app instructions để bắt đầu và sau đó là phiên bản reactstrap của việc thêm bootstrap.
tl;dr
npx create-react-app my-app
cd my-app/
npm start
hoặc, nếu npx (Node >= 6 và npm >= 5.2 ) không có sẵn
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
Sau đó mở http://localhost:3000/ để xem ứng dụng của bạn. Cấu trúc ban đầu của ứng dụng của bạn đã được thiết lập. Tiếp theo, hãy thêm reactstrap và bootstrap.
Thêm Bootstrap
Cài đặt reactstrap và Bootstrap từ NPM. Reactstrap không bao gồm Bootstrap CSS nên điều này cần phải được cài đặt thêm:
npm i bootstrap
npm i reactstrap react react-dom
Nhập Bootstrap CSS trong tệp src/index.js:
import 'bootstrap/dist/css/bootstrap.css';
Nhập các thành phần reactstrap cần thiết trong tệp src/App.js hoặc các tệp thành phần tùy chỉnh của bạn:
import { Button } from 'reactstrap';
Bây giờ bạn đã sẵn sàng sử dụng các thành phần reactstrap đã nhập trong cấu trúc thành phần của bạn được định nghĩa trong phương thức render. Dưới đây là một ví dụ App.js được thực hiện lại bằng reactstrap.
Các Thư viện phụ thuộc
Các Phụ thuộc Cần Thiết
Các thư viện này không được đóng gói cùng với Reactstrap và cần thiết khi chạy:
Về Dự án
Thư viện này chứa các thành phần React Bootstrap ưa thích sự kết hợp và kiểm soát. Thư viện không phụ thuộc vào jQuery hoặc javascript Bootstrap. Tuy nhiên, Poppers.js thông qua react-popper được sử dụng để đặt vị trí nâng cao của nội dung như Tooltips, Popovers và Dropdown tự động xoay.
Có một số khái niệm cốt lõi cần hiểu để tận dụng tối đa thư viện này.
Nội dung của bạn được dự kiến sẽ được tạo ra thông qua props.children thay vì sử dụng props có tên để truyền vào các thành phần.
// 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>
);
}
Thuộc tính trong thư viện này được sử dụng để truyền vào trạng thái, thường xuyên áp dụng các lớp sửa đổi một cách tiện lợi, bật chức năng nâng cao (như tether) hoặc tự động bao gồm các phần tử không dựa trên nội dung.
Ví dụ:
isOpen– trạng thái hiện tại cho các mục như dropdown, popover, tooltiptoggle– gọi lại để chuyển đổiisOpentrong thành phần điều khiểncolor– áp dụng các lớp màu, ví dụ:<Button color="danger"/>size– để kiểm soát các lớp kích thước. ví dụ:<Button size="sm"/>tag– tùy chỉnh đầu ra thành phần bằng cách truyền vào tên phần tử hoặc thành phần- props dựa trên boolean (thuộc tính) khi có thể để có các lớp kiểu thay thế hoặc nội dung “visually-hidden”
Documentation
Tìm kiếm tài liệu được cung cấp bởi Algolia’s DocSearch.
CodeSandbox Examples
Dưới đây là một số ví dụ sẵn sàng cho CodeSandbox mà bạn có thể thử nghiệm.
https://github.com/reactstrap/code-sandbox-examples
Đóng góp
Phát triển
Cài đặt các phụ thuộc:
yarn install
Chạy ví dụ tại http://localhost:8080/ với máy chủ phát triển webpack:
yarn start
Chạy các bài kiểm tra và báo cáo phủ sóng:
yarn cover
Xem các bài kiểm tra:
yarn test
Phát hành
Các nhánh/phân loại/ghi chú về phiên bản phát hành sẽ tự động được tạo ra và duy trì bởi hành động github của release-please. Khi bạn sẵn sàng xuất bản phiên bản, chỉ cần ghép nhánh phát hành. Phiên bản mới sẽ được tạo ra, gói mới sẽ được xuất bản và tài liệu cập nhật sẽ được triển khai tới https://reactstrap.github.io/.
Trong thực tế
Tổ chức và dự án sử dụng reactstrap
- airframe-react – demo – Airframe cung cấp tất cả các thành phần mà một nhà phát triển cần để xây dựng ứng dụng web tải dữ liệu bằng React.
- component-template
- video-react
- CoreUI-Free-Bootstrap-Admin-Template – demo
- Admin dashboard example app built with reactstrap – demo
- DevExtreme React Grid – Đây là một lưới dữ liệu không có trạng thái được xây dựng trên nền tảng
reactstrapvới tính năng phân trang, sắp xếp, lọc, nhóm, chọn, chỉnh sửa và cuộn ảo. - DevExtreme React Chart – Một biểu đồ được xây dựng trên nền tảng
reactstrapđể trực quan hóa dữ liệu bằng cách sử dụng nhiều loại chuỗi khác nhau, bao gồm thanh, đường, khu vực, phân tán, bánh, và nhiều loại khác. - reactstrap-scrollspy – demo
- formstrap – demo – Hãy để thành phần nhập
reactstrapcủa bạn tích hợp một cách mượt mà bằng cách sử dụngFormik - Jimu UI – demo – Thư viện giao diện người dùng cho nền tảng ánh xạ ArcGIS Experience Builder.
Gửi một PR để thêm vào danh sách này!
Bạn đang muốn xây dựng, tài liệu và xuất bản các thành phần có thể tái sử dụng được xây dựng trên nền tảng reactstrap không? Hãy xem xét sao chép https://github.com/reactstrap/component-template để khởi đầu dự án của bạn!
Chi tiết tải về:
Tác giả: reactstrap
Nguồn: https://github.com/reactstrap/reactstrap
Giấy phép: MIT license
