Hướng dẫn react-bootstrap accordion example - Ví dụ về đàn accordion react-bootstrap

Nội dung chính Show

• Gaurav Singhal
• Giới thiệu
• Bắt đầu với React-Bootstrap accordion
• Tích hợp accordion trong thành phần phản ứng
• Chuyển đổi phần tử
• Để cho phép hoạt động mở rộng, bạn cần có một phần tử được người dùng nhấp vào và dựa trên hiệu ứng chuyển đổi, nội dung con tương ứng sẽ được hiển thị.
• Để cho phép hoạt động mở rộng, bạn cần có một phần tử được người dùng nhấp vào và dựa trên hiệu ứng chuyển đổi, nội dung con tương ứng sẽ được hiển thị.
• Chuyển đổi phần tử

Gaurav Singhal

Phát triển web phía trước

Giới thiệu

Accordions có thể được sử dụng để tạo các phần tử được xếp hạng và ẩn/hiển thị nội dung dựa trên các tab có thể thu gọn, theo sau là các phần tử nội dung con của chúng. React không có tập hợp các yếu tố riêng để tích hợp vào thành phần React. Do đó, bạn cần sử dụng một số thư viện phổ biến và thường xuyên được sử dụng như react-bootstrap cung cấp các yếu tố bootstrap cho ứng dụng React.react-bootstrap that provide bootstrap elements for the React app.

Sử dụng react-bootstrap, có một yếu tố gọi là cho phép bạn chuyển đổi nội dung dựa trên sự kiện nhấp chuột. Hướng dẫn này sẽ bao gồm việc thực hiện.react-bootstrap, there is an element called that allows you to toggle content based on a click event. This guide will cover the implementation.

Bắt đầu với React-Bootstrap accordion

React-bootstrap chứa các thành phần bootstrap khác nhau có thể được cắm và chơi cho một ứng dụng React. Điều tương tự áp dụng cho accordion; Một phần của thư viện có thể được nhập từ thư viện và được sử dụng trong thành phần.

Trước khi sử dụng bất kỳ thành phần nào, bạn cần cài đặt nó bằng lệnh NPM dưới đây.

1npm install react-bootstrap
2npm install bootstrap

vỏ bọc

Sau khi cài đặt cả hai thư viện trên, bước tiếp theo là nhập CSS Bootstrap vào tệp gốc của ứng dụng React, tức là

1import "bootstrap/dist/css/bootstrap.min.css";

1import "bootstrap/dist/css/bootstrap.min.css";

1import "bootstrap/dist/css/bootstrap.min.css";

JS

Bây giờ bạn có thể sử dụng bất kỳ thành phần react-bootstrap nào vào ứng dụng React của bạn.react-bootstrap components into your React app.

Tích hợp accordion trong thành phần phản ứng

Sau cấu hình react-bootstrap, bước tiếp theo là trích xuất thành phần accordion và định cấu hình nó. Bạn có thể nhập thành phần accordion như thế này:react-bootstrap configuration, the next step is to extract the accordion component and configure it. You can import the accordion component like this:

1import { Accordion } from "react-bootstrap";

JSX

Thành phần accordion hoạt động trên hai yếu tố khác nhau: chuyển đổi các phần tử và các yếu tố có thể thu gọn.

Chuyển đổi phần tử

Để cho phép hoạt động mở rộng, bạn cần có một phần tử được người dùng nhấp vào và dựa trên hiệu ứng chuyển đổi, nội dung con tương ứng sẽ được hiển thị.

Đối với điều đó, có một yếu tố được sử dụng để thực hiện chuyển đổi bên dưới.

1<Accordion.Toggle as={Card.Header} eventKey="0">
2    TAB 1
3Accordion.Toggle>

JSX

Thành phần accordion hoạt động trên hai yếu tố khác nhau: chuyển đổi các phần tử và các yếu tố có thể thu gọn.

1import "bootstrap/dist/css/bootstrap.min.css";

Chuyển đổi phần tử identifies each toggle element to expand the respective elements once the user clicks on the header.

Để cho phép hoạt động mở rộng, bạn cần có một phần tử được người dùng nhấp vào và dựa trên hiệu ứng chuyển đổi, nội dung con tương ứng sẽ được hiển thị.

Đối với điều đó, có một yếu tố được sử dụng để thực hiện chuyển đổi bên dưới.

1import "bootstrap/dist/css/bootstrap.min.css";

Trong đó

1import "bootstrap/dist/css/bootstrap.min.css";

1import "bootstrap/dist/css/bootstrap.min.css";

1import "bootstrap/dist/css/bootstrap.min.css";

1<Accordion.Collapse eventKey="0">
2    <Card.Body>This is first tab bodyCard.Body>
3Accordion.Collapse>

JSX

Thành phần accordion hoạt động trên hai yếu tố khác nhau: chuyển đổi các phần tử và các yếu tố có thể thu gọn.

1import "bootstrap/dist/css/bootstrap.min.css";

Chuyển đổi phần tử

1import React, { Component } from "react";
2import { Accordion, Card } from "react-bootstrap";
3import "bootstrap/dist/css/bootstrap.min.css";
4
5export class Example1 extends Component {
6    render() {
7        return (
8            <>
9                <div>
10                    <Accordion>
11                        <Card>
12                            <Accordion.Toggle as={Card.Header} eventKey="0">
13                                TAB 1
14                            Accordion.Toggle>
15
16                            <Accordion.Collapse eventKey="0">
17                                <Card.Body>This is first tab bodyCard.Body>
18                            Accordion.Collapse>
19                        Card>
20
21                        <Card>
22                            <Accordion.Toggle as={Card.Header} eventKey="1">
23                                TAB 2
24                            Accordion.Toggle>
25
26                            <Accordion.Collapse eventKey="1">
27                                <Card.Body>This is second tab bodyCard.Body>
28                            Accordion.Collapse>
29                        Card>
30                    Accordion>
31                div>
32            >
33        );
34    }
35}
36
37export default Example1;

JSX

Thành phần accordion hoạt động trên hai yếu tố khác nhau: chuyển đổi các phần tử và các yếu tố có thể thu gọn.. One collapsible accordion is

1import { Accordion } from "react-bootstrap";

1import { Accordion } from "react-bootstrap";

Chuyển đổi phần tử

1import "bootstrap/dist/css/bootstrap.min.css";

Để cho phép hoạt động mở rộng, bạn cần có một phần tử được người dùng nhấp vào và dựa trên hiệu ứng chuyển đổi, nội dung con tương ứng sẽ được hiển thị.

Đối với điều đó, có một yếu tố được sử dụng để thực hiện chuyển đổi bên dưới.

1import { Accordion } from "react-bootstrap";

Trong đó

1import "bootstrap/dist/css/bootstrap.min.css";

1<Accordion defaultActiveKey="2">
2    ...
3Accordion>

JSX

Thành phần accordion hoạt động trên hai yếu tố khác nhau: chuyển đổi các phần tử và các yếu tố có thể thu gọn.

1import { Accordion } from "react-bootstrap";

Chuyển đổi phần tử

Để cho phép hoạt động mở rộng, bạn cần có một phần tử được người dùng nhấp vào và dựa trên hiệu ứng chuyển đổi, nội dung con tương ứng sẽ được hiển thị.

Đối với điều đó, có một yếu tố được sử dụng để thực hiện chuyển đổi bên dưới.react-bootstrap, you can try accordion from other third-party libraries such as

1import { Accordion } from "react-bootstrap";