Thay đổi màu khởi động đàn accordion

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

Bootstrap Accordion với biểu tượng và màu biểu tượng tùy chỉnh

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("https://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àm

Tô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ước

Mà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

Làm cách nào để thay đổi màu của đàn accordion trong Bootstrap?

Làm cách nào để thay đổi màu chuyển đổi trong Bootstrap?

Làm cách nào để thay đổi màu của thanh biểu tượng trong Bootstrap?

Làm cách nào để thay đổi màu nền của vùng chứa trong Bootstrap?