Người dùng có thể tương tác với trang web của bạn bằng nút React Bootstrap 5. Về kích thước, hình thức và màu sắc, chúng rất dễ thay đổi. Chúng bao gồm một số kiểu nút được xác định trước, mỗi kiểu có chức năng ngữ nghĩa riêng và một số điều khiển khác
Nhập thành phần Nút React Bootstrap 5
Bạn bắt đầu bằng cách nhập thành phần CDBButton vào dự án của mình để sử dụng thành phần Nút React Bootstrap 5
import { CDBBtn } from "cdbreact";
Nút mặc định
Giá trị color
ảnh hưởng đến màu nền của nút
Tiểu học Trung họcThành côngNguy hiểmCảnh báoThông tinÁnh sángTối
import { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
Nút tròn
Thuộc tính 'circle' được sử dụng trên các nút React Bootstrap 5 để làm cho chúng tròn trịa hơn
Tiểu học Trung họcThành côngNguy hiểmCảnh báoThông tinÁnh sángTối
import { CDBBtn, CDBContainer } from "cdbreact";
Các nút phác thảo
Để cung cấp cho nút của bạn chỉ là một đường viền, hãy sử dụng nút 'đường viền'
Tiểu học Trung họcThành côngNguy hiểmCảnh báoThông tinÁnh sángTối
import { CDBBtn, CDBContainer } from "cdbreact";
Các nút viền ngoài hình tròn
Để tạo các nút viền ngoài hình tròn, chúng tôi sẽ sử dụng các thành phần React Bootstrap 5 cho các nút
Tiểu học Trung họcThành côngNguy hiểmCảnh báoThông tinÁnh sángTối
import { CDBBtn, CDBContainer } from "cdbreact";
nút phẳng
Đặt thuộc tính 'phẳng' cho thành phần 'CDBBtn' để tạo các nút không có bóng nút
Tiểu học Trung họcThành côngNguy hiểmTốiCảnh báoThông tin
import { CDBBtn, CDBContainer } from "cdbreact";
Các nút có biểu tượng
Thành phần chuyên nghiệpTrong hướng dẫn này, chúng tôi cũng sử dụng thành phần CDBIcon cùng với thành phần
0. Thành phần 'CDBIcon' được lồng trong thành phần 'CDBBtn'. Các nút của chúng tôi hiện có các biểu tượng được liên kết với chúng do điều nàyimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
import { CDBBtn, CDBIcon, CDBContainer } from "cdbreact";
Kích thước nút
Sử dụng thuộc tính'size' để chỉ định mức độ lớn hay nhỏ của nút của bạn
________số 8_______
Nút bị vô hiệu hóa
Để tắt nút của bạn, hãy sử dụng thuộc tính 'đã tắt'
import { CDBBtn, CDBContainer } from "cdbreact";
Các đạo cụ bạn có thể sử dụng với thành phần Nút React Bootstrap 5 sẽ được mở rộng trong phần này. Bạn sẽ tìm hiểu những công cụ này làm gì, cách sử dụng chúng trong mã của bạn và giá trị mặc định của chúng là gì
Các khả năng hỗ trợ khác cho thành phần 'CDBButton' được bao gồm trong bảng bên dưới
NameTypeDefaultDescriptionExampleactionBooleanfalseAdds
1 class, works with Cardsimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
2activeBooleanfalseAdds active classimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
2blockBooleanfalseCreate block level buttonsimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
2circleBooleanfalseAddsimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
5 class, works with stepperimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
2classNameStringAdds custom classesimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
2colorStringprimaryDetermines button color, accepts CDB predefined color classesimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
2disabledBooleanfalseDisables button from being clickedimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
2downloadStringAdds download attribute with provided urlimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
2endingTextStringPositions the button text in one of the selected positions. Những vị trí này bao gồmimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
1,import { CDBBtn, CDBContainer } from "cdbreact";
2,import { CDBBtn, CDBContainer } from "cdbreact";
3,import { CDBBtn, CDBContainer } from "cdbreact";
4,import { CDBBtn, CDBContainer } from "cdbreact";
5,import { CDBBtn, CDBContainer } from "cdbreact";
6,import { CDBBtn, CDBContainer } from "cdbreact";
7.import { CDBBtn, CDBContainer } from "cdbreact";
2flatBooleanfalseThêm hiệu ứng phẳng cho nút. Đó là nút không có nền và đường viền_______1_______2innerReffunction hoặc StringCho phép truyền chuỗi Tham chiếu, chuỗi này sẽ đính kèm vào nút được hiển thị hoặc phần tử DOMimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
2văn bản nút nhãnStringPositionsimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
1 hoặcimport { CDBBtn, CDBContainer } from "cdbreact";
2.import { CDBBtn, CDBContainer } from "cdbreact";
2onClickfunctionSẽ gọi một chức năng khi nút được nhấp_______1_______2roleStringThêm thuộc tính vai trò cho nútimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
2sizeStringmediumXác định kích thước nút, giá trị khả dụng.import { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
6.import { CDBBtn, CDBContainer } from "cdbreact";
2socialStringThêm biểu tượng mạng xã hội.import { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
2tagStringbuttonThay đổi thẻ mặc địnhimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
2targetString_selfNếu được sử dụng làm liên kết, hãy đặt thuộc tính đíchimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
2typeStringbuttonThêm thuộc tính loại vào nútimport { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
2import { CDBBtn, CDBContainer } from "cdbreact";
Primary
Secondary
Danger
Success
Dark
Warning
Info
Xây dựng các dự án hiện đại bằng Bootstrap 5 và Contrast
Cố gắng tạo các thành phần và trang cho ứng dụng web hoặc trang web từ đầu trong khi duy trì giao diện Người dùng hiện đại có thể rất tẻ nhạt. Đây là lý do tại sao chúng tôi tạo ra Độ tương phản, để giúp giảm đáng kể lượng thời gian chúng tôi dành cho việc đó. để chúng ta có thể tập trung xây dựng một số khía cạnh khác của dự án