Thành phần React Bootstrap Select là một điều khiển biểu mẫu hiển thị danh sách nhiều giá trị có thể thu gọn, có thể được sử dụng trong biểu mẫu, menu hoặc khảo sát sau khi nhấp
Chọn cho phép bạn sử dụng các phím mũi tên ↑ ↓ để điều hướng qua các tùy chọn và sử dụng phím↵
để chọn tùy chọn cần thiết [hoạt động với lựa chọn có trạng thái]. Chúng ta sẽ xem xét cách tạo vùng chọn bằng Contrast
Tương phản, còn được gọi là CDBReact là một thư viện phản ứng, là một bộ Giao diện người dùng thanh lịch với hỗ trợ bootstrap đầy đủ có các thành phần có thể tái sử dụng để xây dựng các trang web và ứng dụng web đáp ứng, ưu tiên thiết bị di động
điều kiện tiên quyết
Bootstrap Select phản ứng sẽ được xây dựng bằng React, Bootstrap và CDBReact. Bạn không cần phải có bất kỳ kiến thức nào trước đó về CDBReact, nhưng những điều sau đây là cần thiết
- Kiến thức JavaScript
- Kiến thức phản ứng cơ bản
- Kiến thức Bootstrap cơ bản
- đã cài đặt NPM
Trang chọn với biểu tượng chúng ta sẽ xây dựng trông giống như hình ảnh bên dưới
Cài đặt
Trước tiên, hãy kiểm tra xem bạn đã cài đặt nút chưa. Để thực hiện việc này, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn
Mã số
r
Sao chépnode-v
Điều này sẽ hiển thị cho bạn phiên bản hiện tại của nút bạn đã cài đặt trên máy của mình. Nếu bạn chưa cài đặt nút, hãy tải xuống tại đây. Cài đặt nút cũng cài đặt npm trên PC của bạn, nhưng bạn vẫn có thể xác nhận bằng cách sử dụng npm-v
. Bây giờ chúng ta đã cài đặt nút, chúng ta có thể bắt đầu dự án React của mình bằng cách đi tới thư mục chúng ta chọn và chạy
Mã số
r
Sao chépnpx create-react-app select-app
Tôi đã đặt tên cho ứng dụng chọn dự án, nhưng bạn có thể sử dụng bất kỳ tên nào bạn chọn
Chọn bằng biểu tượng
Trong tương lai, chúng ta cần tạo một tệp có tên select. js sẽ chứa thành phần đã chọn của chúng tôi. Sau đó, chúng tôi có thể Nhập các thành phần được chọn mà chúng tôi sẽ sử dụng. Bạn phải tải xuống phiên bản tương phản chuyên nghiệp để sử dụng lựa chọn với các biểu tượng
Cài đặt CDBReact-pro
Trước khi chúng tôi cài đặt CDBReact, trước tiên chúng tôi phải tải xuống phiên bản pro tại đây. Sau đó, chúng ta có thể tiếp tục cài đặt chúng trong dự án của mình. Bạn nên thêm tệp vào thư mục gốc của dự án bằng cách chạy
r
Sao chépnpm install --save ./path-to-the-cdbreact-pro-tgz-file
Hoặc sử dụng Sợi
r
Sao chépyarn add ./path-to-the-cdbreact-pro-tgz-file
Lưu ý rằng chúng tôi không cần cài đặt bootstrap hoặc thêm nó vào bất kỳ đâu trong dự án của mình vì CDBReact sẽ làm điều đó cho chúng tôi khi cài đặt
Mã số
jsx
Sao chépimport React, { useState } from 'react';
import { CDBSelect, CDBContainer } from 'cdbreact-pro';
Ở đây, chúng tôi đã nhập chức năng useState từ React, bao gồm CDBSelect và CDBContainer từ tương phản. Bây giờ chúng ta có thể tạo vùng chọn bằng các biểu tượng và thêm kiểu dáng cho chúng theo sở thích của chúng ta. Để sử dụng lựa chọn Reac-bootstrap với các biểu tượng, bạn cần tải xuống phiên bản tương phản chuyên nghiệp
Mã số
jsx
Sao chépexport const Select = [] => {
const [option] = useState[[
{
text: 'Select Option',
icon: 'stack-overflow',
},
{
text: 'Another Option',
icon: 'reddit',
},
{
text: 'Option 3',
icon: 'instagram',
},
{
text: 'Option 4',
},
{
text: 'Last Option',
},
]];
return [
];
};
export default Select;
Thành phần chọn được tạo trong đoạn mã trên và các kiểu và biểu tượng khác nhau được thêm vào. Hãy để chúng tôi nhập thành phần chọn đã tạo vào thành phần ứng dụng của chúng tôi
Mã số
jsx
Sao chépimport './App.css';
import Select from './select';
import Reactdom from 'react-dom';
function App[] {
return [
];
}
Reactdom.render[, document.getElementById['root']];
Trang của chúng ta sẽ trông như thế này
Một lựa chọn React Bootstrap sử dụng độ tương phản khá đơn giản để xây dựng và cho phép bạn sử dụng một số công cụ, bao gồm tạo kiểu bootstrap mà không cần cài đặt bootstrap để tạo lựa chọn của bạn bằng các biểu tượng
Tài nguyên
CDBReact Chọn Tài liệu
Liên kết đến mã trên github
Nhận độ tương phản Pro
Xây dựng các dự án hiện đại bằng Bootstrap 5 và Contrast
Cố gắng tạo các thành phần và trang cho ứng dụng web hoặc trang web từ đầu trong khi duy trì giao diện Người dùng hiện đại có thể rất tẻ nhạt. Đây là lý do tại sao chúng tôi tạo ra Độ tương phản, để giúp giảm đáng kể lượng thời gian chúng tôi dành cho việc đó. để chúng ta có thể tập trung xây dựng một số khía cạnh khác của dự án.
Contrast Bootstrap PRO bao gồm Thư viện Bộ giao diện người dùng cao cấp có hơn 10000 biến thể thành phần. Mẫu này thậm chí còn đi kèm với mẫu quản trị riêng bao gồm 5 bảng điều khiển dành cho quản trị viên và hơn 23 trang quản trị và trang đa năng bổ sung để xây dựng hầu hết mọi loại trang web hoặc ứng dụng web.
Xem bản demo và tìm hiểu thêm về Contrast Bootstrap Pro bằng cách nhấp vào đây.
bài viết liên quan
Xây dựng và tạo mã trực quan cho giao diện người dùng của bạn
Sử dụng Windframe để xây dựng trang web một cách trực quan trong vài phút bằng cách sử dụng tailwind css
Tạo mã HTML, Angular, React, Vue cho trang web của bạn một cách nhanh chóng và tốn ít thời gian hơn cho việc định tâm các div 🙂