Các biểu tượng là một phần thiết yếu của Bootstrap Accordions. Chúng đưa ra dấu hiệu trực quan nhanh chóng về trạng thái mở rộng hoặc đóng của đàn accordion. Vì điều này, điều quan trọng là có thể tùy chỉnh các biểu tượng theo hệ thống phong cách của dự án của bạn. Trong bản demo này, tôi sẽ chỉ cho bạn cách kiểm soát màu biểu tượng và tùy chỉnh loại biểu tượng được hiển thị trong đàn accordion
Cách tiếp cận cụ thể mà tôi sẽ thực hiện là cách tiếp cận dựa trên CSS để tùy chỉnh loại và màu biểu tượng. Bản demo trực tiếp của tôi sử dụng phương pháp này. Một cách tiếp cận khác là duy trì trạng thái mở/đóng trong giá trị trạng thái, sau đó hoán đổi các biểu tượng và lớp CSS dựa trên trạng thái. Tôi cũng sẽ cung cấp các đoạn mã cho phương pháp này
Đây là đàn accordion chúng ta sẽ tạo. Nó dựa trên các tài liệu Bootstrap
Có một liên kết Code Sandbox với bản demo Bootstrap Accordion trực tiếp trong phần Tài nguyên
Mục lục
Bootstrap Accordion với các biểu tượng Plus và Minus tùy chỉnh
Đặt các biểu tượng tùy chỉnh trên Accordion là một yêu cầu phổ biến, đặc biệt là biểu tượng dấu cộng và dấu trừ. Tuy nhiên, để làm được điều đó, trước tiên chúng ta cần hiểu Bootstrap đang sử dụng CSS như thế nào để áp dụng các mũi tên lên và xuống mặc định
Trong ảnh chụp màn hình bên dưới, tôi đã chụp DOM và tạo kiểu cho biểu tượng được mở rộng mặc định. Bootstrap sử dụng. Lớp accordion-button
, bộ chọn giả
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const [expanded, setExpanded] = useState[true];
//in the return
setExpanded[!expanded]}>
Accordion Item #1
0 và phần tử giả import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const [expanded, setExpanded] = useState[true];
//in the return
setExpanded[!expanded]}>
Accordion Item #1
1 để áp dụng hình nền và phép biến đổi. Đằng sau hậu trường, điều này được quản lý bởi plugin Bootstrap crash JS[Lưu ý thêm, tôi phải thêm
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const [expanded, setExpanded] = useState[true];
//in the return
setExpanded[!expanded]}>
Accordion Item #1
2 vào mã của mình để hoạt hình hoạt động. ]Để đặt biểu tượng tùy chỉnh, chúng ta cần nhắm mục tiêu cùng một lớp và giả và xóa hình nền. Sau đó, chúng ta có thể sử dụng hình nền hoặc thuộc tính nội dung để thêm biểu tượng của riêng mình. Ví dụ của tôi, tôi muốn sử dụng Font Awesome, vì vậy tôi đã sử dụng thuộc tính nội dung. Xem mã của tôi dưới đây
@import url["//use.fontawesome.com/releases/v5.15.0/css/all.css"];
.accordion-button:not[.collapsed]::after {
content: "\f057";
font-family: "Font Awesome 5 Free";
color: red;
background-image: none;
}
.accordion-button.collapsed::after {
/* content: "\f057"; x*/
/* content: "\f058"; check*/
/* "\f067" plus*/
/* "\f068" minus*/
content: "\f058";
color: green;
font-weight: 400;
font-family: "Font Awesome 5 Free";
background-image: none;
}
Điều này sử dụng CSS để xử lý thay đổi biểu tượng khi thu gọn và mở rộng. Điều này tạo ra một biểu tượng chuyển đổi với rất ít mã và là một cách tiếp cận tuyệt vời. Lưu ý rằng tôi phải nhắm mục tiêu vào
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const [expanded, setExpanded] = useState[true];
//in the return
setExpanded[!expanded]}>
Accordion Item #1
3, thay vì chỉ nhắm mục tiêu vào import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const [expanded, setExpanded] = useState[true];
//in the return
setExpanded[!expanded]}>
Accordion Item #1
4. Tôi đã làm điều này bởi vì Bootstrap đã làm điều đó và để ghi đè kiểu dáng của chúng, tôi phải sử dụng ít nhất một bộ chọn cụ thể như thư viện Bootstrap đã làmTôi đã bao gồm giá trị nội dung cho “cộng” và “trừ”, cũng như “kiểm tra” và “x” như tôi đã sử dụng trong ví dụ của mình. Tôi gặp sự cố khi sử dụng “cộng” và “trừ” với Font Awesome 5 Free
Chuyển đổi các biểu tượng trên Bootstrap Accordion với giá trị trạng thái
Nếu bạn không muốn sử dụng phương pháp CSS, bạn có thể sử dụng phương pháp quản lý trạng thái. React giúp việc này trở nên dễ dàng vì bạn có thể sử dụng useState và onClick
Đầu tiên, tách hình nền mặc định bằng cách sử dụng
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const [expanded, setExpanded] = useState[true];
//in the return
setExpanded[!expanded]}>
Accordion Item #1
0 trên lớp accordion-button
như trên. Sau đó, bạn muốn có một nút như bên dưới [đây chỉ là mã giả, vì vậy hãy thận trọng khi sử dụng]import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const [expanded, setExpanded] = useState[true];
//in the return
setExpanded[!expanded]}>
Accordion Item #1
Xóa phần đệm mặc định trên phần tử
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const [expanded, setExpanded] = useState[true];
//in the return
setExpanded[!expanded]}>
Accordion Item #1
2 và đặt nút thành flex với import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const [expanded, setExpanded] = useState[true];
//in the return
setExpanded[!expanded]}>
Accordion Item #1
3 để có khoảng cách phù hợpĐịnh vị Biểu tượng Bootstrap Accordion Trái và Phải
Theo mặc định, biểu tượng đàn accordion được căn phải. Chúng ta có thể dễ dàng đặt nó thành căn trái bằng cách sử dụng. trước phần tử giả
The bigger problem is that we need to right-align the button element text. I expected I could easily set
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const [expanded, setExpanded] = useState[true];
//in the return
setExpanded[!expanded]}>
Accordion Item #1
4 and solve this…but it didn’t work. Instead, I had to wrap the “Accordion #1” text in a tag and then add
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const [expanded, setExpanded] = useState[true];
//in the return
setExpanded[!expanded]}>
Accordion Item #1
4. I also had to remove some default margin from the tag.
//CSS
.accordion-button.collapsed::before {
content: "\f058";
color: green;
font-weight: 400;
font-family: "Font Awesome 5 Free";
padding-right: 12px;
}
.right-align {
width: 100%;
margin: 0px;
text-align: right;
}
//JS
Accordion #1
Màu biểu tượng Bootstrap Accordion
Việc thêm màu biểu tượng có thể được thực hiện bằng cách nhắm mục tiêu vào
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const [expanded, setExpanded] = useState[true];
//in the return
setExpanded[!expanded]}>
Accordion Item #1
6 và import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const [expanded, setExpanded] = useState[true];
//in the return
setExpanded[!expanded]}>
Accordion Item #1
3. Bạn có thể nhận thấy rằng tôi đã thêm một màu tùy chỉnh vào các biểu tượng trong mã ví dụ trướcMàu biểu tượng, độ dày phông chữ, họ phông chữ và các kiểu dáng khác có thể được thêm nhanh vào đây và sẽ ghi đè lên các giá trị mặc định của Bootstrap. Đây là một ví dụ khác về CSS bên dưới