Dropdown-menu-right bootstrap 5

Danh sách thả xuống có thể chuyển đổi, lớp phủ theo ngữ cảnh để hiển thị danh sách liên kết và hơn thế nữa. Giống như lớp phủ, Danh sách thả xuống được tạo bằng thư viện của bên thứ ba Popper. js, cung cấp tính năng định vị động và phát hiện khung nhìn

khả năng tiếp cận

Tiêu chuẩn WAI ARIA xác định một , nhưng nó rất cụ thể đối với một loại menu nhất định. Menu ARIA, chỉ được chứa

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Mặt khác, trình đơn thả xuống của Bootstrap được thiết kế chung chung hơn và ứng dụng trong nhiều tình huống khác nhau. Vì lý do này, chúng tôi không tự động thêm vai trò menu vào đánh dấu. Chúng tôi triển khai một số điều hướng bàn phím cơ bản và nếu bạn cung cấp vai trò "menu", thì react-bootstrap sẽ cố gắng hết sức để đảm bảo quản lý tiêu điểm tuân thủ nguyên tắc soạn thảo ARIA cho menu

ví dụ

Menu thả xuống một nút

Dropdown cơ bản bao gồm một

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

________số 8

Vì ở trên là một cấu hình phổ biến nên react-bootstrap cung cấp thành phần

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

DropdownButton sẽ chuyển tiếp các đạo cụ Nút sang thành phần Toggle bên dưới

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Menu thả xuống của nút tách

Tương tự, Bạn tạo danh sách thả xuống phân tách bằng cách kết hợp các thành phần Danh sách thả xuống với một Nút và Nhóm Nút khác

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
 Another action
 
 Separated link
export default VariantsExample;

Như với DropdownButton,

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

định cỡ

Danh sách thả xuống hoạt động với các nút ở mọi kích cỡ

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

thả xuống tối

Chọn tham gia menu thả xuống tối hơn để phù hợp với thanh điều hướng tối hoặc kiểu tùy chỉnh bằng cách thêm

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Sử dụng

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Chỉ đường thả

Trình đơn thả xuống kích hoạt bên trên, bên dưới, bên trái hoặc bên phải của các phần tử chuyển đổi của chúng, với giá đỡ

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Mục thả xuống

Trước đây, nội dung menu thả xuống phải là liên kết, nhưng điều đó không còn xảy ra với v4. Giờ đây, bạn có thể tùy ý sử dụng các phần tử trong danh sách thả xuống của mình thay vì chỉ các phần tử

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
 {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
 id={`dropdown-variants-${variant}`}
 variant={variant.toLowerCase()}
 Action
 Another action
 
 Separated link
export default VariantsExample;

Bạn cũng có thể tạo các mục thả xuống không tương tác với

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Theo mặc định, menu thả xuống được căn chỉnh về bên trái, nhưng bạn có thể chuyển nó bằng cách chuyển

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

căn chỉnh đáp ứng

Nếu bạn muốn sử dụng căn chỉnh menu đáp ứng, hãy chuyển một đối tượng chứa điểm dừng tới chỗ dựa

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
 {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
 id={`dropdown-variants-${variant}`}
 variant={variant.toLowerCase()}
 Action
 Another action
 
 Separated link
export default VariantsExample;

Thêm tiêu đề vào các phần nhãn của hành động

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Tách các nhóm mục menu có liên quan bằng một dải phân cách

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Tự động đóng

Theo mặc định, menu thả xuống bị đóng khi chọn một mục menu hoặc nhấp vào bên ngoài menu thả xuống. Hành vi này có thể được thay đổi bằng cách sử dụng thuộc tính

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Theo mặc định,

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Lưu ý cách trình đơn thả xuống được chuyển đổi trong từng tình huống bằng cách nhấp vào nút

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

tùy biến

Nếu cách xử lý mặc định của menu thả xuống và các thành phần chuyển đổi không theo ý thích của bạn, bạn có thể tùy chỉnh chúng bằng cách sử dụng Thành phần

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Hoạt động

hành động khác

liên kết riêng biệt

xuất ButtonCustomExample mặc định;

Thành phần thả xuống tùy chỉnh

Đối với những người muốn tùy chỉnh mọi thứ, bạn có thể bỏ qua các thành phần Chuyển đổi và Menu đi kèm và tạo các thành phần của riêng bạn. Bằng cách cung cấp các thành phần tùy chỉnh cho prop

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
 {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
 id={`dropdown-variants-${variant}`}
 variant={variant.toLowerCase()}
 Action
 Another action
 
 Separated link
export default VariantsExample;

API

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Một thành phần tiện lợi cho danh sách thả xuống sử dụng đơn giản hoặc chung chung. Hiển thị chuyển đổi

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Tất cả các đạo cụ không xác định được chuyển qua thành phần

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

NameTypeDefaultDescriptionalign

"bắt đầu". "chấm dứt". {m. "bắt đầu". "chấm dứt" }. { md. "bắt đầu". "chấm dứt" }. { lg. "bắt đầu". "chấm dứt" }. { xl. "bắt đầu". "chấm dứt"}. {xxl. "bắt đầu". "chấm dứt"}

Cho phép Dropdown lật trong trường hợp phần tử tham chiếu bị chồng chéo. Để biết thêm thông tin tham khảo Popper. tài liệu lật của js

Một

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Thuộc tính id html cho nút Chuyển đổi, cần thiết cho các công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình

Vai trò có thể truy cập ARIA được áp dụng cho thành phần Menu. Khi được đặt thành 'menu', Danh sách thả xuống

Biến thể màu menu

Bỏ qua điều này sẽ sử dụng màu sáng mặc định

Trình xử lý

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
      {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
            id={`dropdown-variants-${variant}`}
            variant={variant.toLowerCase()}
            Action
            Another action
            
            Separated link
export default VariantsExample;

Có hiển thị menu thả xuống trong DOM trước lần đầu tiên nó được hiển thị hay không

Sự kiện nào khi được kích hoạt bên ngoài thành phần sẽ khiến nó bị đóng

xem để biết thêm chi tiết

Biến thể kích thước thành phần

Nội dung của Nút không chuyển đổi

Các biến thể phong cách trực quan hoặc theo ngữ cảnh của thành phần

Thay đổi tên lớp cơ sở CSS thành phần cơ bản và tiền tố tên lớp sửa đổi. Đây là một lối thoát để làm việc với css bootstrap được tùy chỉnh nhiều

Làm cách nào để căn chỉnh danh sách thả xuống sang phải trong Bootstrap 5?

Làm cách nào để thêm menu thả xuống trong Bootstrap 5?

Tại sao trình đơn thả xuống không hoạt động trong Bootstrap 5?

Làm cách nào để thêm danh sách thả xuống trong thanh bên Bootstrap?