Tùy chỉnh gốc bằng CSS tùy chỉnh thay đổi giao diện ban đầu của phần tử. Default#import Form from 'react-bootstrap/Form';function SelectBasicExample() { export default SelectBasicExample;Sizing#Bạn cũng có thể chọn từ các lựa chọn tùy chỉnh nhỏ và lớn để phù hợp với các kiểu nhập văn bản có kích thước tương tự của chúng tôi. nhập Biểu mẫu từ 'react-bootstrap/Form';function SelectSizesExample() {xuất mặc định SelectSizesExample;API#import Biểu mẫu từ 'react-bootstrap/Form'Sao chép mã nhập cho thành phần Biểu mẫuNameTypeDefaultDescriptiondisabled Tắt điều khiểnhtmlSize Thuộc tính kích thước của HTML cơ bản . Chỉ định số lượng tùy chọn hiển thị. isInvalid falseThêm kiểu xác thực "không hợp lệ" vào điều khiển và nhãn đi kèmisValid falseThêm kiểu xác thực "hợp lệ" vào controlonChange Một cuộc gọi lại được kích hoạt khi giá trị prop thay đổi kích thước chuỗi giá trị. mảngcủa. số được kiểm soát bởi. onChange, chỗ dựa ban đầu. defaultValueThuộc tính giá trị của inputbsPrefix {'form-select'}Thay đổi tên lớp cơ sở CSS thành phần cơ bản và tiền tố tên lớp bổ trợ. Đây là một lối thoát hiểm để làm việc với css bootstrap được tùy chỉnh nhiều
$( '#single-select-clear-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), allowClear: true } );Submit
$(document).ready(function() { $('.mdb-select.validate').materialSelect({ validate: true, labels: { validFeedback: 'Correct choice', invalidFeedback: 'Wrong choice' } }); function validateSelect(e) { e.preventDefault(); $('.needs-validation').addClass('was-validated'); if ($('.needs-validation select').val() === null) { $('.needs-validation').find('.valid-feedback').hide(); $('.needs-validation').find('.invalid-feedback').show(); $('.needs-validation').find('.select-dropdown').val('').prop('placeholder', 'No countries selected') } else { $('.needs-validation').find('.valid-feedback').show(); $('.needs-validation').find('.invalid-feedback').hide(); } } $('.needs-validation select').on('change', e => validateSelect(e)) $('.needs-validation').on('submit', e => validateSelect(e)) });
Sử dụng tùy chọn Example label 8 để đặt trình giữ chỗ cho đầu vào được chọn. Trình giữ chỗ sẽ được hiển thị khi đầu vào được đặt tiêu điểm và không có tùy chọn nào được chọn
Đã tắt chọn
Thêm thuộc tính Example label 9 vào phần tử chọn để tắt đầu vào chọn
tùy chọn bị vô hiệu hóa
Sử dụng thuộc tính Example label 9 trên thành phần tùy chọn để tắt tùy chọn cụ thể
xóa nút
Đặt tùy chọn 1 thành 2 để hiển thị nút cho phép xóa các lựa chọn hiện tại
Nội dung tùy chỉnh
Vùng chứa nội dung tùy chỉnh có lớp 3 sẽ được hiển thị ở cuối danh sách thả xuống được chọn
Save
tùy chọn hiển thị
Sử dụng tùy chọn 4 để thay đổi số lượng tùy chọn sẽ được hiển thị trong menu thả xuống được chọn mà không cần cuộn
Văn bản phụ
Thêm thuộc tính dữ liệu 5 vào các tùy chọn cụ thể để hiển thị văn bản phụ
Tìm kiếm
Đặt tùy chọn 6 thành 2 để bật tính năng lọc tùy chọn
Example label 0
Chọn với tìm kiếm bên trong một phương thức
Do bẫy tiêu điểm trong các chế độ, không thể lấy nét các phần tử bên ngoài (như menu thả xuống chọn). Bạn có thể sử dụng tùy chọn chọn 8 để giải quyết vấn đề này
8 chấp nhận bộ chọn của phần tử bên trong danh sách thả xuống chọn sẽ được hiển thị. Trong trường hợp này, bộ chọn phải trỏ đến bộ chứa phương thức (phần tử có lớp 0). Điều quan trọng là sử dụng một bộ chọn duy nhất để gán lựa chọn cho một phương thức cụ thể
Example label 1
Nhóm tùy chọn
Có thể nhóm các tùy chọn bằng cách sử dụng phần tử 1
Example label 2
Chọn bằng biểu tượng
Thêm thuộc tính dữ liệu 2 vào các tùy chọn cụ thể để hiển thị biểu tượng tùy chọn
Thẩm định
Đặt tùy chọn 3 thành 2 để bật xác thực thành phần. Các tùy chọn 5 và 6 cho phép sửa đổi các thông báo xác thực
Example label 4
Example label 5
Đặt giá trị
Phương pháp 7 cho phép thiết lập các lựa chọn thành phần theo chương trình
lựa chọn duy nhất
Thêm một chuỗi giá trị vào danh sách đối số để chọn đúng tùy chọn với giá trị tương ứng trong chế độ chọn đơn
Example label 6
Example label 7
đa lựa chọn
Thêm mảng giá trị chuỗi vào danh sách đối số để chọn đúng tùy chọn với giá trị tương ứng trong chế độ đa lựa chọn
Example label 6
Example label 9
Chọn với yếu tố chuyển đổi
Nếu muốn bật nút Select via, bạn phải thêm thuộc tính 8 vào nút này với 9 của phần tử Select
Example label 0
Example label 1
Tự động lựa chọn
Đặt tùy chọn 0 thành 2 để cho phép chọn khi nhấn Tab
Ẩn tùy chọn đã chọn
Thêm tùy chọn đầu tiên với các thuộc tính ẩn và được chọn và một giá trị trống để chọn mà không có lựa chọn nào
Example label 3
Chọn với các lớp CSS
Để sử dụng select với các lớp CSS bổ sung, bạn cần đặt nó trong trình bao bọc 2 và sử dụng các lớp CSS trên div đó. Trong trường hợp bạn sử dụng các lớp hiển thị như 3 và lựa chọn không hiển thị khi tải trang, bạn cần sử dụng mã từ ví dụ để cập nhật chiều rộng nhãn khi lựa chọn hiển thị