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 Show
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 0 và phần tử giả 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 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
Đ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 3, thay vì chỉ nhắm mục tiêu vào 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áiNế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 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)
Xóa phần đệm mặc định trên phần tử 2 và đặt nút thành flex với 3 để có khoảng cách phù hợpĐịnh vị Biểu tượng Bootstrap Accordion Trái và PhảiTheo 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 4 and solve this…but it didn’t work. Instead, I had to wrap the “Accordion #1” text in a tag and then add 4. I also had to remove some default margin from the tag.
Màu biểu tượng Bootstrap AccordionViệ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 6 và 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 Làm cách nào để thay đổi màu của đàn accordion trong Bootstrap?Sử dụng các lớp sau cho màu nền để tạo đàn accordion có màu. . bg-lớp tiểu học. Lớp này được sử dụng để thêm màu xanh cho thành phần bg-lớp trung học. Lớp này được sử dụng để thêm màu xám cho thành phần lớp bg-thành công. Lớp này được sử dụng để thêm màu xanh lục cho thành phần Làm cách nào để thay đổi màu chuyển đổi trong Bootstrap?Trong Bootstrap 4, màu nền của công tắc bật/tắt là màu xanh lam. Màu này có thể được thay đổi bằng cách thao tác với lớp đầu vào kiểm soát tùy chỉnh .
Làm cách nào để thay đổi màu của thanh biểu tượng trong Bootstrap?Nhưng nếu bạn muốn thay đổi màu tiêu chuẩn của biểu tượng Bootstrap thì sao? . Vì vậy, điều này có thể được thực hiện với thuộc tính màu CSS . Bạn cũng có thể thay đổi cỡ chữ.
Làm cách nào để thay đổi màu nền của vùng chứa trong Bootstrap?Chúng ta có thể thêm màu nền vào div đơn giản bằng cách thêm lớp “bg-primary”, “bg-success”, “bg-danger”, “bg-info”< . , and many more as shown in the following examples. |