Cách sử dụng bootstrap-select trong phản ứng js

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

node-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

npx 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

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Hoặc sử dụng Sợi

r

yarn 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

import 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

export 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 (
 <CDBContainer>
 <CDBSelect2 options={option} iconBrand selected="Choose an option" color="white" />
 CDBContainer>
 );
};

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

import './App.css';
import Select from './select';
import Reactdom from 'react-dom';

function App() {
  return (
    <div className="App">
      <Select />
    div>
  );
}

Reactdom.render(<App />, 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 🙂

Làm cách nào để sử dụng trình đơn thả xuống bootstrap trong React js?

Làm cách nào để nhận giá trị từ trình đơn thả xuống React bootstrap?

Làm cách nào để sử dụng trình đơn thả xuống trong phản ứng js?