React danh sách có thể cuộn bootstrap

Question

        
            
            import React from 'react';
            import { MDBDatatable } from 'mdb-react-ui-kit';
    
            export default function App() {
              const basicData = {
                columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
                rows: [
                  ['Tiger Nixon', 'System Architect', 'Edinburgh', '61', '2011/04/25', '$320,800'],
                  ['Garrett Winters', 'Accountant', 'Tokyo', '63', '2011/07/25', '$170,750'],
                  ['Ashton Cox', 'Junior Technical Author', 'San Francisco', '66', '2009/01/12', '$86,000'],
                  ['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '22', '2012/03/29', '$433,060'],
                  ['Airi Satou', 'Accountant', 'Tokyo', '33', '2008/11/28', '$162,700'],
                  ['Brielle Williamson', 'Integration Specialist', 'New York', '61', '2012/12/02', '$372,000'],
                  ['Herrod Chandler', 'Sales Assistant', 'San Francisco', '59', '2012/08/06', '$137,500'],
                  ['Rhona Davidson', 'Integration Specialist', 'Tokyo', '55', '2010/10/14', '$327,900'],
                  ['Colleen Hurst', 'Javascript Developer', 'San Francisco', '39', '2009/09/15', '$205,500'],
                  ['Sonya Frost', 'Software Engineer', 'Edinburgh', '23', '2008/12/13', '$103,600'],
                  ['Jena Gaines', 'Office Manager', 'London', '30', '2008/12/19', '$90,560'],
                  ['Quinn Flynn', 'Support Lead', 'Edinburgh', '22', '2013/03/03', '$342,000'],
                  ['Charde Marshall', 'Regional Director', 'San Francisco', '36', '2008/10/16', '$470,600'],
                  ['Haley Kennedy', 'Senior Marketing Designer', 'London', '43', '2012/12/18', '$313,500'],
                ],
              };

              return (
                
              );
            }

Khi được triển khai thành công, nhóm điều hướng hoặc danh sách của bạn sẽ cập nhật tương ứng, di chuyển lớp


  Navbar
  
    Item 1
    
      Item 1-1
      Item 1-2
    
    Item 2
    Item 3
    
      Item 3-1
      Item 3-2
    
  



  
Item 1
  ...
 Nội dung chính Show
 Ví dụ với nhóm danh sách
Cách sử dụng
Thông qua thuộc tính dữ liệu
Qua JavaScript
phương pháp
Tùy chọn
Làm cách nào để tạo danh sách có thể cuộn được trong Bootstrap?
Làm cách nào để sử dụng Bootstrap Scrollspy trong React?
Làm cách nào để sử dụng trình đơn thả xuống Bootstrap trong React?
Làm cách nào để nhận giá trị từ trình đơn thả xuống React Bootstrap?
 
  Item 1-1
  ...
  Item 1-2
  ...
  Item 2
  ...
  Item 3
  ...
  Item 3-1
  ...
  Item 3-2
  ...

2 từ mục này sang mục tiếp theo dựa trên các mục tiêu được liên kết của chúng

Nếu bạn đang tạo vùng chứa có thể cuộn được (không phải ), hãy đảm bảo có bộ


  Navbar
  
    Item 1
    
      Item 1-1
      Item 1-2
    
    Item 2
    Item 3
    
      Item 3-1
      Item 3-2
    
  



  
Item 1
  ...
  Item 1-1
  ...
  Item 1-2
  ...
  Item 2
  ...
  Item 3
  ...
  Item 3-1
  ...
  Item 3-2
  ...

3 và


  Navbar
  
    Item 1
    
      Item 1-1
      Item 1-2
    
    Item 2
    Item 3
    
      Item 3-1
      Item 3-2
    
  



  
Item 1
  ...
  Item 1-1
  ...
  Item 1-2
  ...
  Item 2
  ...
  Item 3
  ...
  Item 3-1
  ...
  Item 3-2
  ...

4 được áp dụng cho vùng chứa đó—cùng với một


  Navbar
  
    Item 1
    
      Item 1-1
      Item 1-2
    
    Item 2
    Item 3
    
      Item 3-1
      Item 3-2
    
  



  
Item 1
  ...
  Item 1-1
  ...
  Item 1-2
  ...
  Item 2
  ...
  Item 3
  ...
  Item 3-1
  ...
  Item 3-2
  ...

5 để đảm bảo quyền truy cập bàn phím

Cuộn khu vực bên dưới thanh điều hướng và xem thay đổi lớp đang hoạt động. Các mục thả xuống cũng sẽ được đánh dấu

tiêu đề đầu tiên

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu

tiêu đề thứ hai

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu

tiêu đề thứ ba

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu

tiêu đề thứ tư

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu

tiêu đề thứ năm

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu


  Navbar
  
    
      First
    
    
      Second
    
    
      Dropdown
      
        Third
        Fourth
        
        Fifth
      
    
  


  
First heading
  ...
  Second heading
  ...




  Third heading
  ...
  Fourth heading
  ...
  Fifth heading
  ...

Scrollspy cũng hoạt động với các


  Navbar
  
    Item 1
    
      Item 1-1
      Item 1-2
    
    Item 2
    Item 3
    
      Item 3-1
      Item 3-2
    
  



  
Item 1
  ...
  Item 1-1
  ...
  Item 1-2
  ...
  Item 2
  ...
  Item 3
  ...
  Item 3-1
  ...
  Item 3-2
  ...

6 lồng nhau. Nếu một


  Navbar
  
    Item 1
    
      Item 1-1
      Item 1-2
    
    Item 2
    Item 3
    
      Item 3-1
      Item 3-2
    
  



  
Item 1
  ...
  Item 1-1
  ...
  Item 1-2
  ...
  Item 2
  ...
  Item 3
  ...
  Item 3-1
  ...
  Item 3-2
  ...

6 lồng nhau là


  Navbar
  
    Item 1
    
      Item 1-1
      Item 1-2
    
    Item 2
    Item 3
    
      Item 3-1
      Item 3-2
    
  



  
Item 1
  ...
  Item 1-1
  ...
  Item 1-2
  ...
  Item 2
  ...
  Item 3
  ...
  Item 3-1
  ...
  Item 3-2
  ...

2, cha mẹ của nó cũng sẽ là


  Navbar
  
    Item 1
    
      Item 1-1
      Item 1-2
    
    Item 2
    Item 3
    
      Item 3-1
      Item 3-2
    
  



  
Item 1
  ...
  Item 1-1
  ...
  Item 1-2
  ...
  Item 2
  ...
  Item 3
  ...
  Item 3-1
  ...
  Item 3-2
  ...

2. Cuộn khu vực bên cạnh thanh điều hướng và xem thay đổi lớp đang hoạt động

Mục 1

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu

Mục 1-1

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu

Mục 1-2

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu

Mục 2

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu

Mục 3

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu

Mục 3-1

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu

Mục 3-2

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu


  Navbar
  
    Item 1
    
      Item 1-1
      Item 1-2
    
    Item 2
    Item 3
    
      Item 3-1
      Item 3-2
    
  



  
Item 1
  ...
  Item 1-1
  ...
  Item 1-2
  ...
  Item 2
  ...
  Item 3
  ...
  Item 3-1
  ...
  Item 3-2
  ...

Ví dụ với nhóm danh sách

Scrollspy cũng hoạt động với


  Item 1
  Item 2
  Item 3
  Item 4


  
Item 1
  ...
  Item 2
  ...
  Item 3
  ...
  Item 4
  ...

0s. Cuộn khu vực bên cạnh nhóm danh sách và xem sự thay đổi của lớp đang hoạt động

Mục 1

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu

Mục 2

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu

Mục 3

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu

Mục 4

Đây là một số nội dung giữ chỗ cho trang scrollspy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được đánh dấu. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và đánh dấu


  Item 1
  Item 2
  Item 3
  Item 4


  
Item 1
  ...
  Item 2
  ...
  Item 3
  ...
  Item 4
  ...

Cách sử dụng

Thông qua thuộc tính dữ liệu

Để dễ dàng thêm hành vi scrollspy vào điều hướng thanh trên cùng của bạn, hãy thêm


  Item 1
  Item 2
  Item 3
  Item 4


  
Item 1
  ...
  Item 2
  ...
  Item 3
  ...
  Item 4
  ...

1 vào thành phần bạn muốn theo dõi (thông thường nhất, đây sẽ là ). Sau đó, thêm thuộc tính


  Item 1
  Item 2
  Item 3
  Item 4


  
Item 1
  ...
  Item 2
  ...
  Item 3
  ...




  Item 4
  ...

2 với ID hoặc lớp của phần tử gốc của bất kỳ thành phần Bootstrap


  Navbar
  
    Item 1
    
      Item 1-1
      Item 1-2
    
    Item 2
    Item 3
    
      Item 3-1
      Item 3-2
    
  



  
Item 1
  ...
  Item 1-1
  ...
  Item 1-2
  ...
  Item 2
  ...
  Item 3
  ...
  Item 3-1
  ...
  Item 3-2
  ...

6 nào


  ...
  
    

      ...
    
  
  ...

Qua JavaScript

Sau khi thêm position: relative; vào CSS của bạn, hãy gọi scrollspy qua JavaScript

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Yêu cầu mục tiêu ID có thể phân giải

Liên kết thanh điều hướng phải có các mục tiêu id có thể phân giải. Ví dụ, một


  Item 1
  Item 2
  Item 3
  Item 4


  
Item 1
  ...
  Item 2
  ...
  Item 3
  ...
  Item 4
  ...

5 phải tương ứng với một cái gì đó trong DOM như

.

Các phần tử mục tiêu không hiển thị sẽ bị bỏ qua và các mục điều hướng tương ứng của chúng sẽ không bao giờ được tô sáng

phương pháp

Làm tươi

Khi sử dụng scrollspy kết hợp với việc thêm hoặc xóa các phần tử khỏi DOM, bạn sẽ cần gọi phương thức làm mới như vậy

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

vứt bỏ

Phá hủy scrollspy của một phần tử. (Xóa dữ liệu được lưu trữ trên phần tử DOM)

getInstance

Phương thức tĩnh cho phép bạn lấy phiên bản scrollspy được liên kết với phần tử DOM

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

Phương thức tĩnh cho phép bạn lấy đối tượng scrollspy được liên kết với phần tử DOM hoặc tạo một đối tượng mới trong trường hợp nó chưa được khởi tạo

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Tùy chọn

Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào


  Item 1
  Item 2
  Item 3
  Item 4


  
Item 1
  ...
  Item 2
  ...
  Item 3
  ...
  Item 4
  ...

6, như trong


  Item 1
  Item 2
  Item 3
  Item 4


  
Item 1
  ...
  Item 2
  ...
  Item 3
  ...
  Item 4
  ...

7

Làm cách nào để tạo danh sách có thể cuộn được trong Bootstrap?

Để dễ dàng thêm hành vi cuộn vào điều hướng thanh trên cùng của bạn, thêm data-bs-spy="scroll" vào thành phần bạn muốn theo dõi (most typically this would be the ). Then add the data-bs-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

Làm cách nào để sử dụng Bootstrap Scrollspy trong React?

Thêm phụ thuộc. sử dụng npm. npm tôi phản ứng-scrollspy. .

Create your HTML sections.

Bài Viết Liên Quan

Bao cáo đầu tư mua đất để làm văn phòng năm 2024